@arc-ui/components 12.0.0 → 13.0.0

package/lib/index.mjs

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import React__default, { createContext, useContext, useId as useId$1, useRef, useState, useEffect, forwardRef, isValidElement, cloneElement, useMemo, useCallback, useReducer, useLayoutEffect, createElement, Children, Fragment as Fragment$1, Suspense, useImperativeHandle } from 'react';
+import React__default, { createContext, useContext, useId as useId$1, useRef, useState, useEffect, isValidElement, cloneElement, useMemo, useCallback, useReducer, useLayoutEffect, createElement, forwardRef, Children, Fragment as Fragment$1, Suspense } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { flushSync, createPortal } from 'react-dom';
@@ -847,7 +847,7 @@ var BannerRow = function (_a) {
 
 /** Use `TemplateBanner` as a base structure for banner components; other banner variants extend or consume this template. */
 var TemplateBanner = function (_a) {
-    var heading = _a.heading, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, label = _a.label, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, text = _a.text, img = _a.img, _d = _a.contentRatio, contentRatio = _d === void 0 ? "1/1" : _d, children = _a.children, _e = _a.alignment, alignment = _e === void 0 ? "center" : _e, additionalTopMargin = _a.additionalTopMargin, _f = _a.minHeight, minHeight = _f === void 0 ? 454 : _f, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _g = _a.headingSize, headingSize = _g === void 0 ? "xl" : _g, _h = _a.isReversed, isReversed = _h === void 0 ? false : _h, _j = _a.isElevated, isElevated = _j === void 0 ? false : _j, _k = _a.headingLevel, headingLevel = _k === void 0 ? "2" : _k, _l = _a.type, type = _l === void 0 ? "light" : _l, props = __rest(_a, ["heading", "fontStyle", "label", "labelLevel", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "minHeightM", "minHeightL", "minHeightXL", "headingSize", "isReversed", "isElevated", "headingLevel", "type"]);
+    var heading = _a.heading, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, label = _a.label, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, text = _a.text, img = _a.img, _d = _a.contentRatio, contentRatio = _d === void 0 ? "1/1" : _d, children = _a.children, _e = _a.alignment, alignment = _e === void 0 ? "center" : _e, additionalTopMargin = _a.additionalTopMargin, _f = _a.minHeight, minHeight = _f === void 0 ? 454 : _f, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _g = _a.headingSize, headingSize = _g === void 0 ? "xl" : _g, _h = _a.isReversed, isReversed = _h === void 0 ? false : _h, _j = _a.isElevated, isElevated = _j === void 0 ? false : _j, _k = _a.headingLevel, headingLevel = _k === void 0 ? "2" : _k, _l = _a.headingWordWrap, headingWordWrap = _l === void 0 ? false : _l, _m = _a.type, type = _m === void 0 ? "light" : _m, props = __rest(_a, ["heading", "fontStyle", "label", "labelLevel", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "minHeightM", "minHeightL", "minHeightXL", "headingSize", "isReversed", "isElevated", "headingLevel", "headingWordWrap", "type"]);
     var backgrounds = {
         dark: "dark-brand-02",
         light: "light-white",
@@ -892,7 +892,7 @@ var TemplateBanner = function (_a) {
                             label && (React__default.createElement(React__default.Fragment, null,
                                 React__default.createElement(Heading, { level: labelLevel, fontStyle: "overline", isWordWrap: false }, label),
                                 React__default.createElement(VerticalSpace, { size: "8" }))),
-                            React__default.createElement(Heading, { level: headingLevel, size: headingSize, fontStyle: fontStyle, isWordWrap: false }, heading),
+                            React__default.createElement(Heading, { level: headingLevel, size: headingSize, fontStyle: fontStyle, isWordWrap: headingWordWrap }, heading),
                             text && (React__default.createElement(React__default.Fragment, null,
                                 React__default.createElement(VerticalSpace, { size: "16" }),
                                 React__default.createElement("span", { className: "arc-TemplateBanner-text" }, text))),
@@ -907,8 +907,8 @@ var TemplateBanner = function (_a) {
 
 /** Use `Banner` to promote key content or products with bold visuals and messaging. */
 var Banner = 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, minHeight = _a.minHeight, _c = _a.isReversed, isReversed = _c === void 0 ? false : _c, _d = _a.isElevated, isElevated = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.type, type = _f === void 0 ? "light" : _f, _g = _a.alignment, alignment = _g === void 0 ? "center" : _g, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "type", "alignment"]);
-    return (React__default.createElement(TemplateBanner, __assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: "m", alignment: alignment }, filterAttrs(props)), children));
+    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, minHeight = _a.minHeight, _c = _a.isReversed, isReversed = _c === void 0 ? false : _c, _d = _a.isElevated, isElevated = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.type, type = _f === void 0 ? "light" : _f, _g = _a.alignment, alignment = _g === void 0 ? "center" : _g, _h = _a.headingWordWrap, headingWordWrap = _h === void 0 ? false : _h, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "type", "alignment", "headingWordWrap"]);
+    return (React__default.createElement(TemplateBanner, __assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: "m", alignment: alignment, headingWordWrap: headingWordWrap }, filterAttrs(props)), children));
 };
 
 /**
@@ -1644,7 +1644,7 @@ var Breadcrumbs = function (_a) {
             window.removeEventListener("resize", handleResize);
             handleResize.cancel();
         };
-    }, []);
+    }, [children]);
     var items = React__default.Children.toArray(children);
     return (React__default.createElement("nav", __assign({ "aria-label": "Breadcrumbs", className: classNames({
             "arc-Breadcrumbs": true,
@@ -1684,22 +1684,22 @@ var handleLinkClick = function (_a) {
     };
 };
 
-var BreadcrumbsLink = React__default.forwardRef(function (_a, ref) {
-    var onClick = _a.onClick, href = _a.href, isActive = _a.isActive, children = _a.children;
-    return (React__default.createElement(React__default.Fragment, null, isActive || href === undefined ? (React__default.createElement("span", { onClick: onClick, className: classNames({
+var BreadcrumbsLink = function (_a) {
+    var onClick = _a.onClick, href = _a.href, isActive = _a.isActive, children = _a.children, ref = _a.ref, props = __rest(_a, ["onClick", "href", "isActive", "children", "ref"]);
+    return (React__default.createElement(React__default.Fragment, null, isActive || href === undefined ? (React__default.createElement("span", __assign({ onClick: onClick, className: classNames({
             "arc-Breadcrumbs-text": true,
             "arc-Breadcrumbs-text--active": isActive,
-        }) }, children)) : (React__default.createElement("a", __assign({}, (onClick && ref
+        }) }, filterAttrs(props)), children)) : (React__default.createElement("a", __assign({}, (onClick && ref
         ? { onClick: onClick }
-        : { onClick: handleLinkClick({ handler: onClick }) }), { className: "arc-Breadcrumbs-text", ref: ref, href: href }), children))));
-});
+        : { onClick: handleLinkClick({ handler: onClick }) }), { className: "arc-Breadcrumbs-text", ref: ref, href: href }, filterAttrs(props)), children))));
+};
 
 /**
  * Use `Button` to let a user complete an action like ‘Log in’ or ‘Register’.
  */
-var Button = forwardRef(function (_a, ref) {
+var Button = function (_a) {
     var _b;
-    var ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _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", "ariaControls", "ariaExpanded", "ariaHasPopup", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "size", "supportingText", "target", "type", "form"]);
+    var ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _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, ref = _a.ref, props = __rest(_a, ["ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "size", "supportingText", "target", "type", "form", "ref"]);
     var surface = useContext(Context$3).surface;
     var buttonClasses = classNames((_b = {
             "arc-Button": true,
@@ -1727,7 +1727,7 @@ var Button = forwardRef(function (_a, ref) {
         React__default.createElement("span", { className: "arc-Button-inner" },
             buttonText,
             buttonIcon)));
-});
+};
 var ButtonIcon = function (_a) {
     var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
     return (React__default.createElement("span", { className: "arc-Button-icon" }, isChevron ? (React__default.createElement(ThemeIcon, { icon: isBeforeText ? "buttonLeft" : "buttonRight" })) : (React__default.createElement(Icon$1, { icon: icon }))));
@@ -1745,8 +1745,8 @@ var Spinner = function (_a) {
 /**
  * Use `ButtonV2` for our most up to date Call To Action button, offering Primary, Secondary, Tertiary, Compact and Error states.
  */
-var ButtonV2 = forwardRef(function (_a, ref) {
-    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, iconActive = _a.iconActive, _c = _a.iconPosition, iconPosition = _c === void 0 ? "beforeText" : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? false : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, isSpan = _a.isSpan, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, props = __rest(_a, ["label", "buttonStyle", "icon", "iconActive", "iconPosition", "size", "ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "isFullWidth", "isLoading", "isSpan", "onClick", "href", "id", "rel", "target", "type", "form"]);
+var ButtonV2 = function (_a) {
+    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, iconActive = _a.iconActive, _c = _a.iconPosition, iconPosition = _c === void 0 ? "beforeText" : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? false : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, isSpan = _a.isSpan, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, ref = _a.ref, props = __rest(_a, ["label", "buttonStyle", "icon", "iconActive", "iconPosition", "size", "ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "isFullWidth", "isLoading", "isSpan", "onClick", "href", "id", "rel", "target", "type", "form", "ref"]);
     var surface = useContext(Context$3).surface;
     var ButtonElement = isSpan ? "span" : "button";
     var iconSizes = {
@@ -1790,7 +1790,7 @@ var ButtonV2 = forwardRef(function (_a, ref) {
         return (React__default.createElement("a", __assign({}, commonProps, { className: ButtonV2Classes, href: href, rel: rel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, target: target }), renderButtonContent()));
     }
     return (React__default.createElement(ButtonElement, __assign({}, commonProps, { className: ButtonV2Classes, "aria-label": ariaLabel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, disabled: isLoading, type: type, form: form }), renderButtonContent()));
-});
+};
 
 /**
  * Use `ButtonGroup` to group multiple buttons together, ensuring consistent sizing, spacing,
@@ -1808,7 +1808,10 @@ var ButtonGroup = function (_a) {
             "arc-ButtonGroup--vertical": orientation === "vertical",
         }), role: "group", "aria-label": ariaLabel }, filterAttrs(props)), React__default.Children.map(children, function (child) {
         if (isValidElement(child) && isArcButton(child.type)) {
-            return cloneElement(child, __assign(__assign({}, child.props), { size: size, isFullWidth: isFullWidth }));
+            return cloneElement(child, {
+                size: size,
+                isFullWidth: isFullWidth,
+            });
         }
         return null;
     })));
@@ -2003,7 +2006,7 @@ function startOfMonth(dirtyDate) {
 
 /**
  * Do not edit directly
- * Generated on Tue, 18 Nov 2025 18:15:01 GMT
+ * Generated on Tue, 23 Dec 2025 14:36:38 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";
@@ -2171,11 +2174,11 @@ var useMediaQuery = function (mediaQuery) {
         return window.matchMedia(query).matches;
     };
     var _a = useState(false), matches = _a[0], setMatches = _a[1];
-    // Handles the change event of the media query.
-    var handleChange = function () {
-        setMatches(getMatches(mediaQuery));
-    };
     useEffect(function () {
+        // Handles the change event of the media query.
+        var handleChange = function () {
+            setMatches(getMatches(mediaQuery));
+        };
         var matchMedia = window.matchMedia(mediaQuery);
         // Triggered at the first client-side load and if query changes
         handleChange();
@@ -2787,9 +2790,9 @@ function subDays(dirtyDate, dirtyAmount) {
   return addDays(dirtyDate, -amount);
 }
 
-var defaultOptions$1 = {};
+var defaultOptions$3 = {};
 function getDefaultOptions() {
-  return defaultOptions$1;
+  return defaultOptions$3;
 }
 
 /**
@@ -5248,8 +5251,8 @@ function cleanEscapedString(input) {
 
 var ArcCalendarContext = createContext(null);
 
-var CalendarDayNumber = forwardRef(function (_a, autoFocusRef) {
-    var date = _a.date, shouldRender = _a.shouldRender, isFocusWithinDayGrid = _a.isFocusWithinDayGrid;
+var CalendarDayNumber = function (_a) {
+    var autoFocusRef = _a.ref, date = _a.date, shouldRender = _a.shouldRender, isFocusWithinDayGrid = _a.isFocusWithinDayGrid;
     var context = useContext(ArcCalendarContext);
     var isFocusDate = context && isEqual$1(date, context.focusDate);
     var tableCellRef = useCallback(function (el) {
@@ -5310,7 +5313,7 @@ var CalendarDayNumber = forwardRef(function (_a, autoFocusRef) {
             React__default.createElement("div", { className: "arc-CalendarDayNumber-buttonInner" },
                 React__default.createElement(Text, { size: "s" },
                     React__default.createElement("span", { "aria-hidden": true }, getDate(date)))))))));
-});
+};
 
 /**
  * Do not edit directly
@@ -6075,6 +6078,131 @@ var Calendar = function (_a) {
                 onCancelClick && (React__default.createElement(CalendarFooter, { onCancelClick: onCancelButtonClick }))))));
 };
 
+const defaultOptions$2 = {
+  active: true,
+  breakpoints: {},
+  snapped: 'is-snapped',
+  inView: 'is-in-view',
+  draggable: 'is-draggable',
+  dragging: 'is-dragging',
+  loop: 'is-loop'
+};
+
+function normalizeClassNames(classNames) {
+  const normalized = Array.isArray(classNames) ? classNames : [classNames];
+  return normalized.filter(Boolean);
+}
+function removeClass(node, classNames) {
+  if (!node || !classNames.length) return;
+  node.classList.remove(...classNames);
+}
+function addClass(node, classNames) {
+  if (!node || !classNames.length) return;
+  node.classList.add(...classNames);
+}
+
+function ClassNames(userOptions = {}) {
+  let options;
+  let emblaApi;
+  let root;
+  let slides;
+  let snappedIndexes = [];
+  let inViewIndexes = [];
+  const selectedEvents = ['select'];
+  const draggingEvents = ['pointerDown', 'pointerUp'];
+  const inViewEvents = ['slidesInView'];
+  const classNames = {
+    snapped: [],
+    inView: [],
+    draggable: [],
+    dragging: [],
+    loop: []
+  };
+  function init(emblaApiInstance, optionsHandler) {
+    emblaApi = emblaApiInstance;
+    const {
+      mergeOptions,
+      optionsAtMedia
+    } = optionsHandler;
+    const optionsBase = mergeOptions(defaultOptions$2, ClassNames.globalOptions);
+    const allOptions = mergeOptions(optionsBase, userOptions);
+    options = optionsAtMedia(allOptions);
+    root = emblaApi.rootNode();
+    slides = emblaApi.slideNodes();
+    const {
+      watchDrag,
+      loop
+    } = emblaApi.internalEngine().options;
+    const isDraggable = !!watchDrag;
+    if (options.loop && loop) {
+      classNames.loop = normalizeClassNames(options.loop);
+      addClass(root, classNames.loop);
+    }
+    if (options.draggable && isDraggable) {
+      classNames.draggable = normalizeClassNames(options.draggable);
+      addClass(root, classNames.draggable);
+    }
+    if (options.dragging) {
+      classNames.dragging = normalizeClassNames(options.dragging);
+      draggingEvents.forEach(evt => emblaApi.on(evt, toggleDraggingClass));
+    }
+    if (options.snapped) {
+      classNames.snapped = normalizeClassNames(options.snapped);
+      selectedEvents.forEach(evt => emblaApi.on(evt, toggleSnappedClasses));
+      toggleSnappedClasses();
+    }
+    if (options.inView) {
+      classNames.inView = normalizeClassNames(options.inView);
+      inViewEvents.forEach(evt => emblaApi.on(evt, toggleInViewClasses));
+      toggleInViewClasses();
+    }
+  }
+  function destroy() {
+    draggingEvents.forEach(evt => emblaApi.off(evt, toggleDraggingClass));
+    selectedEvents.forEach(evt => emblaApi.off(evt, toggleSnappedClasses));
+    inViewEvents.forEach(evt => emblaApi.off(evt, toggleInViewClasses));
+    removeClass(root, classNames.loop);
+    removeClass(root, classNames.draggable);
+    removeClass(root, classNames.dragging);
+    toggleSlideClasses([], snappedIndexes, classNames.snapped);
+    toggleSlideClasses([], inViewIndexes, classNames.inView);
+    Object.keys(classNames).forEach(classNameKey => {
+      const key = classNameKey;
+      classNames[key] = [];
+    });
+  }
+  function toggleDraggingClass(_, evt) {
+    const toggleClass = evt === 'pointerDown' ? addClass : removeClass;
+    toggleClass(root, classNames.dragging);
+  }
+  function toggleSlideClasses(addClassIndexes = [], removeClassIndexes = [], classNames) {
+    const removeClassSlides = removeClassIndexes.map(index => slides[index]);
+    const addClassSlides = addClassIndexes.map(index => slides[index]);
+    removeClassSlides.forEach(slide => removeClass(slide, classNames));
+    addClassSlides.forEach(slide => addClass(slide, classNames));
+    return addClassIndexes;
+  }
+  function toggleSnappedClasses() {
+    const {
+      slideRegistry
+    } = emblaApi.internalEngine();
+    const newSnappedIndexes = slideRegistry[emblaApi.selectedScrollSnap()];
+    snappedIndexes = toggleSlideClasses(newSnappedIndexes, snappedIndexes, classNames.snapped);
+  }
+  function toggleInViewClasses() {
+    const newInViewIndexes = emblaApi.slidesInView();
+    inViewIndexes = toggleSlideClasses(newInViewIndexes, inViewIndexes, classNames.inView);
+  }
+  const self = {
+    name: 'classNames',
+    options: userOptions,
+    init,
+    destroy
+  };
+  return self;
+}
+ClassNames.globalOptions = undefined;
+
 function isObject$1(subject) {
   return Object.prototype.toString.call(subject) === '[object Object]';
 }
@@ -7526,7 +7654,7 @@ function EventHandler() {
   return self;
 }
 
-const defaultOptions = {
+const defaultOptions$1 = {
   align: 'center',
   axis: 'x',
   container: null,
@@ -7610,7 +7738,7 @@ function EmblaCarousel(root, userOptions, userPlugins) {
   const reInit = reActivate;
   let destroyed = false;
   let engine;
-  let optionsBase = mergeOptions(defaultOptions, EmblaCarousel.globalOptions);
+  let optionsBase = mergeOptions(defaultOptions$1, EmblaCarousel.globalOptions);
   let options = mergeOptions(optionsBase);
   let pluginList = [];
   let pluginApis;
@@ -7801,6 +7929,199 @@ function useEmblaCarousel(options = {}, plugins = []) {
 }
 useEmblaCarousel.globalOptions = undefined;
 
+const defaultOptions = {
+  active: true,
+  breakpoints: {},
+  delay: 4000,
+  jump: false,
+  playOnInit: true,
+  stopOnFocusIn: true,
+  stopOnInteraction: true,
+  stopOnMouseEnter: false,
+  stopOnLastSnap: false,
+  rootNode: null
+};
+
+function normalizeDelay(emblaApi, delay) {
+  const scrollSnaps = emblaApi.scrollSnapList();
+  if (typeof delay === 'number') {
+    return scrollSnaps.map(() => delay);
+  }
+  return delay(scrollSnaps, emblaApi);
+}
+function getAutoplayRootNode(emblaApi, rootNode) {
+  const emblaRootNode = emblaApi.rootNode();
+  return rootNode && rootNode(emblaRootNode) || emblaRootNode;
+}
+
+function Autoplay(userOptions = {}) {
+  let options;
+  let emblaApi;
+  let destroyed;
+  let delay;
+  let timerStartTime = null;
+  let timerId = 0;
+  let autoplayActive = false;
+  let mouseIsOver = false;
+  let playOnDocumentVisible = false;
+  let jump = false;
+  function init(emblaApiInstance, optionsHandler) {
+    emblaApi = emblaApiInstance;
+    const {
+      mergeOptions,
+      optionsAtMedia
+    } = optionsHandler;
+    const optionsBase = mergeOptions(defaultOptions, Autoplay.globalOptions);
+    const allOptions = mergeOptions(optionsBase, userOptions);
+    options = optionsAtMedia(allOptions);
+    if (emblaApi.scrollSnapList().length <= 1) return;
+    jump = options.jump;
+    destroyed = false;
+    delay = normalizeDelay(emblaApi, options.delay);
+    const {
+      eventStore,
+      ownerDocument
+    } = emblaApi.internalEngine();
+    const isDraggable = !!emblaApi.internalEngine().options.watchDrag;
+    const root = getAutoplayRootNode(emblaApi, options.rootNode);
+    eventStore.add(ownerDocument, 'visibilitychange', visibilityChange);
+    if (isDraggable) {
+      emblaApi.on('pointerDown', pointerDown);
+    }
+    if (isDraggable && !options.stopOnInteraction) {
+      emblaApi.on('pointerUp', pointerUp);
+    }
+    if (options.stopOnMouseEnter) {
+      eventStore.add(root, 'mouseenter', mouseEnter);
+    }
+    if (options.stopOnMouseEnter && !options.stopOnInteraction) {
+      eventStore.add(root, 'mouseleave', mouseLeave);
+    }
+    if (options.stopOnFocusIn) {
+      emblaApi.on('slideFocusStart', stopAutoplay);
+    }
+    if (options.stopOnFocusIn && !options.stopOnInteraction) {
+      eventStore.add(emblaApi.containerNode(), 'focusout', startAutoplay);
+    }
+    if (options.playOnInit) startAutoplay();
+  }
+  function destroy() {
+    emblaApi.off('pointerDown', pointerDown).off('pointerUp', pointerUp).off('slideFocusStart', stopAutoplay);
+    stopAutoplay();
+    destroyed = true;
+    autoplayActive = false;
+  }
+  function setTimer() {
+    const {
+      ownerWindow
+    } = emblaApi.internalEngine();
+    ownerWindow.clearTimeout(timerId);
+    timerId = ownerWindow.setTimeout(next, delay[emblaApi.selectedScrollSnap()]);
+    timerStartTime = new Date().getTime();
+    emblaApi.emit('autoplay:timerset');
+  }
+  function clearTimer() {
+    const {
+      ownerWindow
+    } = emblaApi.internalEngine();
+    ownerWindow.clearTimeout(timerId);
+    timerId = 0;
+    timerStartTime = null;
+    emblaApi.emit('autoplay:timerstopped');
+  }
+  function startAutoplay() {
+    if (destroyed) return;
+    if (documentIsHidden()) {
+      playOnDocumentVisible = true;
+      return;
+    }
+    if (!autoplayActive) emblaApi.emit('autoplay:play');
+    setTimer();
+    autoplayActive = true;
+  }
+  function stopAutoplay() {
+    if (destroyed) return;
+    if (autoplayActive) emblaApi.emit('autoplay:stop');
+    clearTimer();
+    autoplayActive = false;
+  }
+  function visibilityChange() {
+    if (documentIsHidden()) {
+      playOnDocumentVisible = autoplayActive;
+      return stopAutoplay();
+    }
+    if (playOnDocumentVisible) startAutoplay();
+  }
+  function documentIsHidden() {
+    const {
+      ownerDocument
+    } = emblaApi.internalEngine();
+    return ownerDocument.visibilityState === 'hidden';
+  }
+  function pointerDown() {
+    if (!mouseIsOver) stopAutoplay();
+  }
+  function pointerUp() {
+    if (!mouseIsOver) startAutoplay();
+  }
+  function mouseEnter() {
+    mouseIsOver = true;
+    stopAutoplay();
+  }
+  function mouseLeave() {
+    mouseIsOver = false;
+    startAutoplay();
+  }
+  function play(jumpOverride) {
+    if (typeof jumpOverride !== 'undefined') jump = jumpOverride;
+    startAutoplay();
+  }
+  function stop() {
+    if (autoplayActive) stopAutoplay();
+  }
+  function reset() {
+    if (autoplayActive) startAutoplay();
+  }
+  function isPlaying() {
+    return autoplayActive;
+  }
+  function next() {
+    const {
+      index
+    } = emblaApi.internalEngine();
+    const nextIndex = index.clone().add(1).get();
+    const lastIndex = emblaApi.scrollSnapList().length - 1;
+    const kill = options.stopOnLastSnap && nextIndex === lastIndex;
+    if (emblaApi.canScrollNext()) {
+      emblaApi.scrollNext(jump);
+    } else {
+      emblaApi.scrollTo(0, jump);
+    }
+    emblaApi.emit('autoplay:select');
+    if (kill) return stopAutoplay();
+    startAutoplay();
+  }
+  function timeUntilNext() {
+    if (!timerStartTime) return null;
+    const currentDelay = delay[emblaApi.selectedScrollSnap()];
+    const timePastSinceStart = new Date().getTime() - timerStartTime;
+    return currentDelay - timePastSinceStart;
+  }
+  const self = {
+    name: 'autoplay',
+    options: userOptions,
+    init,
+    destroy,
+    play,
+    stop,
+    reset,
+    isPlaying,
+    timeUntilNext
+  };
+  return self;
+}
+Autoplay.globalOptions = undefined;
+
 var XS_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsXs, ")");
 var S_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsS, ")");
 var M_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsM, ")");
@@ -7875,9 +8196,29 @@ var KeyNames;
 })(KeyNames || (KeyNames = {}));
 
 var Carousel = function (_a) {
-    var children = _a.children, responsive = _a.responsive, _b = _a.itemsToScroll, itemsToScroll = _b === void 0 ? 1 : _b, _c = _a.itemsPerSlide, itemsPerSlide = _c === void 0 ? 1 : _c, _d = _a.withGutter, withGutter = _d === void 0 ? true : _d, _e = _a.loop, loop = _e === void 0 ? false : _e, _f = _a.isPartialVisible, isPartialVisible = _f === void 0 ? false : _f;
+    var children = _a.children, responsive = _a.responsive, _b = _a.itemsToScroll, itemsToScroll = _b === void 0 ? 1 : _b, _c = _a.itemsPerSlide, itemsPerSlide = _c === void 0 ? 1 : _c, _d = _a.withGutter, withGutter = _d === void 0 ? true : _d, _e = _a.loop, loop = _e === void 0 ? false : _e, _f = _a.isPartialVisible, isPartialVisible = _f === void 0 ? false : _f, autoplay = _a.autoplay, isPlaying = _a.isPlaying, fade = _a.fade;
     var id = useId$1();
-    var _g = useEmblaCarousel(getOptions(itemsToScroll, loop, responsive)), emblaRef = _g[0], emblaApi = _g[1];
+    var autoPlayOptions = autoplay
+        ? __assign({ playOnInit: true, delay: 3000, stopOnInteraction: true, stopOnMouseEnter: false, stopOnFocusIn: true, stopOnLastSnap: false }, autoplay) : undefined;
+    var _g = useEmblaCarousel(__assign(__assign({}, getOptions(itemsToScroll, loop, responsive)), (fade ? { inViewThreshold: 0.74 } : {})), __spreadArray(__spreadArray([], (autoPlayOptions ? [Autoplay(autoPlayOptions)] : []), true), (fade
+        ? [
+            ClassNames({
+                inView: "arc-Carousel-slide--isInView",
+            }),
+        ]
+        : []), true)), emblaRef = _g[0], emblaApi = _g[1];
+    useEffect(function () {
+        var _a;
+        if (!emblaApi || !autoplay)
+            return;
+        var autoplayPlugin = (_a = emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.plugins()) === null || _a === void 0 ? void 0 : _a.autoplay;
+        if (isPlaying) {
+            autoplayPlugin.play();
+        }
+        if (isPlaying == false) {
+            autoplayPlugin.stop();
+        }
+    }, [emblaApi, isPlaying, autoplay]);
     var _h = useState(), dotButtonFocusIndex = _h[0], setCarouselDotButtonFocusIndex = _h[1];
     var prevButtonRef = useRef(null);
     var _j = useState(0), visibleSlideIndex = _j[0], setVisibleSlideIndex = _j[1];
@@ -7955,7 +8296,9 @@ var Carousel = function (_a) {
             React__default.createElement("div", { ref: emblaRef, className: classNames("arc-Carousel-viewport", {
                     "arc-Carousel-viewport--gutter": withGutter,
                 }) },
-                React__default.createElement("div", { className: "arc-Carousel-slider", role: "region", "aria-roledescription": "carousel" }, React__default.Children.map(children, function (child, i) { return (React__default.createElement("div", { onKeyDown: onSlideKeyDown, style: { flex: "0 0 ".concat(slideWidth, "%"), width: "".concat(slideWidth, "%") }, className: "arc-Carousel-slide", key: "".concat(id, "-option-").concat(i), role: "group", "aria-roledescription": "slide" }, child)); })))),
+                React__default.createElement("div", { className: "arc-Carousel-slider", role: "region", "aria-roledescription": "carousel" }, React__default.Children.map(children, function (child, i) { return (React__default.createElement("div", { onKeyDown: onSlideKeyDown, style: { flex: "0 0 ".concat(slideWidth, "%"), width: "".concat(slideWidth, "%") }, className: classNames("arc-Carousel-slide", {
+                        "arc-Carousel-slide--fade": fade,
+                    }), key: "".concat(id, "-option-").concat(i), role: "group", "aria-roledescription": "slide" }, child)); })))),
         React__default.createElement("div", { className: "arc-Carousel-nav" },
             React__default.createElement("button", { "data-testid": "previous-button", ref: prevButtonRef, className: classNames("arc-Carousel-navButton", {
                     "arc-Carousel-navButton--hidden": !prevButtonEnabled,
@@ -8075,15 +8418,16 @@ var FormControl = function (_a) {
 
 /** Use `CheckboxIcon` to display a visual checkbox indicator that reflects a checked, unchecked, or indeterminate state. */
 var CheckboxIcon = function (_a) {
-    var id = _a.id, name = _a.name, checked = _a.checked, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, isDisabled = _a.isDisabled, isRequired = _a.isRequired, _c = _a.size, size = _c === void 0 ? "m" : _c, value = _a.value, error = _a.error, ariaDescribedBy = _a.ariaDescribedBy, onBlur = _a.onBlur, onChange = _a.onChange, props = __rest(_a, ["id", "name", "checked", "indeterminate", "isDisabled", "isRequired", "size", "value", "error", "ariaDescribedBy", "onBlur", "onChange"]);
+    var id = _a.id, name = _a.name, checked = _a.checked, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, isDisabled = _a.isDisabled, isRequired = _a.isRequired, _c = _a.size, size = _c === void 0 ? "m" : _c, value = _a.value, error = _a.error, ariaDescribedBy = _a.ariaDescribedBy, onBlur = _a.onBlur, onChange = _a.onChange, ref = _a.ref, props = __rest(_a, ["id", "name", "checked", "indeterminate", "isDisabled", "isRequired", "size", "value", "error", "ariaDescribedBy", "onBlur", "onChange", "ref"]);
     var requirementStatus = useContext(Context$2).requirementStatus;
     var internalRef = useRef(null);
     var surface = useContext(Context$3).surface;
+    var inputRef = (ref || internalRef);
     useEffect(function () {
-        if (internalRef.current) {
-            internalRef.current.indeterminate = indeterminate;
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
         }
-    }, [indeterminate, checked]);
+    }, [indeterminate, checked, inputRef]);
     var tickSize = {
         s: 14,
         m: 18,
@@ -8111,7 +8455,7 @@ var CheckboxIcon = function (_a) {
                 ? true
                 : indeterminate && checked
                     ? "mixed"
-                    : false, className: classNames("arc-CheckboxIcon-input"), disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: internalRef, required: isRequired, type: "checkbox", value: value }, checkedProps, props)),
+                    : false, className: classNames("arc-CheckboxIcon-input"), disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: inputRef, required: isRequired, type: "checkbox", value: value }, checkedProps, props)),
         React__default.createElement("span", { className: classNames("arc-CheckboxIcon-box") }, indeterminate ? (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none" },
             React__default.createElement("rect", { x: "4", y: "8", width: "7.51", height: "1", rx: "0.5", fill: "currentColor" }))) : (React__default.createElement(ThemeIcon, { icon: "checkboxChecked", size: tickSize[size] })))));
 };
@@ -8119,8 +8463,8 @@ var CheckboxIcon = function (_a) {
 /**
  *  Use `Checkbox` to allow users to select individual options.
  */
-var Checkbox = forwardRef(function (_a) {
-    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, _e = _a.hideLabel, hideLabel = _e === void 0 ? false : _e, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _f = _a.size, size = _f === void 0 ? "m" : _f, value = _a.value, _g = _a.checkboxAlignment, checkboxAlignment = _g === void 0 ? "center" : _g, _h = _a.indeterminate, indeterminate = _h === void 0 ? false : _h, _j = _a.isError, isError = _j === void 0 ? false : _j, _k = _a.isErrorAlert, isErrorAlert = _k === void 0 ? false : _k, props = __rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "hideLabel", "name", "onBlur", "onChange", "size", "value", "checkboxAlignment", "indeterminate", "isError", "isErrorAlert"]);
+var Checkbox = function (_a) {
+    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, _e = _a.hideLabel, hideLabel = _e === void 0 ? false : _e, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _f = _a.size, size = _f === void 0 ? "m" : _f, value = _a.value, _g = _a.checkboxAlignment, checkboxAlignment = _g === void 0 ? "center" : _g, _h = _a.indeterminate, indeterminate = _h === void 0 ? false : _h, _j = _a.isError, isError = _j === void 0 ? false : _j, _k = _a.isErrorAlert, isErrorAlert = _k === void 0 ? false : _k, ref = _a.ref, props = __rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "hideLabel", "name", "onBlur", "onChange", "size", "value", "checkboxAlignment", "indeterminate", "isError", "isErrorAlert", "ref"]);
     var requirementStatus = useContext(Context$2).requirementStatus;
     var surface = useContext(Context$3).surface;
     var idError = useAriaDescribedby({
@@ -8138,7 +8482,7 @@ var Checkbox = forwardRef(function (_a) {
             "arc-Checkbox--invalid": errorMessage || isError,
             "arc-Checkbox--small": size === "s",
             "arc-Checkbox--onDarkSurface": surface === "dark",
-        }) }, filterAttrs(props)),
+        }), ref: ref }, filterAttrs(props)),
         React__default.createElement("label", { id: idLabel, htmlFor: id, className: classNames("arc-Checkbox-label", {
                 "arc-Checkbox-label--top": checkboxAlignment === "top",
             }) },
@@ -8148,15 +8492,15 @@ var Checkbox = forwardRef(function (_a) {
             })), hideLabel ? (React__default.createElement(VisuallyHidden$2, null,
                 label,
                 !isRequired && requirementStatus !== "optional" ? (React__default.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
-                helper && (React__default.createElement("span", { className: "arc-Checkbox-helper" }, helper)))) : (React__default.createElement(React__default.Fragment, null,
+                helper && React__default.createElement("span", { className: "arc-Checkbox-helper" }, helper))) : (React__default.createElement(React__default.Fragment, null,
                 label,
                 !isRequired && requirementStatus !== "optional" ? (React__default.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
-                helper && (React__default.createElement("span", { className: "arc-Checkbox-helper" }, helper)))))),
+                helper && React__default.createElement("span", { className: "arc-Checkbox-helper" }, helper))))),
         errorMessage && (React__default.createElement("div", { id: idError, className: "arc-Checkbox-error", role: isErrorAlert ? "alert" : undefined },
             React__default.createElement("span", { className: "arc-Checkbox-error--icon", "aria-label": "Error. " },
                 React__default.createElement(ThemeIcon, { icon: "checkboxError" })),
             errorMessage))));
-});
+};
 
 /**
  * Use `Columns` to compose layouts on a 12-column grid. Place within `Section` components to align with any sibling `Grid` components.
@@ -8889,9 +9233,9 @@ var count = 0;
 function useId(deterministicId) {
   const [id, setId] = React.useState(useReactId());
   useLayoutEffect2(() => {
-    if (!deterministicId) setId((reactId) => reactId ?? String(count++));
+    setId((reactId) => reactId ?? String(count++));
   }, [deterministicId]);
-  return deterministicId || (id ? `radix-${id}` : "");
+  return (id ? `radix-${id}` : "");
 }
 
 /**
@@ -12743,8 +13087,8 @@ var reducer = function (initialOptions) {
 };
 
 /** Use `ComboBox` to provide a searchable dropdown list that allows users to select from or filter through multiple options. */
-var ComboBox = forwardRef(function (_a, ref) {
-    var name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, label = _a.label, helper = _a.helper, id = _a.id, initialOptions = _a.options, hideLabel = _a.hideLabel, isFluid = _a.isFluid, errorMessage = _a.errorMessage, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, listBoxAriaLabel = _a.listBoxAriaLabel, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.isMultiSelectable, isMultiSelectable = _d === void 0 ? false : _d, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.isAutocomplete, isAutocomplete = _g === void 0 ? false : _g, props = __rest(_a, ["name", "onBlur", "onFocus", "label", "helper", "id", "options", "hideLabel", "isFluid", "errorMessage", "disclosureTitle", "disclosureText", "onClickDisclosure", "listBoxAriaLabel", "defaultValue", "labelSize", "isMultiSelectable", "isDisabled", "isRequired", "isAutocomplete"]);
+var ComboBox = function (_a) {
+    var ref = _a.ref, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, label = _a.label, helper = _a.helper, id = _a.id, initialOptions = _a.options, hideLabel = _a.hideLabel, isFluid = _a.isFluid, errorMessage = _a.errorMessage, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, listBoxAriaLabel = _a.listBoxAriaLabel, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.isMultiSelectable, isMultiSelectable = _d === void 0 ? false : _d, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.isAutocomplete, isAutocomplete = _g === void 0 ? false : _g, props = __rest(_a, ["ref", "name", "onBlur", "onFocus", "label", "helper", "id", "options", "hideLabel", "isFluid", "errorMessage", "disclosureTitle", "disclosureText", "onClickDisclosure", "listBoxAriaLabel", "defaultValue", "labelSize", "isMultiSelectable", "isDisabled", "isRequired", "isAutocomplete"]);
     var listBoxId = useId$1();
     var listItemRefs = useRef([]);
     var containerRef = useRef(null);
@@ -12780,9 +13124,7 @@ var ComboBox = forwardRef(function (_a, ref) {
             var selectedOptionIsAboveOverFlow = listItemEl.offsetTop < listEl.scrollTop;
             if (selectedOptionIsBelowOverFlow) {
                 listEl.scrollTop =
-                    listItemEl.offsetTop +
-                        listItemEl.offsetHeight -
-                        listEl.offsetHeight;
+                    listItemEl.offsetTop + listItemEl.offsetHeight - listEl.offsetHeight;
             }
             if (selectedOptionIsAboveOverFlow) {
                 listEl.scrollTop = listItemEl.offsetTop;
@@ -12895,7 +13237,9 @@ var ComboBox = forwardRef(function (_a, ref) {
                     React__default.createElement(Content2$4, { align: "start", sideOffset: 5, onInteractOutside: onInteractOutside, onOpenAutoFocus: onOpenAutoFocus },
                         React__default.createElement("div", { className: "arc-ComboBox-listboxContainer" },
                             React__default.createElement(Box, { elevationLevel: "1" },
-                                React__default.createElement("ul", { ref: setScrollPosition, id: listBoxId, className: "arc-ComboBox-list", role: "listbox", "aria-label": listBoxAriaLabel, "aria-multiselectable": isMultiSelectable }, options.length ? (options.map(function (option, i) { return (React__default.createElement("li", { id: "".concat(listBoxId, "-").concat(i), ref: function (el) { return (listItemRefs.current[i] = el); }, key: option, className: classNames("arc-ComboBox-listItem", {
+                                React__default.createElement("ul", { ref: setScrollPosition, id: listBoxId, className: "arc-ComboBox-list", role: "listbox", "aria-label": listBoxAriaLabel, "aria-multiselectable": isMultiSelectable }, options.length ? (options.map(function (option, i) { return (React__default.createElement("li", { id: "".concat(listBoxId, "-").concat(i), ref: function (el) {
+                                        listItemRefs.current[i] = el;
+                                    }, key: option, className: classNames("arc-ComboBox-listItem", {
                                         "arc-ComboBox-listItem--highlighted": i === highlightedOptionIndex,
                                     }), onMouseDown: onItemClick(option), role: "option", "aria-selected": isSelected(option, selectedOptions) },
                                     React__default.createElement("div", { className: "arc-ComboBox-listItemText" }, option),
@@ -12903,7 +13247,7 @@ var ComboBox = forwardRef(function (_a, ref) {
                                             "arc-ComboBox-listItemIcon--visible": isSelected(option, selectedOptions),
                                         }) },
                                         React__default.createElement(ThemeIcon, { size: 20, icon: "selectIndicator" })))); })) : (React__default.createElement("li", { className: "arc-ComboBox-listItem", role: "option", "aria-selected": false, "aria-disabled": true }, "No matches found")))))))))));
-});
+};
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -13870,11 +14214,12 @@ var ContentSwitcher = function (_a) {
         React__default.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, __assign({ className: "arc-ContentSwitcher-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode, value: value }, filterAttrs(props)), children)));
 };
 
-var ContentSwitcherTab = forwardRef(function (_a, ref) {
-    var label = _a.label, value = _a.value, onClick = _a.onClick, onFocus = _a.onFocus, props = __rest(_a, ["label", "value", "onClick", "onFocus"]);
-    return (React__default.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, __assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick, onFocus: onFocus }, filterAttrs(props)),
-        React__default.createElement(Text, { size: "m" }, label)));
-});
+var ContentSwitcherTab = function (_a) {
+    var label = _a.label, value = _a.value, onClick = _a.onClick, onFocus = _a.onFocus, ref = _a.ref, props = __rest(_a, ["label", "value", "onClick", "onFocus", "ref"]);
+    return (React__default.createElement(Surface, { isTransparent: true },
+        React__default.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, __assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick, onFocus: onFocus }, filterAttrs(props)),
+            React__default.createElement(Text, { size: "m" }, label))));
+};
 
 var ContentSwitcherContent = function (_a) {
     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"]);
@@ -13889,13 +14234,6 @@ var ContentSwitcherList = function (_a) {
     var _d = useState(0), contentSwitcherListWidth = _d[0], setContentSwitcherListWidth = _d[1];
     var tabRefs = useRef([]);
     var listRef = useRef(null);
-    var checkOverflow = function () {
-        if (listRef.current) {
-            setRightOverflow(listRef.current.scrollLeft + listRef.current.clientWidth <
-                listRef.current.scrollWidth - 1);
-            setLeftOverflow(listRef.current.scrollLeft > 0);
-        }
-    };
     var scrollTabIntoView = function (tabRef) {
         if (tabRef.current && listRef.current) {
             var scrollLeft = tabRef.current.offsetLeft -
@@ -13914,6 +14252,13 @@ var ContentSwitcherList = function (_a) {
     }, 100);
     useEffect(function () {
         var list = listRef.current;
+        var checkOverflow = function () {
+            if (listRef.current) {
+                setRightOverflow(listRef.current.scrollLeft + listRef.current.clientWidth <
+                    listRef.current.scrollWidth - 1);
+                setLeftOverflow(listRef.current.scrollLeft > 0);
+            }
+        };
         var updateLayout = function () {
             checkOverflow();
             handleResize();
@@ -13931,7 +14276,7 @@ var ContentSwitcherList = function (_a) {
             window.removeEventListener("resize", updateLayout);
             handleResize.cancel();
         };
-    }, [children, checkOverflow, handleResize]);
+    }, [children, handleResize]);
     return (React__default.createElement("span", { className: classNames("arc-ContentSwitcherList-wrapper", {
             "arc-ContentSwitcherList-wrapper--isInset": isInset,
         }), tabIndex: -1 },
@@ -13940,14 +14285,23 @@ var ContentSwitcherList = function (_a) {
                 "arc-ContentSwitcherList--isJustified": isJustified,
             }), ref: listRef, "aria-label": ariaLabel }, filterAttrs(props)),
             React__default.createElement("div", { className: "arc-ContentSwitcherList-inner" }, React__default.Children.map(children, function (child, index) {
-                if (tabRefs) {
+                if (!React__default.isValidElement(child)) {
+                    return null;
+                }
+                if (tabRefs.current[index] !== null) {
                     return React__default.cloneElement(child, {
-                        ref: function (el) { return (tabRefs.current[index] = el); },
+                        ref: function (el) {
+                            tabRefs.current[index] = el;
+                        },
                         onClick: function () {
-                            return scrollTabIntoView({ current: tabRefs.current[index] });
+                            var el = tabRefs.current[index];
+                            if (el)
+                                scrollTabIntoView({ current: el });
                         },
                         onFocus: function () {
-                            return scrollTabIntoView({ current: tabRefs.current[index] });
+                            var el = tabRefs.current[index];
+                            if (el)
+                                scrollTabIntoView({ current: el });
                         },
                     });
                 }
@@ -16723,9 +17077,9 @@ var TrailingSlot = function (_a) {
 };
 
 /** Use `TextInput` as a single-line field that allows users to enter short text, such as names, email, search queries or passwords. */
-var TextInputComponent = forwardRef(function (_a, ref) {
+var TextInputComponent = function (_a) {
     var _b;
-    var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _j = _a.size, size = _j === void 0 ? "m" : _j, leadingSlot = _a.leadingSlot, trailingSlot = _a.trailingSlot, _k = _a.inputAlignment, inputAlignment = _k === void 0 ? "left" : _k, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, isErrorAlert = _a.isErrorAlert, prefix = _a.prefix, suffix = _a.suffix, clearButton = _a.clearButton, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "maxLength", "minLength", "name", "onBlur", "onFocus", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "size", "leadingSlot", "trailingSlot", "inputAlignment", "width", "autoComplete", "isLoading", "isErrorAlert", "prefix", "suffix", "clearButton"]);
+    var ref = _a.ref, _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, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _j = _a.size, size = _j === void 0 ? "m" : _j, leadingSlot = _a.leadingSlot, trailingSlot = _a.trailingSlot, _k = _a.inputAlignment, inputAlignment = _k === void 0 ? "left" : _k, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, isErrorAlert = _a.isErrorAlert, prefix = _a.prefix, suffix = _a.suffix, clearButton = _a.clearButton, props = __rest(_a, ["ref", "defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "maxLength", "minLength", "name", "onBlur", "onFocus", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "size", "leadingSlot", "trailingSlot", "inputAlignment", "width", "autoComplete", "isLoading", "isErrorAlert", "prefix", "suffix", "clearButton"]);
     var _l = useState(false), showPasswordToggle = _l[0], setShowPasswordToggle = _l[1];
     var inferredInputProps = useNumericInput({
         inputMode: inputMode,
@@ -16764,12 +17118,12 @@ var TextInputComponent = forwardRef(function (_a, ref) {
                     isLoading ||
                     (clearButton === null || clearButton === void 0 ? void 0 : clearButton.onClick)) && (React__default.createElement(TrailingSlot, { showPassword: showPassword, isReadOnly: isReadOnly, isLoading: isLoading, clearButton: clearButton, trailingSlot: trailingSlot, isPasswordVisible: showPasswordToggle, onTogglePassword: function () { return setShowPasswordToggle(function (prev) { return !prev; }); }, size: size, isDisabled: isDisabled })),
                 suffix && (React__default.createElement("span", { className: "arc-TextInput-suffix arc-TextInput-affixes", "aria-hidden": true }, suffix))))));
-});
+};
 /**
  * Use `TextInput` to allow users to enter short form text.
  */
-var TextInput = forwardRef(function (props, ref) { return React__default.createElement(TextInputComponent, __assign({ ref: ref }, props)); });
-var TextInputWithPlaceHolder = forwardRef(function (props, ref) { return React__default.createElement(TextInputComponent, __assign({ ref: ref }, props)); });
+var TextInput = function (props) { return (React__default.createElement(TextInputComponent, __assign({}, props))); };
+var TextInputWithPlaceHolder = function (props) { return React__default.createElement(TextInputComponent, __assign({}, props)); };
 
 var formatDate = function (value) {
     return format(value, DATE_FORMAT);
@@ -16904,8 +17258,8 @@ function validateRangeOnBlur(_a) {
 /**
  * Use `DatePicker` to clearly present available dates and allow users to choose a way to enter information.
  */
-var DatePicker = forwardRef(function (_a, ref) {
-    var errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, label = _a.label, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, _b = _a.size, size = _b === void 0 ? "m" : _b, _c = _a.value, value = _c === void 0 ? "" : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, onClickDisclosure = _a.onClickDisclosure, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, type = _a.type, _d = _a.isFluid, isFluid = _d === void 0 ? false : _d, _e = _a.selectionType, selectionType = _e === void 0 ? "single" : _e, disabledDates = _a.disabledDates, minDate = _a.minDate, maxDate = _a.maxDate, props = __rest(_a, ["errorMessage", "helper", "id", "label", "isDisabled", "isReadOnly", "isRequired", "size", "value", "name", "onBlur", "onChange", "onDateSelect", "onRangeSelect", "onClickDisclosure", "disclosureTitle", "disclosureText", "type", "isFluid", "selectionType", "disabledDates", "minDate", "maxDate"]);
+var DatePicker = function (_a) {
+    var errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, label = _a.label, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, _b = _a.size, size = _b === void 0 ? "m" : _b, _c = _a.value, value = _c === void 0 ? "" : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, onClickDisclosure = _a.onClickDisclosure, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, type = _a.type, _d = _a.isFluid, isFluid = _d === void 0 ? false : _d, _e = _a.selectionType, selectionType = _e === void 0 ? "single" : _e, disabledDates = _a.disabledDates, minDate = _a.minDate, maxDate = _a.maxDate, ref = _a.ref, props = __rest(_a, ["errorMessage", "helper", "id", "label", "isDisabled", "isReadOnly", "isRequired", "size", "value", "name", "onBlur", "onChange", "onDateSelect", "onRangeSelect", "onClickDisclosure", "disclosureTitle", "disclosureText", "type", "isFluid", "selectionType", "disabledDates", "minDate", "maxDate", "ref"]);
     var _f = useThemeElement(), themeElement = _f[0], setThemeElement = _f[1];
     var _g = useState("Choose date"), ariaLabel = _g[0], setAriaLabel = _g[1];
     var _h = useState(false), showCalendar = _h[0], setShowCalendar = _h[1];
@@ -17049,7 +17403,7 @@ var DatePicker = forwardRef(function (_a, ref) {
             React__default.createElement(Portal$5, { container: themeElement },
                 React__default.createElement(Content2$4, { align: "start", "aria-modal": "true", "aria-label": "Choose Date", className: "arc-DatePicker-modal", onOpenAutoFocus: handleAutoFocus, onCloseAutoFocus: handleCalendarClose },
                     React__default.createElement(Calendar, { autoFocusOnMount: true, type: type, onCancelClick: onCancelClick, selectionType: selectionType, selectedDate: convertDateStringToDate(value), selectedRange: convertRangeStringToDates(value), disabledDates: disabledDates, minDate: minDate, maxDate: maxDate, onDateSelect: handleDateSelect, onRangeSelect: handleRangeSelect }))))));
-});
+};
 
 var lowerCaseDateFormat = DATE_FORMAT.toLowerCase();
 var DatePickerRange = function (_a) {
@@ -17079,7 +17433,7 @@ var DatePickerRange = function (_a) {
         if (inputEnd.value !== undefined && inputEnd.value !== endValue) {
             setEndValue(inputEnd.value);
         }
-    }, [inputStart.value, inputEnd.value]);
+    }, [inputStart.value, inputEnd.value, endValue, startValue]);
     var handleIconClick = function (_a) {
         var ref = _a.ref, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, input = _a.input;
         if (ref &&
@@ -17614,6 +17968,17 @@ var Drawer = function (_a) {
         var newHeight = dragRef.current.startH - dragRef.current.deltaY;
         setDrawerHeight(Math.round(newHeight));
     };
+    var onHandleDown = function (e) {
+        if (!contentRef.current)
+            return;
+        dragRef.current.active = true;
+        // record where the pointer was when dragging started
+        dragRef.current.startY = e.clientY;
+        // record inital height of drawer
+        dragRef.current.startH = contentRef.current.clientHeight;
+        // keep moving drawer even if cursor has left pill
+        e.target.setPointerCapture(e.pointerId);
+    };
     var resolveToPx = function (input) {
         // if already a number, assume px
         if (typeof input === "number")
@@ -17630,19 +17995,24 @@ var Drawer = function (_a) {
         var numericValue = Number(str);
         return Number.isFinite(numericValue) ? numericValue : undefined;
     };
-    var onHandleUpCore = function (e) {
-        if (!dragRef.current.active || !contentRef.current)
+    var onHandleUpCore = function (e, keyboardDeltaY) {
+        if (!contentRef.current)
             return;
+        // if the user scrolls down
         if (dragDownToDismiss && contentRef.current.clientHeight < 100) {
             dragRef.current.active = false;
             dragRef.current.deltaY = 0;
-            e.currentTarget.releasePointerCapture(e.pointerId);
+            if (e instanceof PointerEvent && (e === null || e === void 0 ? void 0 : e.currentTarget)) {
+                e.currentTarget.releasePointerCapture(e.pointerId);
+            }
             setDrawerHeight(undefined);
             onRequestClose();
             return;
         }
         dragRef.current.active = false;
-        e.currentTarget.releasePointerCapture(e.pointerId);
+        if (e instanceof PointerEvent && (e === null || e === void 0 ? void 0 : e.currentTarget)) {
+            e.currentTarget.releasePointerCapture(e.pointerId);
+        }
         var currentHeight = contentRef.current.clientHeight;
         // turn all snapPoints into px values. Order the values.
         var snapsPx = (normalisedSnapPoints !== null && normalisedSnapPoints !== void 0 ? normalisedSnapPoints : [])
@@ -17650,9 +18020,9 @@ var Drawer = function (_a) {
             .filter(function (value) { return value !== undefined; }) // remove undefined values
             .sort(function (a, b) { return a - b; });
         var targetSnap = undefined;
+        var deltaY = Math.sign(dragRef.current.deltaY);
         if (snapBehaviour === "next") {
-            var deltaY = Math.sign(dragRef.current.deltaY);
-            if (deltaY === -1) {
+            if (deltaY <= -1) {
                 // User scrolled up
                 for (var i = 0; i < snapsPx.length; i++) {
                     if (snapsPx[i] > currentHeight) {
@@ -17664,7 +18034,7 @@ var Drawer = function (_a) {
                     }
                 }
             }
-            else if (deltaY === 1) {
+            else if (deltaY >= 1) {
                 // User scrolled down
                 for (var i = 0; i < snapsPx.length; i++) {
                     if (snapsPx[i] < currentHeight) {
@@ -17705,17 +18075,6 @@ var Drawer = function (_a) {
         }
         setDrawerHeight(targetSnap);
     };
-    var onHandleDown = function (e) {
-        if (!contentRef.current)
-            return;
-        dragRef.current.active = true;
-        // record where the pointer was when dragging started
-        dragRef.current.startY = e.clientY;
-        // record inital height of drawer
-        dragRef.current.startH = contentRef.current.clientHeight;
-        // keep moving drawer even if cursor has left pill
-        e.target.setPointerCapture(e.pointerId);
-    };
     return (React__default.createElement("div", { ref: setThemeElement },
         React__default.createElement(Root$1, { open: isOpen },
             React__default.createElement(Portal$1, { container: themeElement },
@@ -17732,16 +18091,16 @@ var Drawer = function (_a) {
                                 React__default.createElement("button", { "aria-label": "close", onClick: onRequestClose, className: "arc-Drawer-closeButton" },
                                     React__default.createElement(ThemeIcon, { size: 32, icon: "drawerClose" })),
                                 draggable && position === "bottom" && (React__default.createElement("div", { className: "arc-Drawer-dragHandle", onPointerDown: onHandleDown, onPointerUp: onHandleUp, onPointerMove: onHandleMove, onClick: onHandleClick, role: "separator", "aria-label": "Drag to resize the drawer" },
-                                    React__default.createElement("div", { className: "arc-Drawer-dragHandlePill", "data-testid": "arc-Drawer-dragHandlePill" })))),
+                                    React__default.createElement("div", { className: "arc-Drawer-dragHandlePill", tabIndex: -1, "data-testid": "arc-Drawer-dragHandlePill" })))),
                             children)))))));
 };
 
 /**
  * Use `Rule` to display a horizontal or vertical rule.
  */
-var Rule = function (_a, props) {
+var Rule = function (_a) {
     var _b;
-    var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
+    var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c, props = __rest(_a, ["orientation"]);
     var surface = useContext(Context$3).surface;
     return (React__default.createElement("hr", __assign({ className: classNames((_b = {
                 "arc-Rule": true
@@ -17752,24 +18111,27 @@ var Rule = function (_a, props) {
 };
 
 var DrawerHeader = function (_a) {
-    var title = _a.title, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, isResponsive = _a.isResponsive, props = __rest(_a, ["title", "isFixed", "isResponsive"]);
+    var title = _a.title, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, isResponsive = _a.isResponsive, children = _a.children, _c = _a.isFullBleed, isFullBleed = _c === void 0 ? false : _c, _d = _a.titleWordWrap, titleWordWrap = _d === void 0 ? false : _d, props = __rest(_a, ["title", "isFixed", "isResponsive", "children", "isFullBleed", "titleWordWrap"]);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", __assign({ className: classNames("arc-DrawerHeader", {
                 "arc-DrawerHeader--isFixed": isFixed,
+                "arc-DrawerHeader--isFullBleed": isFullBleed,
             }) }, filterAttrs(props)),
             React__default.createElement("div", { className: "arc-DrawerHeader-content" },
-                React__default.createElement("div", { className: "arc-DrawerHeader-titleContainer" },
+                title && !children && (React__default.createElement("div", { className: "arc-DrawerHeader-titleContainer" },
                     React__default.createElement(Title, { asChild: true },
-                        React__default.createElement(Heading, { isResponsive: isResponsive, size: "m" }, title)))),
+                        React__default.createElement(Heading, { isResponsive: isResponsive, size: "m", isWordWrap: titleWordWrap }, title)))),
+                children && !title && children),
             isFixed && (React__default.createElement("div", { className: "arc-DrawerHeader-divider" },
                 React__default.createElement(Rule, null))))));
 };
 
 var DrawerFooter = function (_a) {
-    var isFixed = _a.isFixed, children = _a.children;
+    var isFixed = _a.isFixed, _b = _a.isFullBleed, isFullBleed = _b === void 0 ? false : _b, children = _a.children;
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { className: classNames("arc-DrawerFooter", {
                 "arc-DrawerFooter--isFixed": isFixed,
+                "arc-DrawerFooter--isFullBleed": isFullBleed,
             }) },
             isFixed && (React__default.createElement("div", { className: "arc-DrawerFooter-divider" },
                 React__default.createElement(Rule, null))),
@@ -17898,13 +18260,13 @@ var FilterItem = function (_a) {
  *  Use `GhostedHeroBanner` to grab attention and convey the main message or purpose of a webpage
  */
 var GhostedHeroBanner = function (_a) {
-    var heading = _a.heading, headingLevel = _a.headingLevel, label = _a.label, text = _a.text, img = _a.img, children = _a.children, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, props = __rest(_a, ["heading", "headingLevel", "label", "text", "img", "children", "fontStyle"]);
+    var heading = _a.heading, headingLevel = _a.headingLevel, label = _a.label, text = _a.text, img = _a.img, children = _a.children, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, _c = _a.headingWordWrap, headingWordWrap = _c === void 0 ? false : _c, props = __rest(_a, ["heading", "headingLevel", "label", "text", "img", "children", "fontStyle", "headingWordWrap"]);
     return (React__default.createElement("div", __assign({ className: "arc-GhostedHeroBanner" }, filterAttrs(props)),
         React__default.createElement("div", { className: "arc-GhostedHeroBanner-content" },
             label && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(Heading, { fontStyle: "overline" }, label),
                 React__default.createElement(VerticalSpace, { size: "8" }))),
-            React__default.createElement(Heading, { level: headingLevel, size: fontStyle === "default" ? "xl" : "xxl", fontStyle: fontStyle }, heading),
+            React__default.createElement(Heading, { level: headingLevel, size: fontStyle === "default" ? "xl" : "xxl", fontStyle: fontStyle, isWordWrap: headingWordWrap }, heading),
             text && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(VerticalSpace, { size: "16" }),
                 React__default.createElement("span", { className: "arc-TemplateBanner-text" }, text))),
@@ -18105,11 +18467,11 @@ var GroupItem = function (_a) {
 
 /** Use `HeroBanner` to promote key content or products with bold visuals and messaging. */
 var HeroBanner = 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, minHeight = _a.minHeight, _c = _a.isReversed, isReversed = _c === void 0 ? false : _c, _d = _a.isElevated, isElevated = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.extendBeyondContainer, extendBeyondContainer = _f === void 0 ? false : _f, _g = _a.type, type = _g === void 0 ? "light" : _g, _h = _a.fontStyle, fontStyle = _h === void 0 ? "default" : _h, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "extendBeyondContainer", "type", "fontStyle"]);
+    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, minHeight = _a.minHeight, _c = _a.isReversed, isReversed = _c === void 0 ? false : _c, _d = _a.isElevated, isElevated = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.extendBeyondContainer, extendBeyondContainer = _f === void 0 ? false : _f, _g = _a.type, type = _g === void 0 ? "light" : _g, _h = _a.fontStyle, fontStyle = _h === void 0 ? "default" : _h, _j = _a.headingWordWrap, headingWordWrap = _j === void 0 ? false : _j, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "extendBeyondContainer", "type", "fontStyle", "headingWordWrap"]);
     return (React__default.createElement(ConditionalWrapper, { condition: extendBeyondContainer, wrapper: function (children) { return (React__default.createElement("div", { className: classNames({
                 "arc-HeroBanner--expanded": extendBeyondContainer,
             }) }, children)); } },
-        React__default.createElement(TemplateBanner, __assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: fontStyle === "default" ? "xl" : "xxl", fontStyle: fontStyle, alignment: "center" }, filterAttrs(props)), children)));
+        React__default.createElement(TemplateBanner, __assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: fontStyle === "default" ? "xl" : "xxl", fontStyle: fontStyle, alignment: "center", headingWordWrap: headingWordWrap }, filterAttrs(props)), children)));
 };
 
 /**
@@ -18147,8 +18509,8 @@ const ArcIconWarn =
 /**
  * Use `HeroButton` as the most prominent call-to-action. It should be used sparingly at the most important parts of a user journey only.
  */
-var HeroButton = forwardRef(function (_a, ref) {
-    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, ariaLabel = _a.ariaLabel, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, props = __rest(_a, ["label", "buttonStyle", "icon", "ariaLabel", "isLoading", "onClick", "href", "id", "rel", "target", "type", "form"]);
+var HeroButton = function (_a) {
+    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, ariaLabel = _a.ariaLabel, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, ref = _a.ref, props = __rest(_a, ["label", "buttonStyle", "icon", "ariaLabel", "isLoading", "onClick", "href", "id", "rel", "target", "type", "form", "ref"]);
     var surface = useContext(Context$3).surface;
     var HeroButtonClasses = classNames("arc-HeroButton", ["arc-HeroButton--".concat(camelcase(buttonStyle))], {
         "arc-HeroButton--onDarkSurface": surface === "dark",
@@ -18184,7 +18546,7 @@ var HeroButton = forwardRef(function (_a, ref) {
                         : HeroButtonIcons[icon] }))),
             isLoading && (React__default.createElement("span", { className: "arc-HeroButton-icon" },
                 React__default.createElement(Spinner, { size: "xxl" }))))));
-});
+};
 
 /** Use `Hidden` to hide it's children at specific breakpoints */
 var Hidden = function (_a) {
@@ -18225,8 +18587,8 @@ var CardFooter = function (_a) {
 
 /** Use `CardHeading` internally within card components to display a title, icon, or leading content at the top of a card. */
 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 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d;
-    return (React__default.createElement(Heading, { level: headingLevel, size: size, isWordWrap: false }, href ? (React__default.createElement("a", __assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterAttrs(linkData)), heading)) : (heading)));
+    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 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, _e = _a.headingWordWrap, headingWordWrap = _e === void 0 ? false : _e;
+    return (React__default.createElement(Heading, { level: headingLevel, size: size, isWordWrap: headingWordWrap }, href ? (React__default.createElement("a", __assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterAttrs(linkData)), heading)) : (heading)));
 };
 
 /** Use `HorizontalCard` to display card content in a horizontal layout. */
@@ -18250,8 +18612,8 @@ var HorizontalCard = function (_a) {
 
 /** Use `ImpactCard` for important content that needs additional hierarchy and prominence.  */
 var ImpactCard = function (_a) {
-    var url = _a.url, onClick = _a.onClick, heading = _a.heading, img = _a.img, label = _a.label, minHeight = _a.minHeight, _b = _a.headingSize, headingSize = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.pathway, pathway = _d === void 0 ? "light" : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.buttonIcon, buttonIcon = _f === void 0 ? "arrow" : _f, _g = _a.labelLevel, labelLevel = _g === void 0 ? "3" : _g, props = __rest(_a, ["url", "onClick", "heading", "img", "label", "minHeight", "headingSize", "linkData", "pathway", "headingLevel", "buttonIcon", "labelLevel"]);
-    var _h = useState(false), showHoverState = _h[0], setShowHoverState = _h[1];
+    var url = _a.url, onClick = _a.onClick, heading = _a.heading, img = _a.img, label = _a.label, minHeight = _a.minHeight, _b = _a.headingSize, headingSize = _b === void 0 ? "m" : _b, _c = _a.headingWordWrap, headingWordWrap = _c === void 0 ? false : _c, _d = _a.linkData, linkData = _d === void 0 ? {} : _d, _e = _a.pathway, pathway = _e === void 0 ? "light" : _e, _f = _a.headingLevel, headingLevel = _f === void 0 ? "2" : _f, _g = _a.buttonIcon, buttonIcon = _g === void 0 ? "arrow" : _g, _h = _a.labelLevel, labelLevel = _h === void 0 ? "3" : _h, props = __rest(_a, ["url", "onClick", "heading", "img", "label", "minHeight", "headingSize", "headingWordWrap", "linkData", "pathway", "headingLevel", "buttonIcon", "labelLevel"]);
+    var _j = useState(false), showHoverState = _j[0], setShowHoverState = _j[1];
     var surface = useContext(Context$3).surface;
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     var isDarkPathway = pathway === "dark";
@@ -18267,7 +18629,7 @@ var ImpactCard = function (_a) {
             label && (React__default.createElement("div", { className: "arc-ImpactCard-label" },
                 React__default.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label),
                 React__default.createElement(VerticalSpace, { size: "16" }))),
-            React__default.createElement(CardHeading, { heading: heading, size: headingSize, headingLevel: headingLevel, linkData: linkData, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
+            React__default.createElement(CardHeading, { heading: heading, size: headingSize, headingLevel: headingLevel, linkData: linkData, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false), headingWordWrap: headingWordWrap })),
         React__default.createElement(CardFooter, { buttonIcon: buttonIcon, showButton: true, isDarkPathway: isDarkPathway, isHovered: showHoverState })));
 };
 
@@ -18289,7 +18651,7 @@ const BtIconArrowRightFill =
 
 /** Use `InformationCard` for flexibility and the ability to focus and highlight product specific content. */
 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, badges = _a.badges, icon = _a.icon, minHeight = _a.minHeight, minHeights = _a.minHeights, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "badges", "icon", "minHeight", "minHeights", "headingLevel", "labelLevel"]);
+    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, badges = _a.badges, icon = _a.icon, minHeight = _a.minHeight, minHeights = _a.minHeights, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, headingWordWrap = _a.headingWordWrap, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "badges", "icon", "minHeight", "minHeights", "headingLevel", "labelLevel", "headingWordWrap"]);
     var surface = useContext(Context$3).surface;
     var _d = useState(false), showHoverState = _d[0], setShowHoverState = _d[1];
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
@@ -18311,7 +18673,7 @@ var InformationCard = function (_a) {
             window.removeEventListener("resize", checkMinHeight);
             checkMinHeight.cancel();
         };
-    }, [minHeights, ArcBreakpoints]);
+    }, [minHeights, checkMinHeight]);
     return (React__default.createElement("div", __assign({ style: { minHeight: minHeight ? minHeight : minimumHeight }, className: classNames("arc-InformationCard", {
             "arc-InformationCard--isALink": cardUrl,
             "arc-InformationCard--outlined": cardUrl && showHoverState,
@@ -18328,7 +18690,7 @@ var InformationCard = function (_a) {
                     label && (React__default.createElement(React__default.Fragment, null,
                         React__default.createElement("div", { className: "arc-InformationCard-label" },
                             React__default.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label)))),
-                    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(CardHeading, { heading: heading, headingLevel: headingLevel, href: cardUrl, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false), headingWordWrap: headingWordWrap }),
                     text && React__default.createElement(Text, null, text)),
                 (button || badges || footerLogo) && (React__default.createElement("div", { className: "arc-InformationCard-footer" },
                     badges && (React__default.createElement(React__default.Fragment, null,
@@ -18369,10 +18731,10 @@ var VideoPlayer$1 = React__default.lazy(function () {
  * Use `MediaCard` to contain content and an image about a single subject.
  */
 var MediaCard = function (_a) {
-    var media = _a.media, url = _a.url, onClick = _a.onClick, heading = _a.heading, label = _a.label, _b = _a.labelLevel, labelLevel = _b === void 0 ? "3" : _b, text = _a.text, metaText = _a.metaText, minHeight = _a.minHeight, _c = _a.buttonIcon, buttonIcon = _c === void 0 ? "arrow" : _c, _d = _a.isContained, isContained = _d === void 0 ? true : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, props = __rest(_a, ["media", "url", "onClick", "heading", "label", "labelLevel", "text", "metaText", "minHeight", "buttonIcon", "isContained", "headingLevel"]);
+    var media = _a.media, url = _a.url, onClick = _a.onClick, heading = _a.heading, label = _a.label, _b = _a.labelLevel, labelLevel = _b === void 0 ? "3" : _b, text = _a.text, metaText = _a.metaText, minHeight = _a.minHeight, _c = _a.buttonIcon, buttonIcon = _c === void 0 ? "arrow" : _c, _d = _a.isContained, isContained = _d === void 0 ? true : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.headingWordWrap, headingWordWrap = _f === void 0 ? false : _f, props = __rest(_a, ["media", "url", "onClick", "heading", "label", "labelLevel", "text", "metaText", "minHeight", "buttonIcon", "isContained", "headingLevel", "headingWordWrap"]);
     var surface = useContext(Context$3).surface;
-    var _f = useState(false), isClient = _f[0], setIsClient = _f[1];
-    var _g = useState(false), showHoverState = _g[0], setShowHoverState = _g[1];
+    var _g = useState(false), isClient = _g[0], setIsClient = _g[1];
+    var _h = useState(false), showHoverState = _h[0], setShowHoverState = _h[1];
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     useEffect(function () {
         setIsClient(true);
@@ -18391,7 +18753,7 @@ var MediaCard = function (_a) {
                 label && (React__default.createElement("div", { className: "arc-MediaCard-label" },
                     React__default.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label),
                     React__default.createElement(VerticalSpace, { size: "16" }))),
-                React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: media.type !== "video" ? url : undefined, onClick: media.type !== "video" ? onClick : undefined, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
+                React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: media.type !== "video" ? url : undefined, onClick: media.type !== "video" ? onClick : undefined, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false), headingWordWrap: headingWordWrap }),
                 React__default.createElement("div", { className: "arc-MediaCard-textContainer" }, text && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement(VerticalSpace, { size: "16" }),
                     React__default.createElement(Text, null, text),
@@ -19839,7 +20201,8 @@ var MenuItem = function (_a) {
 /**
  * Visual separator used to divide groups of menu items.
  */
-var MenuSeparator = function (props) {
+var MenuSeparator = function (_a) {
+    var props = __rest(_a, []);
     return (React__default.createElement(Separator2, __assign({ className: "arc-MenuSeparator" }, filterAttrs(props)),
         React__default.createElement(Rule, null)));
 };
@@ -19847,8 +20210,8 @@ var MenuSeparator = function (props) {
 /**
  * The component that pops out when the dropdown menu is open.
  */
-var MenuContent = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, _b = _a.align, align = _b === void 0 ? "start" : _b, alignOffset = _a.alignOffset, side = _a.side, initalTitle = _a.initalTitle, isFluidToViewport = _a.isFluidToViewport, props = __rest(_a, ["children", "width", "minWidth", "maxWidth", "align", "alignOffset", "side", "initalTitle", "isFluidToViewport"]);
+var MenuContent = function (_a) {
+    var ref = _a.ref, children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, _b = _a.align, align = _b === void 0 ? "start" : _b, alignOffset = _a.alignOffset, side = _a.side, initalTitle = _a.initalTitle, isFluidToViewport = _a.isFluidToViewport, props = __rest(_a, ["ref", "children", "width", "minWidth", "maxWidth", "align", "alignOffset", "side", "initalTitle", "isFluidToViewport"]);
     var _c = useMenuContext(), isMobileMenu = _c.isMobileMenu, stack = _c.stack, goBack = _c.goBack, defaultWidth = _c.defaultWidth, reset = _c.reset;
     if (!isMobileMenu) {
         return (React__default.createElement(Content2, __assign({ ref: ref, style: { width: width !== null && width !== void 0 ? width : defaultWidth, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent", sideOffset: 12, loop: true, collisionPadding: 0, forceMount: true, align: align, alignOffset: alignOffset, side: side }, filterAttrs(props)),
@@ -19869,7 +20232,7 @@ var MenuContent = React__default.forwardRef(function (_a, ref) {
             React__default.createElement(MenuItem, { onClick: goBack, leadingIcon: BtIconChevronLeftMid }, prevTitle),
             React__default.createElement(MenuSeparator, null))),
         React__default.createElement("div", { key: stack.length, className: "arc-MenuContent-content arc-MenuContent-fade" }, active)));
-});
+};
 
 /**
  * Displays footer content at the bottom of the menu.
@@ -19994,21 +20357,21 @@ var MenuItemMultiLevel = function (_a) {
     if (!trigger || !pairedContent) {
         console.warn("MenuItemMultiLevel requires both a Trigger and Portal");
     }
-    // Inject content into the trigger,  skip rendering the portal in mobile
+    // Inject content into the trigger, skip rendering the portal in mobile
     return React__default.cloneElement(trigger, { pairedContent: pairedContent });
 };
 
 /**
  * The multi-level menu content that pops out when a menu item with children is hovered or clicked.
  */
-var MenuItemMultiLevelContent = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, alignOffset = _a.alignOffset, props = __rest(_a, ["children", "width", "minWidth", "maxWidth", "alignOffset"]);
+var MenuItemMultiLevelContent = function (_a) {
+    var ref = _a.ref, children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, alignOffset = _a.alignOffset, props = __rest(_a, ["ref", "children", "width", "minWidth", "maxWidth", "alignOffset"]);
     var _b = useMenuContext(), isMobileMenu = _b.isMobileMenu, defaultWidth = _b.defaultWidth;
     if (isMobileMenu) {
         return React__default.createElement(React__default.Fragment, null, children);
     }
     return (React__default.createElement(SubContent2, __assign({ ref: ref, style: { width: width !== null && width !== void 0 ? width : defaultWidth, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent", sideOffset: 24, collisionPadding: 12, avoidCollisions: true, alignOffset: alignOffset }, filterAttrs(props)), children));
-});
+};
 MenuItemMultiLevelContent.displayName = "MenuItemMultiLevelContent";
 
 /**
@@ -20065,7 +20428,7 @@ var MenuTrigger = function (_a) {
 /** Use `Modal` to display information that needs immediate action from a user. */
 var Modal = function (_a) {
     var _b;
-    var title = _a.title, description = _a.description, ariaDescribedBy = _a.ariaDescribedBy, isOpen = _a.isOpen, actions = _a.actions, onRequestClose = _a.onRequestClose, children = _a.children, _c = _a.role, role = _c === void 0 ? "dialog" : _c, _d = _a.shouldReturnFocus, shouldReturnFocus = _d === void 0 ? true : _d, _e = _a.isContentScrollable, isContentScrollable = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "l" : _f, _g = _a.fullBleed, fullBleed = _g === void 0 ? false : _g, customWidths = _a.customWidths, props = __rest(_a, ["title", "description", "ariaDescribedBy", "isOpen", "actions", "onRequestClose", "children", "role", "shouldReturnFocus", "isContentScrollable", "size", "fullBleed", "customWidths"]);
+    var title = _a.title, description = _a.description, ariaDescribedBy = _a.ariaDescribedBy, isOpen = _a.isOpen, actions = _a.actions, onRequestClose = _a.onRequestClose, children = _a.children, _c = _a.role, role = _c === void 0 ? "dialog" : _c, _d = _a.shouldReturnFocus, shouldReturnFocus = _d === void 0 ? true : _d, _e = _a.isContentScrollable, isContentScrollable = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "l" : _f, _g = _a.fullBleed, fullBleed = _g === void 0 ? false : _g, customWidths = _a.customWidths, titleWordWrap = _a.titleWordWrap, props = __rest(_a, ["title", "description", "ariaDescribedBy", "isOpen", "actions", "onRequestClose", "children", "role", "shouldReturnFocus", "isContentScrollable", "size", "fullBleed", "customWidths", "titleWordWrap"]);
     var _h = useThemeElement(), themeElement = _h[0], setThemeElement = _h[1];
     var triggerRef = useRef(null);
     var setTriggerElement = function () {
@@ -20106,7 +20469,7 @@ var Modal = function (_a) {
                                     React__default.createElement(VerticalSpace, { size: "24" }),
                                     React__default.createElement(Surface, null,
                                         React__default.createElement(Title, { asChild: true },
-                                            React__default.createElement(Heading, { level: "1", size: "m" }, title))),
+                                            React__default.createElement(Heading, { level: "1", size: "m", isWordWrap: titleWordWrap }, title))),
                                     React__default.createElement(VerticalSpace, { size: "12" })))),
                             React__default.createElement("div", { className: "arc-Modal-content" },
                                 title && description && (React__default.createElement("div", { className: "arc-Modal-section" },
@@ -20207,8 +20570,8 @@ var PaginationSimple = function (_a) {
  * Use `Popover` to display content in a portal, triggered by a button.
  */
 var Popover = function (_a) {
-    var align = _a.align, ariaLabel = _a.ariaLabel, alignOffset = _a.alignOffset, _b = _a.arrow, arrow = _b === void 0 ? true : _b, _c = _a.background, background = _c === void 0 ? "light" : _c, children = _a.children, content = _a.content, _d = _a.asChild, asChild = _d === void 0 ? false : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 452 : _e, minHeight = _a.minHeight, onCloseAutoFocus = _a.onCloseAutoFocus, onEscapeKeyDown = _a.onEscapeKeyDown, onFocusOutside = _a.onFocusOutside, onInteractOutside = _a.onInteractOutside, onOpenAutoFocus = _a.onOpenAutoFocus, onPointerDownOutside = _a.onPointerDownOutside, onOpenChange = _a.onOpenChange, open = _a.open, _f = _a.constrainToViewport, constrainToViewport = _f === void 0 ? true : _f, side = _a.side, _g = _a.sideOffset, sideOffset = _g === void 0 ? 0 : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 100 : _h, _j = _a.hideWhenDetached, hideWhenDetached = _j === void 0 ? false : _j, _k = _a.useBespokeTrigger, useBespokeTrigger = _k === void 0 ? false : _k, props = __rest(_a, ["align", "ariaLabel", "alignOffset", "arrow", "background", "children", "content", "asChild", "maxWidth", "minHeight", "onCloseAutoFocus", "onEscapeKeyDown", "onFocusOutside", "onInteractOutside", "onOpenAutoFocus", "onPointerDownOutside", "onOpenChange", "open", "constrainToViewport", "side", "sideOffset", "zIndex", "hideWhenDetached", "useBespokeTrigger"]);
-    var _l = useThemeElement(), themeElement = _l[0], setThemeElement = _l[1];
+    var align = _a.align, ariaLabel = _a.ariaLabel, alignOffset = _a.alignOffset, _b = _a.arrow, arrow = _b === void 0 ? true : _b, _c = _a.background, background = _c === void 0 ? "light" : _c, children = _a.children, content = _a.content, _d = _a.asChild, asChild = _d === void 0 ? false : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 452 : _e, minHeight = _a.minHeight, onCloseAutoFocus = _a.onCloseAutoFocus, onEscapeKeyDown = _a.onEscapeKeyDown, onFocusOutside = _a.onFocusOutside, onInteractOutside = _a.onInteractOutside, onOpenAutoFocus = _a.onOpenAutoFocus, onPointerDownOutside = _a.onPointerDownOutside, onOpenChange = _a.onOpenChange, open = _a.open, _f = _a.constrainToViewport, constrainToViewport = _f === void 0 ? true : _f, side = _a.side, _g = _a.sideOffset, sideOffset = _g === void 0 ? 0 : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 100 : _h, _j = _a.hideWhenDetached, hideWhenDetached = _j === void 0 ? false : _j, _k = _a.useBespokeTrigger, useBespokeTrigger = _k === void 0 ? false : _k, _l = _a.isFluidToViewport, isFluidToViewport = _l === void 0 ? false : _l, _m = _a.contentMargin, contentMargin = _m === void 0 ? false : _m, _o = _a.isFullBleed, isFullBleed = _o === void 0 ? false : _o, props = __rest(_a, ["align", "ariaLabel", "alignOffset", "arrow", "background", "children", "content", "asChild", "maxWidth", "minHeight", "onCloseAutoFocus", "onEscapeKeyDown", "onFocusOutside", "onInteractOutside", "onOpenAutoFocus", "onPointerDownOutside", "onOpenChange", "open", "constrainToViewport", "side", "sideOffset", "zIndex", "hideWhenDetached", "useBespokeTrigger", "isFluidToViewport", "contentMargin", "isFullBleed"]);
+    var _p = useThemeElement(), themeElement = _p[0], setThemeElement = _p[1];
     var alignOffsetDefault = align === "center" ? 0 : -16;
     return (React__default.createElement("div", __assign({ className: "arc-Popover" }, filterAttrs(props)),
         React__default.createElement(Root2$3, { open: open, onOpenChange: onOpenChange },
@@ -20222,6 +20585,9 @@ var Popover = function (_a) {
                                         "arc-Popover-content--dark": background === "dark",
                                         "arc-Popover-content--brand": background === "brand",
                                         "arc-Popover-content--constrainToViewport": constrainToViewport,
+                                        "arc-Popover-content--isFluidToViewport": isFluidToViewport,
+                                        "arc-Popover-content--contentMargin": contentMargin,
+                                        "arc-Popover-content--isFullBleed": isFullBleed,
                                     }), style: { maxWidth: maxWidth, minHeight: minHeight }, "aria-labelledby": "popover-content" },
                                     content && React__default.createElement("div", { id: "popover-content" }, content),
                                     arrow && (React__default.createElement(PopoverArrow, { className: "arc-Popover-arrow" })))))))))));
@@ -20281,7 +20647,7 @@ var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
  * Use `ProgressBar` to show the progress of a specific task within a page.
  */
 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 _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, _e = _a.headlineWordWrap, headlineWordWrap = _e === void 0 ? false : _e, props = __rest(_a, ["state", "value", "isIndeterminate", "headline", "ariaLabel", "action", "title", "description", "displayValue", "headlineWordWrap"]);
     var progressValue = Math.min(100, Math.max(0, value));
     var autoFocusRef = function (canFocus) { return function (el) {
         canFocus && el && el.focus();
@@ -20289,7 +20655,7 @@ var ProgressBar = function (_a) {
     return (React__default.createElement("div", __assign({ "data-testid": "progress", className: classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state)) }, filterAttrs(props)),
         React__default.createElement("div", { className: "arc-ProgressBar-titleDisplayValueContainer" },
             React__default.createElement("div", { className: "arc-ProgressBar-titleContainer" },
-                headline && React__default.createElement(Heading, { size: "s" }, headline),
+                headline && (React__default.createElement(Heading, { size: "s", isWordWrap: headlineWordWrap }, headline)),
                 headline && title && React__default.createElement(VerticalSpace, { size: "4" }),
                 title && React__default.createElement(Text, null, title)),
             displayValue && (React__default.createElement("div", { "data-testid": "display-value", className: "arc-ProgressBar-displayValueContainer" },
@@ -20440,11 +20806,6 @@ function requireMiniSvgDataUri () {
 var miniSvgDataUriExports = requireMiniSvgDataUri();
 var svgToMiniDataURI = /*@__PURE__*/getDefaultExportFromCjs(miniSvgDataUriExports);
 
-// src/capitalise-first-letter/capitalise-first-letter.ts
-var capitaliseFirstLetter = (word) => {
-  return word.charAt(0).toUpperCase() + word.slice(1);
-};
-
 var Error$1 = "\n  <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <g clipPath=\"url(#a)\">\n      <path\n        d=\"m13.06 12 2.845-2.845a.75.75 0 0 0-1.06-1.06L12 10.94 9.155 8.095a.75.75 0 0 0-1.06 1.06L10.939 12l-2.844 2.845a.75.75 0 1 0 1.06 1.06L12 13.061l2.845 2.844a.75.75 0 0 0 1.06-1.06L13.06 12Z\"\n        fill=\"currentColor\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"a\">\n        <rect width=\"24\" height=\"24\" rx=\"12\" />\n      </clipPath>\n    </defs>\n  </svg>\n  ";
 
 var Warning = "\n  <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <path\n      d=\"M12 15.747a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm.004-1.487a.375.375 0 0 0 .375-.375l.001-6.757a.375.375 0 1 0-.75 0l-.001 6.757a.375.375 0 0 0 .375.375Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n      strokeWidth=\".3\"\n    />\n  </svg>\n";
@@ -20455,7 +20816,8 @@ var Current = "\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w
 
 var ProgressStepperItem = function (_a) {
     var _b;
-    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.status, status = _d === void 0 ? "todo" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, isFluid = _a.isFluid, invertLabelPosition = _a.invertLabelPosition, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "invertLabelPosition", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden"]);
+    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.status, status = _d === void 0 ? "todo" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, isFluid = _a.isFluid, invertLabelPosition = _a.invertLabelPosition, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, isViewing = _a.isViewing, props = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "invertLabelPosition", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden", "isViewing"]);
+    var id = useId$1();
     var statusIcons = {
         todo: undefined,
         completed: Complete,
@@ -20468,181 +20830,137 @@ var ProgressStepperItem = function (_a) {
         onClick && onClick();
     };
     var statusIcon = statusIcons[status];
-    return (React__default.createElement("div", __assign({ className: classNames("arc-ProgressStepperItem", "arc-ProgressStepperItem--".concat(status), "arc-ProgressStepperItem--".concat(size), (_b = {
+    var accessibleStatusLabel = "".concat(status === "todo" ? "to do" : status).concat(isViewing ? " - currently viewing" : "");
+    return (React__default.createElement("li", __assign({ "data-progress-stepper-item-id": id, className: classNames("arc-ProgressStepperItem", "arc-ProgressStepperItem--".concat(status), "arc-ProgressStepperItem--".concat(size), (_b = {
                 "arc-ProgressStepperItem--vertical": direction === "vertical",
                 "arc-ProgressStepperItem--isFluid": isFluid && direction !== "vertical",
                 "arc-ProgressStepperItem--previousStepCompleted": previousStep === "completed"
             },
-            _b["arc-ProgressStepperItem--hasInteractiveStatus"] = status !== "todo",
+            _b["arc-ProgressStepperItem--hasInteractiveStatus"] = onClick || titleHref || status !== "todo",
             _b["arc-ProgressStepperItem--invertLabelPosition"] = direction !== "vertical" && invertLabelPosition,
             _b)) }, filterAttrs(props)),
         React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSection" },
             React__default.createElement("div", { className: "arc-ProgressStepperItem-iconWrapper", "data-testid": "arc-ProgressStepperItem-iconWrapper" },
                 React__default.createElement("span", { className: classNames("arc-ProgressStepperItem-statusIcon", {
                         "arc-ProgressStepperItem-statusIcon--small": size === "small",
-                    }) }, status === "todo" ? null : status === "current" ? (React__default.createElement("div", { className: "arc-ProgressStepperItem-statusIconInner" })) : (React__default.createElement(Icon$1, { icon: statusIcon && svgToMiniDataURI(statusIcon) }))))),
+                    }) },
+                    status === "todo" && !isViewing ? null : isViewing ? (React__default.createElement("div", { className: "arc-ProgressStepperItem-statusIconInner" })) : (status !== "current" && (React__default.createElement(Icon$1, { icon: statusIcon && svgToMiniDataURI(statusIcon) }))),
+                    status === "current" && isViewing === undefined ? (React__default.createElement(Icon$1, { icon: statusIcon && svgToMiniDataURI(statusIcon) })) : null))),
         React__default.createElement("div", { className: "arc-ProgressStepperItem-textSection" },
-            titleHref || onClick ? (React__default.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler },
-                title,
-                status !== "todo" ? (React__default.createElement(VisuallyHidden$2, null,
-                    ":",
-                    capitaliseFirstLetter(status))) : (React__default.createElement(VisuallyHidden$2, null, ":To do")))) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" },
-                title,
-                status !== "todo" ? (React__default.createElement(VisuallyHidden$2, null,
-                    ":",
-                    capitaliseFirstLetter(status))) : (React__default.createElement(VisuallyHidden$2, null, ":To do")))),
-            React__default.createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle),
+            React__default.createElement(ConditionalWrapper, { condition: Boolean(titleHref || onClick), wrapper: function (children) { return (React__default.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler, "aria-label": ariaLabel ||
+                        (status !== "current"
+                            ? "".concat(title, ", ").concat(accessibleStatusLabel)
+                            : undefined), "aria-current": status === "current" && "step" }, children)); }, fallback: function (children) { return (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" },
+                    children,
+                    React__default.createElement(VisuallyHidden$2, null, " - ".concat(accessibleStatusLabel)))); } }, title),
+            subTitle && (React__default.createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle)),
             stepContent && !isStepContentHidden && direction === "vertical" && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement("div", { className: "arc-ProgressStepperItem-nodeItem" }, stepContent))))));
 };
 
 /** Use `ProgressStepper` to provide an overview of a series of steps in a digital journey. */
 var ProgressStepper = function (_a) {
-    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, invertLabelPosition = _a.invertLabelPosition, ref = _a.ref, props = __rest(_a, ["children", "size", "isFluid", "direction", "isExpandable", "invertLabelPosition", "ref"]);
+    var ref = _a.ref, children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, invertLabelPosition = _a.invertLabelPosition, currentStep = _a.currentStep, props = __rest(_a, ["ref", "children", "size", "isFluid", "direction", "isExpandable", "invertLabelPosition", "currentStep"]);
     var items = React__default.Children.toArray(children);
     var getStepStatus = function (item) {
         var _a;
         return (_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.status;
     };
-    return (React__default.createElement("div", __assign({ ref: ref, className: classNames("arc-ProgressStepper", {
+    return (React__default.createElement("ol", __assign({ ref: ref, className: classNames("arc-ProgressStepper", {
             "arc-ProgressStepper--vertical": direction === "vertical",
         }) }, filterAttrs(props)), items.map(function (item, index) { return (React__default.createElement(React__default.Fragment, { key: "StepperItem-".concat(index) },
-        React__default.createElement(ProgressStepperItem, __assign({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, invertLabelPosition: invertLabelPosition, direction: direction, isExpandable: isExpandable, size: size, previousStep: getStepStatus(items[index - 1]) }, filterAttrs(item.props))))); })));
+        React__default.createElement(ProgressStepperItem, __assign({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, ariaLabel: item.props.ariaLabel, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, invertLabelPosition: invertLabelPosition, direction: direction, isExpandable: isExpandable, size: size, isViewing: currentStep !== undefined ? currentStep === index : undefined, previousStep: getStepStatus(items[index - 1]) }, filterAttrs(item.props))))); })));
 };
 
 /** Use `ProgressStepperOverflow` to wrap `ProgressStepperItem`s and allow overflow behaviour. */
-var ProgressStepperOverflow = forwardRef(function (_a, stepperRef) {
-    var children = _a.children, onIndexChange = _a.onIndexChange, onLoadStep = _a.onLoadStep, size = _a.size, invertLabelPosition = _a.invertLabelPosition, _b = _a.offsetLeft, offsetLeft = _b === void 0 ? 24 : _b, props = __rest(_a, ["children", "onIndexChange", "onLoadStep", "size", "invertLabelPosition", "offsetLeft"]);
-    var _c = useState(onLoadStep ? onLoadStep : 0), activeIndex = _c[0], setActiveIndex = _c[1];
-    var _d = useState(0), closestScrolledIndex = _d[0], setClosestScrolledIndex = _d[1];
-    var _e = useState(true), lastStepVisible = _e[0], setLastStepVisible = _e[1];
-    var containerRef = useRef(null);
-    useImperativeHandle(stepperRef, function () { return ({
-        handleStepScroll: handleStepScroll,
-        scrollToStep: scrollToStep,
-        handleViewScroll: handleViewScroll,
-        isLastChildVisible: isLastChildVisible,
-    }); });
-    // Add Horizontal Scroll Event Listener
+var ProgressStepperOverflow = function (_a) {
+    var ref = _a.ref, children = _a.children, size = _a.size, invertLabelPosition = _a.invertLabelPosition, _b = _a.offsetLeft, offsetLeft = _b === void 0 ? 24 : _b, props = __rest(_a, ["ref", "children", "size", "invertLabelPosition", "offsetLeft"]);
+    return (React__default.createElement("div", __assign({ className: "arc-ProgressStepperOverflow", style: { paddingLeft: offsetLeft } }, filterAttrs(props)),
+        React__default.createElement(ProgressStepper, { ref: ref, size: size, invertLabelPosition: invertLabelPosition, isFluid: false }, children)));
+};
+
+var useProgressStepperOverflow = function (_a) {
+    var _b = _a === void 0 ? {} : _a, onLoadStep = _b.onLoadStep, _c = _b.increment, increment = _c === void 0 ? 1 : _c, _d = _b.offsetLeft, offsetLeft = _d === void 0 ? 24 : _d;
+    var stepperRef = useRef(null);
+    var _e = useState({}), itemVisibility = _e[0], setItemVisibility = _e[1];
     useEffect(function () {
         var _a, _b;
-        var checkClosest = debounce(function () {
-            var closestIndex = findClosestIndex();
-            setClosestScrolledIndex(closestIndex);
-        }, 100);
-        var checkLastChild = debounce(function () {
-            var lastVisible = isLastChildVisible();
-            if (lastVisible) {
-                setLastStepVisible(true);
-            }
-            else
-                setLastStepVisible(false);
-        }, 100);
-        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", checkLastChild);
-        (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener("scroll", checkClosest);
-        return function () {
-            var _a;
-            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", checkClosest);
-            checkLastChild.cancel();
-        };
+        var el = (_a = stepperRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        var stepperItems = Array.from(((_b = stepperRef.current) === null || _b === void 0 ? void 0 : _b.children) || []);
+        var observer = new IntersectionObserver(function (entries) {
+            var newEntries = entries.reduce(function (acc, entry) {
+                var _a;
+                var el = entry.target;
+                return __assign(__assign({}, acc), (_a = {}, _a["".concat(el.dataset.progressStepperItemId)] = entry.intersectionRatio, _a));
+            }, {});
+            setItemVisibility(function (current) { return (__assign(__assign({}, current), newEntries)); });
+        }, {
+            root: el,
+            threshold: [0, 0.25, 0.5, 0.75, 1],
+        });
+        stepperItems.forEach(function (item) { return observer.observe(item); });
+        return function () { return observer.disconnect(); };
     }, []);
-    // Scroll to activeIndex
-    useEffect(function () {
-        scrollTo();
-    }, [activeIndex]);
-    // Exposing changes in activeIndex outside of component
     useEffect(function () {
-        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(closestScrolledIndex);
-        isLastChildVisible();
-    }, [closestScrolledIndex, onIndexChange, lastStepVisible]);
-    // helper functions - start
-    var getProgressStepper = function () { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.firstChild; };
-    var getStepChildren = function () {
-        var _a;
-        return Array.from(((_a = getProgressStepper()) === null || _a === void 0 ? void 0 : _a.children) || []);
-    };
-    var getLeftRects = function (children) {
-        var container = getProgressStepper();
-        if (!container)
-            return [];
-        var parentRect = container.getBoundingClientRect();
-        return children.map(function (child) {
-            var childRect = child.getBoundingClientRect();
-            return {
-                left: childRect.left - parentRect.left,
-            };
-        });
-    };
-    var indexOfClosest = function (values) {
-        return values.indexOf(Math.min.apply(Math, values));
-    };
-    // helper functions - end
-    var isLastChildVisible = function () {
-        var _a;
-        var steps = getStepChildren();
-        var lastStep = steps[steps.length - 1];
-        var rect = lastStep.getBoundingClientRect();
-        var containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        return rect.right <= containerRect.right;
-    };
-    // Used for onScroll function of scrolling without buttons
-    var findClosestIndex = function () {
-        var _a, _b;
-        var children = getStepChildren();
-        var scrolledAmount = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
-        // compare the scrolled amount to the intial left edge distance for each step
-        var getScrollDistances = function (children, scrolledAmount) {
-            return getLeftRects(children).map(function (rect) {
-                return Math.abs(scrolledAmount - rect.left);
-            });
-        };
-        var closestIndex = indexOfClosest(getScrollDistances(children, scrolledAmount));
-        return closestIndex;
-    };
-    // Scroll active step to the far left of the page
-    var scrollTo = function () {
         var _a, _b;
-        var activeStep = (_a = getProgressStepper()) === null || _a === void 0 ? void 0 : _a.children[activeIndex];
-        if (activeStep) {
-            (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
-                left: activeStep.offsetLeft - offsetLeft,
+        if (onLoadStep) {
+            var container = (_a = stepperRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+            var stepperItems = Array.from(((_b = stepperRef.current) === null || _b === void 0 ? void 0 : _b.children) || []);
+            var itemToScrollTo = stepperItems[Math.max(0, onLoadStep)];
+            container === null || container === void 0 ? void 0 : container.scrollTo({
+                left: itemToScrollTo.offsetLeft - offsetLeft,
                 behavior: "smooth",
             });
         }
+    }, [onLoadStep, offsetLeft]);
+    var _f = useMemo(function () {
+        var visibilityRatios = Object.values(itemVisibility);
+        var isFirstStepVisible = visibilityRatios[0] === 1;
+        var isLastStepVisible = visibilityRatios[visibilityRatios.length - 1] === 1;
+        return { isFirstStepVisible: isFirstStepVisible, isLastStepVisible: isLastStepVisible };
+    }, [itemVisibility]), isFirstStepVisible = _f.isFirstStepVisible, isLastStepVisible = _f.isLastStepVisible;
+    var currentIndex = Math.max(Object.values(itemVisibility).findIndex(function (value) { return value >= 0.5; }), 0);
+    var scrollToStep = function (index) {
+        var _a, _b;
+        var container = (_a = stepperRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        var stepperItems = Array.from(((_b = stepperRef.current) === null || _b === void 0 ? void 0 : _b.children) || []);
+        var itemToScrollTo = stepperItems[Math.max(0, index)];
+        container === null || container === void 0 ? void 0 : container.scrollTo({
+            left: itemToScrollTo.offsetLeft - offsetLeft,
+            behavior: "smooth",
+        });
     };
-    var handleStepScroll = function (increment) {
-        // Account for any manual scrolling set closest index to active index
-        setActiveIndex(closestScrolledIndex);
-        var newIndex = closestScrolledIndex + increment;
-        setActiveIndex(newIndex);
-        // If clicking backwards to include half visible step
-        if (closestScrolledIndex + increment === activeIndex) {
-            scrollTo();
-        }
-        if (closestScrolledIndex + increment < 0) {
-            setActiveIndex(0);
-            scrollTo();
-        }
-    };
-    // Used to scroll by Parent width
-    var handleViewScroll = function (direction) {
+    var onViewScroll = function (direction) {
         var _a;
-        var clientWidth = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
-        var stepper = containerRef.current;
-        if (!stepper)
+        var container = (_a = stepperRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!container)
             return;
-        stepper.scrollBy({
-            left: direction ? clientWidth : -clientWidth,
+        container.scrollBy({
+            left: direction ? container.clientWidth : -container.clientWidth,
             behavior: "smooth",
         });
     };
-    // Used to set a specific step to jump to on a button click
-    var scrollToStep = function (step) {
-        setActiveIndex(step);
+    var onPreviousStep = function () {
+        var newStep = Math.max(currentIndex - increment, 0);
+        scrollToStep(newStep);
     };
-    return (React__default.createElement("div", __assign({ ref: containerRef, className: "arc-ProgressStepperOverflow", style: { paddingLeft: offsetLeft } }, filterAttrs(props)),
-        React__default.createElement(ProgressStepper, { size: size, invertLabelPosition: invertLabelPosition, isFluid: false }, children)));
-});
+    var onNextStep = function () {
+        var _a;
+        var stepperItems = Array.from(((_a = stepperRef.current) === null || _a === void 0 ? void 0 : _a.children) || []);
+        var newStep = Math.min(currentIndex + increment, stepperItems.length);
+        scrollToStep(newStep);
+    };
+    return {
+        stepperRef: stepperRef,
+        onNextStep: onNextStep,
+        onPreviousStep: onPreviousStep,
+        onViewScroll: onViewScroll,
+        currentIndex: currentIndex,
+        scrollToStep: scrollToStep,
+        isFirstStepVisible: isFirstStepVisible,
+        isLastStepVisible: isLastStepVisible,
+    };
+};
 
 var RadioContext$1 = createContext({});
 var Provider$3 = RadioContext$1.Provider;
@@ -20671,8 +20989,13 @@ var RadioCardGroup = function (_a) {
                     }) }, children)))));
 };
 
-var RadioCard = forwardRef(function (_a, ref) {
-    var id = _a.id, icon = _a.icon, label = _a.label, support = _a.support, isDisabled = _a.isDisabled, checked = _a.checked, defaultChecked = _a.defaultChecked, changeEvent = _a.changeEvent, name = _a.name, blurEvent = _a.blurEvent, value = _a.value, children = _a.children, _b = _a.controlLocation, controlLocation = _b === void 0 ? "right" : _b, _c = _a.hideButton, hideButton = _c === void 0 ? false : _c;
+// src/capitalise-first-letter/capitalise-first-letter.ts
+var capitaliseFirstLetter = (word) => {
+  return word.charAt(0).toUpperCase() + word.slice(1);
+};
+
+var RadioCard = function (_a) {
+    var ref = _a.ref, id = _a.id, icon = _a.icon, label = _a.label, support = _a.support, isDisabled = _a.isDisabled, checked = _a.checked, defaultChecked = _a.defaultChecked, changeEvent = _a.changeEvent, name = _a.name, blurEvent = _a.blurEvent, value = _a.value, children = _a.children, _b = _a.controlLocation, controlLocation = _b === void 0 ? "right" : _b, _c = _a.hideButton, hideButton = _c === void 0 ? false : _c;
     var surface = useContext(Context$3).surface;
     var idLabel = "".concat(id, "-label");
     return (React__default.createElement("div", { className: classNames("arc-RadioCard", {
@@ -20692,19 +21015,19 @@ var RadioCard = forwardRef(function (_a, ref) {
                 !hideButton && (React__default.createElement("div", { className: classNames("arc-RadioCard-radioIcon", {
                         "arc-RadioCard-radioIcon--isSelected": checked,
                     }) }))))));
-});
+};
 
 /**
  * Radio Card component.
  */
-var RadioCardGroupInput = forwardRef(function (_a, ref) {
-    var icon = _a.icon, support = _a.support, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, children = _a.children, controlLocation = _a.controlLocation, hideButton = _a.hideButton, props = __rest(_a, ["icon", "support", "id", "isDisabled", "label", "value", "children", "controlLocation", "hideButton"]);
+var RadioCardGroupInput = function (_a) {
+    var ref = _a.ref, icon = _a.icon, support = _a.support, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, children = _a.children, controlLocation = _a.controlLocation, hideButton = _a.hideButton, props = __rest(_a, ["ref", "icon", "support", "id", "isDisabled", "label", "value", "children", "controlLocation", "hideButton"]);
     var _b = useRadioContext$1(), name = _b.name, changeEvent = _b.changeEvent, checkedValue = _b.checkedValue, groupDisabled = _b.groupDisabled;
     var isChecked = checkedValue === value ? true : false;
     var checked = typeof changeEvent !== "function" ? undefined : isChecked;
     var defaultChecked = typeof changeEvent !== "function" ? isChecked : undefined;
     return (React__default.createElement(RadioCard, __assign({ icon: icon, ref: ref, id: id, support: support, label: label, name: name, defaultChecked: defaultChecked, checked: checked, changeEvent: changeEvent, value: value, isDisabled: isDisabled || groupDisabled, controlLocation: controlLocation, hideButton: hideButton }, props), children));
-});
+};
 
 var RadioContext = createContext({});
 var Provider$2 = RadioContext.Provider;
@@ -20731,8 +21054,8 @@ var RadioGroup = function (_a) {
                 React__default.createElement("span", { className: "arc-RadioGroup-radioButtonContainer" }, children)))));
 };
 
-var RadioGroupButton = forwardRef(function (_a, ref) {
-    var id = _a.id, changeEvent = _a.changeEvent, isDisabled = _a.isDisabled, size = _a.size, labelSize = _a.labelSize, checked = _a.checked, defaultChecked = _a.defaultChecked, radioButtonAlignment = _a.radioButtonAlignment, name = _a.name, blurEvent = _a.blurEvent, value = _a.value, label = _a.label, helper = _a.helper, hideLabel = _a.hideLabel, withMargin = _a.withMargin, isError = _a.isError;
+var RadioGroupButton = function (_a) {
+    var ref = _a.ref, id = _a.id, changeEvent = _a.changeEvent, isDisabled = _a.isDisabled, size = _a.size, labelSize = _a.labelSize, checked = _a.checked, defaultChecked = _a.defaultChecked, radioButtonAlignment = _a.radioButtonAlignment, name = _a.name, blurEvent = _a.blurEvent, value = _a.value, label = _a.label, helper = _a.helper, hideLabel = _a.hideLabel, withMargin = _a.withMargin, isError = _a.isError;
     var surface = useContext(Context$3).surface;
     var idLabel = "".concat(id, "-label");
     return (React__default.createElement("div", { className: classNames({
@@ -20754,25 +21077,25 @@ var RadioGroupButton = forwardRef(function (_a, ref) {
                 }) },
                 hideLabel ? React__default.createElement(VisuallyHidden$2, null, label) : label,
                 helper && (React__default.createElement("span", { className: "arc-RadioGroupButton-helper" }, helper))))));
-});
+};
 
 /**
  * Radio Button component.
  */
-var RadioGroupInput = forwardRef(function (_a, ref) {
-    var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, _b = _a.radioButtonAlignment, radioButtonAlignment = _b === void 0 ? "center" : _b, value = _a.value, isError = _a.isError, props = __rest(_a, ["helper", "id", "isDisabled", "label", "radioButtonAlignment", "value", "isError"]);
+var RadioGroupInput = function (_a) {
+    var ref = _a.ref, helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, _b = _a.radioButtonAlignment, radioButtonAlignment = _b === void 0 ? "center" : _b, value = _a.value, isError = _a.isError, props = __rest(_a, ["ref", "helper", "id", "isDisabled", "label", "radioButtonAlignment", "value", "isError"]);
     var _c = useRadioContext(), blurEvent = _c.blurEvent, changeEvent = _c.changeEvent, groupDisabled = _c.groupDisabled, checkedValue = _c.checkedValue, name = _c.name, size = _c.size;
     var isChecked = checkedValue === value ? true : false;
     var checked = typeof changeEvent !== "function" ? undefined : isChecked;
     var defaultChecked = typeof changeEvent !== "function" ? isChecked : undefined;
     return (React__default.createElement(RadioGroupButton, __assign({ withMargin: true, ref: ref, id: id, name: name, helper: helper, isDisabled: isDisabled || groupDisabled, size: size, radioButtonAlignment: radioButtonAlignment, label: label, defaultChecked: defaultChecked, checked: checked, changeEvent: changeEvent, blurEvent: blurEvent, value: value, isError: isError }, props)));
-});
+};
 
 /**
  * Use `ScrollToTop` to allow the user to scroll to the top of the page by clicking a button.
  */
 var ScrollToTop = function (_a) {
-    var _b = _a.appear, appear = _b === void 0 ? "always" : _b, _c = _a.isFixed, isFixed = _c === void 0 ? true : _c, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, _f = _a.focusColor, focusColor = _f === void 0 ? "magenta" : _f, props = __rest(_a, ["appear", "isFixed", "fill", "zIndex", "focusColor"]);
+    var _b = _a.appear, appear = _b === void 0 ? "always" : _b, _c = _a.isFixed, isFixed = _c === void 0 ? true : _c, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, _f = _a.focusColor, focusColor = _f === void 0 ? "primary" : _f, props = __rest(_a, ["appear", "isFixed", "fill", "zIndex", "focusColor"]);
     var _g = useState(false), hasScrolled = _g[0], setHasScrolled = _g[1];
     useEffect(function () {
         var handleScroll = debounce(function () {
@@ -21029,7 +21352,7 @@ var SiteHeaderV2 = function (_a) {
     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(ArcSizeBreakpointsL, ")"));
-    var menubarRef = useRef();
+    var menubarRef = useRef(null);
     useEffect(function () {
         if (!isMinWidthArcBreakpointL && menuOpen) {
             document.body.classList.add("arc-body--overflowHidden");
@@ -21130,11 +21453,12 @@ var SiteHeaderV2Item = function (_a) {
 var SiteHeaderV2ItemGroup = 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 isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
-    var ElementType = title ? "details" : "div";
+    var ElementType = title && !isMinWidthArcBreakpointL ? "details" : "div";
+    var ElementTypeSummary = isMinWidthArcBreakpointL ? "div" : "summary";
     return (React__default.createElement("li", { className: "arc-SiteHeaderV2ItemGroup" },
         React__default.createElement(ElementType, __assign({ className: "arc-SiteHeaderV2ItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterAttrs(props)),
             title ? (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("summary", { tabIndex: isMinWidthArcBreakpointL ? -1 : 0, className: "arc-SiteHeaderV2ItemGroup-summary" }, href ? (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
+                React__default.createElement(ElementTypeSummary, { tabIndex: isMinWidthArcBreakpointL ? -1 : 0, className: "arc-SiteHeaderV2ItemGroup-summary" }, href ? (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
                     React__default.createElement(ConditionalWrapper, { condition: isMinWidthArcBreakpointL, wrapper: function (children) { return (React__default.createElement("a", { onClick: handleLinkClick({
                                 handler: onClick,
                             }), className: "arc-SiteHeaderV2ItemGroup-title", href: href }, children)); }, fallback: function (children) { return (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, children)); } }, title),
@@ -21170,6 +21494,9 @@ var SiteHeaderV2Panel = function (_a) {
         // by listening to clicks on the entire document and acting accordingly.
         var handleClick = function (e) {
             var _a, _b, _c, _d;
+            // null check for navItemRef
+            if (!(navItemRef === null || navItemRef === void 0 ? void 0 : navItemRef.current))
+                return;
             (_b = (_a = menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add("noFocus");
             // Don't close the Panel…
             if (
@@ -21312,7 +21639,7 @@ var SiteHeaderV2ViewAll = function (_a) {
 var SiteHeaderV2NavItem = function (_a) {
     var _b, _c, _d, _e, _f;
     var children = _a.children, href = _a.href, isCurrent = _a.isCurrent, onClick = _a.onClick, title = _a.title, isPrimary = _a.isPrimary, opensFirstWithPanel = _a.opensFirstWithPanel, subTitle = _a.subTitle, props = __rest(_a, ["children", "href", "isCurrent", "onClick", "title", "isPrimary", "opensFirstWithPanel", "subTitle"]);
-    var navItem = useRef();
+    var navItem = useRef(null);
     var _g = useState(false), panelOpen = _g[0], setPanelOpen = _g[1];
     var _h = useState(true), openSecondaryWithSubNav = _h[0], setOpenSecondaryWithSubNav = _h[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
@@ -21423,7 +21750,7 @@ var Provider = Context.Provider;
 var SiteHeaderV2NavItemWithSubNav = 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, opensFirstWithPanel = _a.opensFirstWithPanel, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["href", "slot1", "slot2", "slot3", "slot4", "slot5", "slot6", "subTitle", "title", "onViewAllClick", "isPrimary", "opensFirstWithPanel", "viewAllTitle"]);
-    var navItem = useRef();
+    var navItem = useRef(null);
     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];
@@ -21531,7 +21858,7 @@ var SiteHeaderV2SubNavItem = 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).navItem;
-    var subNavItem = useRef();
+    var subNavItem = useRef(null);
     var _e = useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
     useEffect(function () {
@@ -21589,8 +21916,8 @@ var Skeleton = function (_a) {
 };
 
 /** Use `SkipLink` to help keyboard-only users skip to the main content on a page. */
-var SkipLink = function (_a, props) {
-    var children = _a.children;
+var SkipLink = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
     return (React__default.createElement("div", __assign({ className: "arc-SkipLink" }, filterAttrs(props)), children));
 };
 
@@ -21949,8 +22276,8 @@ var Tag = function (_a) {
 };
 
 /** 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, 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, onFocus = _a.onFocus, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, width = _a.width, autoComplete = _a.autoComplete, _j = _a.minHeight, minHeight = _j === void 0 ? "116px" : _j, maxHeight = _a.maxHeight, isErrorAlert = _a.isErrorAlert, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onFocus", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText", "width", "autoComplete", "minHeight", "maxHeight", "isErrorAlert"]);
+var TextArea = function (_a) {
+    var ref = _a.ref, _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, onFocus = _a.onFocus, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, width = _a.width, autoComplete = _a.autoComplete, _j = _a.minHeight, minHeight = _j === void 0 ? "116px" : _j, maxHeight = _a.maxHeight, isErrorAlert = _a.isErrorAlert, props = __rest(_a, ["ref", "defaultValue", "errorMessage", "helper", "hideLabel", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onFocus", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText", "width", "autoComplete", "minHeight", "maxHeight", "isErrorAlert"]);
     var surface = useContext(Context$3).surface;
     var ourRef = useRef(null);
     var _k = useState((value && value.length) || (defaultValue && defaultValue.length) || 0), characterCount = _k[0], setCharacterCount = _k[1];
@@ -21999,13 +22326,13 @@ var TextArea = forwardRef(function (_a, ref) {
                 minHeight: minHeight,
                 marginTop: hideLabel ? 0 : undefined,
             }, "aria-describedby": ariaDescribedby, autoComplete: autoComplete })));
-});
+};
 
 // package.json
 var package_default = {
   name: "@arc-ui/helpers",
   private: true,
-  version: "12.0.0",
+  version: "13.0.0",
   type: "module",
   homepage: "https://ui.digital-ent-int.bt.com",
   author: "BT Enterprise Digital UI Team <ui-digital-ent-int@bt.com>",
@@ -23075,9 +23402,9 @@ var Truncate = function (_a) {
 
 /** Use `TypographyCard` for content that benefits from larger and energetic typography. */
 var TypographyCard = function (_a) {
-    var url = _a.url, onClick = _a.onClick, heading = _a.heading, metaText = _a.metaText, label = _a.label, minHeight = _a.minHeight, _b = _a.headingSize, headingSize = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.pathway, pathway = _d === void 0 ? "light" : _d, _e = _a.buttonIcon, buttonIcon = _e === void 0 ? "arrow" : _e, _f = _a.headingLevel, headingLevel = _f === void 0 ? "2" : _f, _g = _a.labelLevel, labelLevel = _g === void 0 ? "3" : _g, props = __rest(_a, ["url", "onClick", "heading", "metaText", "label", "minHeight", "headingSize", "linkData", "pathway", "buttonIcon", "headingLevel", "labelLevel"]);
+    var url = _a.url, onClick = _a.onClick, heading = _a.heading, metaText = _a.metaText, label = _a.label, minHeight = _a.minHeight, _b = _a.headingSize, headingSize = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.pathway, pathway = _d === void 0 ? "light" : _d, _e = _a.buttonIcon, buttonIcon = _e === void 0 ? "arrow" : _e, _f = _a.headingLevel, headingLevel = _f === void 0 ? "2" : _f, _g = _a.labelLevel, labelLevel = _g === void 0 ? "3" : _g, _h = _a.headingWordWrap, headingWordWrap = _h === void 0 ? false : _h, props = __rest(_a, ["url", "onClick", "heading", "metaText", "label", "minHeight", "headingSize", "linkData", "pathway", "buttonIcon", "headingLevel", "labelLevel", "headingWordWrap"]);
     var surface = useContext(Context$3).surface;
-    var _h = useState(false), showHoverState = _h[0], setShowHoverState = _h[1];
+    var _j = useState(false), showHoverState = _j[0], setShowHoverState = _j[1];
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     var isDarkPathway = pathway === "dark";
     return (React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-TypographyCard", {
@@ -23090,7 +23417,7 @@ var TypographyCard = function (_a) {
             label && (React__default.createElement("div", { className: "arc-TypographyCard-label" },
                 React__default.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label),
                 React__default.createElement(VerticalSpace, { size: "16" }))),
-            React__default.createElement(CardHeading, { size: headingSize, linkData: linkData, heading: heading, headingLevel: headingLevel, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
+            React__default.createElement(CardHeading, { size: headingSize, linkData: linkData, heading: heading, headingLevel: headingLevel, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false), headingWordWrap: headingWordWrap })),
         React__default.createElement(CardFooter, { showButton: true, isDarkPathway: isDarkPathway, buttonIcon: buttonIcon, metaText: metaText, isHovered: showHoverState })));
 };
 
@@ -26244,10 +26571,10 @@ var ReactPlayerVimeo = /*@__PURE__*/getDefaultExportFromCjs(vimeoExports);
  * Use `VideoPlayer` to embed videos from YouTube or Vimeo.
  */
 var VideoPlayer = function (_a) {
-    var title = _a.title, description = _a.description, transcriptLink = _a.transcriptLink, transcriptContent = _a.transcriptContent, light = _a.light, url = _a.url, onReady = _a.onReady, onPlay = _a.onPlay, onStart = _a.onStart, onPause = _a.onPause, onError = _a.onError, onEnded = _a.onEnded, _b = _a.isBorderRadius, isBorderRadius = _b === void 0 ? false : _b, _c = _a.isSupportingTextHidden, isSupportingTextHidden = _c === void 0 ? false : _c, props = __rest(_a, ["title", "description", "transcriptLink", "transcriptContent", "light", "url", "onReady", "onPlay", "onStart", "onPause", "onError", "onEnded", "isBorderRadius", "isSupportingTextHidden"]);
+    var title = _a.title, description = _a.description, transcriptLink = _a.transcriptLink, transcriptContent = _a.transcriptContent, light = _a.light, url = _a.url, onReady = _a.onReady, onPlay = _a.onPlay, onStart = _a.onStart, onPause = _a.onPause, onError = _a.onError, onEnded = _a.onEnded, _b = _a.isBorderRadius, isBorderRadius = _b === void 0 ? false : _b, _c = _a.isSupportingTextHidden, isSupportingTextHidden = _c === void 0 ? false : _c, _d = _a.titleWordWrap, titleWordWrap = _d === void 0 ? false : _d, props = __rest(_a, ["title", "description", "transcriptLink", "transcriptContent", "light", "url", "onReady", "onPlay", "onStart", "onPause", "onError", "onEnded", "isBorderRadius", "isSupportingTextHidden", "titleWordWrap"]);
     var TextWrapper = isSupportingTextHidden ? VisuallyHidden$2 : "div";
     var isVimeo = new URL(url).hostname.includes("vimeo");
-    var _d = useState(false), isClient = _d[0], setIsClient = _d[1];
+    var _e = useState(false), isClient = _e[0], setIsClient = _e[1];
     // https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only
     useEffect(function () {
         setIsClient(true);
@@ -26278,7 +26605,7 @@ var VideoPlayer = function (_a) {
             : isClient && React__default.createElement(ReactPlayerYoutube, __assign({}, playerProps))),
         React__default.createElement(TextWrapper, null,
             React__default.createElement(VerticalSpace, { size: "24" }),
-            React__default.createElement(Heading, { level: "3", size: "s" }, title),
+            React__default.createElement(Heading, { level: "3", size: "s", isWordWrap: titleWordWrap }, title),
             React__default.createElement(VerticalSpace, { size: "8" }),
             React__default.createElement(Text, null, description)),
         transcriptLink && (React__default.createElement(React__default.Fragment, null,
@@ -26359,14 +26686,14 @@ var NavigationHeaderInlineAction = function (_a) {
             React__default.createElement(Text, { size: "l" }, text))));
 };
 
-var NavigationHeaderButton = 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 NavigationHeaderButton = function (_a) {
+    var ref = _a.ref, isActive = _a.isActive, children = _a.children, onClick = _a.onClick, _b = _a.isPadded, isPadded = _b === void 0 ? true : _b, props = __rest(_a, ["ref", "isActive", "children", "onClick", "isPadded"]);
     var surface = useContext(Context$3).surface;
     return (React__default.createElement("button", __assign({}, props, { ref: ref, onClick: onClick, className: classNames("arc-NavigationHeaderButton", suffixModifier("arc-NavigationHeaderButton--on", surface), {
             "arc-NavigationHeaderButton--active": isActive,
             "arc-NavigationHeaderButton--padded": isPadded,
         }) }), children));
-});
+};
 
 var NavigationHeaderDisclosure = function (_a) {
     var heading = _a.heading, children = _a.children;
@@ -26381,7 +26708,7 @@ var NavigationHeaderDisclosure = function (_a) {
         if (containerRef.current && containerRef.current.firstChild && isOpen) {
             containerRef.current.firstChild.focus();
         }
-    }, [isOpen, containerRef.current]);
+    }, [isOpen]);
     return (React__default.createElement("details", { className: classNames("arc-NavigationHeaderDisclosure", suffixModifier("arc-NavigationHeaderDisclosure--on", surface)), open: isOpen },
         React__default.createElement("summary", { "aria-expanded": isOpen, onClick: handleOnClick, className: "arc-NavigationHeaderDisclosure-summary" },
             React__default.createElement("span", { className: "arc-NavigationHeaderDisclosure-heading" }, heading),
@@ -26412,12 +26739,12 @@ var NavigationHeaderMenuLink = function (_a) {
                     React__default.createElement(ThemeIcon, { size: 28, icon: "navigationHeaderMenuLinkLarge" })))))));
 };
 
-var NavigationHeaderCloseButton = React__default.forwardRef(function (_a, ref) {
-    var onClick = _a.onClick, props = __rest(_a, ["onClick"]);
+var NavigationHeaderCloseButton = function (_a) {
+    var ref = _a.ref, onClick = _a.onClick, props = __rest(_a, ["ref", "onClick"]);
     var surface = useContext(Context$3).surface;
     return (React__default.createElement("button", __assign({}, props, { ref: ref, "aria-label": "close", onClick: onClick, className: classNames("arc-NavigationHeaderCloseButton", suffixModifier("arc-NavigationHeaderCloseButton--on", surface)) }),
         React__default.createElement(ThemeIcon, { size: 32, icon: "navigationHeaderClose" })));
-});
+};
 
 var NavigationHeaderBurgerMenu = function (_a) {
     var navItems = _a.navItems, actions = _a.actions, header = _a.header, footer = _a.footer, logo = _a.logo, background = _a.background, onOpenChange = _a.onOpenChange, _b = _a.pathway, pathway = _b === void 0 ? "invert" : _b;
@@ -26437,24 +26764,25 @@ var NavigationHeaderBurgerMenu = function (_a) {
     };
     useEffect(function () {
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
-    }, [isOpen]);
+    }, [isOpen, onOpenChange]);
     // Close the menu if the nav or trigger is hidden
     useEffect(function () {
+        var trigger = triggerRef.current;
         var resizeObserver = new ResizeObserver(function (entries) {
             var entry = entries[0];
             if (!checkElementVisibility(entry.target) && isOpen) {
                 setIsOpen(false);
             }
         });
-        if (triggerRef.current) {
-            resizeObserver.observe(triggerRef.current);
+        if (trigger) {
+            resizeObserver.observe(trigger);
         }
         return function () {
-            if (triggerRef.current) {
-                resizeObserver.unobserve(triggerRef.current);
+            if (trigger) {
+                resizeObserver.unobserve(trigger);
             }
         };
-    }, [isOpen, setIsOpen, triggerRef.current]);
+    }, [isOpen, setIsOpen]);
     var colorScheme = useMemo(function () {
         var colorConfig = {
             light: {
@@ -26551,6 +26879,7 @@ var NavigationHeaderDropdown = function (_a) {
     var navigationHeaderContext = useContext(NavigationHeaderContext);
     // Close the dropdown if the nav or trigger is hidden
     useEffect(function () {
+        var trigger = triggerRef.current;
         var resizeObserver = new ResizeObserver(function (entries) {
             var entry = entries[0];
             if (!checkElementVisibility(entry.target) && isOpen) {
@@ -26558,20 +26887,15 @@ var NavigationHeaderDropdown = function (_a) {
                 setIsTooltipOpen(false);
             }
         });
-        if (triggerRef.current) {
-            resizeObserver.observe(triggerRef.current);
+        if (trigger) {
+            resizeObserver.observe(trigger);
         }
         return function () {
-            if (triggerRef.current) {
-                resizeObserver.unobserve(triggerRef.current);
+            if (trigger) {
+                resizeObserver.unobserve(trigger);
             }
         };
-    }, [
-        isOpen,
-        setIsOpen,
-        navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.setIsSubMenuItemActive,
-        triggerRef.current,
-    ]);
+    }, [isOpen, setIsOpen, navigationHeaderContext]);
     // if focus isnt going anywhere else and closed via keyboard, return focus to the trigger
     var onCloseAutoFocus = function () {
         var _a, _b;
@@ -26699,14 +27023,10 @@ var NavigationHeaderSubnav = function (_a) {
         return function () {
             document.removeEventListener("click", handleClickOutside);
         };
-    }, [
-        setIsOpen,
-        dialogRef.current,
-        containerRef.current,
-        navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.setIsSubMenuItemActive,
-    ]);
+    }, [setIsOpen, navigationHeaderContext]);
     // Close the subnav if the trigger is hidden and the submenu is open
     useEffect(function () {
+        var trigger = triggerRef.current;
         var resizeObserver = new ResizeObserver(function (entries) {
             var entry = entries[0];
             if (!checkElementVisibility(entry.target) && isOpen) {
@@ -26714,20 +27034,15 @@ var NavigationHeaderSubnav = function (_a) {
                 navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.setIsSubMenuItemActive(false);
             }
         });
-        if (triggerRef.current) {
-            resizeObserver.observe(triggerRef.current);
+        if (trigger) {
+            resizeObserver.observe(trigger);
         }
         return function () {
-            if (triggerRef.current) {
-                resizeObserver.unobserve(triggerRef.current);
+            if (trigger) {
+                resizeObserver.unobserve(trigger);
             }
         };
-    }, [
-        isOpen,
-        setIsOpen,
-        navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.setIsSubMenuItemActive,
-        triggerRef.current,
-    ]);
+    }, [isOpen, setIsOpen, navigationHeaderContext]);
     return (React__default.createElement("div", { ref: containerRef },
         React__default.createElement(NavigationHeaderButton, { "data-sub-nav-item": true, ref: triggerRef, isActive: isOpen, "aria-label": ariaLabel, onClick: onTriggerClick }, trigger),
         React__default.createElement(Root$1, { open: isOpen, modal: false },
@@ -27827,5 +28142,5 @@ var Preview$1 = /*#__PURE__*/_mergeNamespaces({
     default: Preview
 }, [PreviewExports]);
 
-export { Alert, Align, AppButton, Avatar, AvatarGroup, Badge, Banner, Box, BrandLogo, colors as BrandLogoColors, Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, Button, ButtonGroup, ButtonV2, Calendar, Carousel, Checkbox, CheckboxIcon, Columns, ColumnsCol, ComboBox, ContentSwitcher, ContentSwitcherContent, ContentSwitcherDropdown, ContentSwitcherDropdownContent, ContentSwitcherList, ContentSwitcherTab, DATE_FORMAT, DatePicker, DatePickerRange, Disclosure, DisclosureMini, Download, Drawer, DrawerContent, DrawerFooter, DrawerHeader, Elevation, Filter, FilterControl, FilterControls, FilterItem, FilterItems, FormControl, Context$2 as FormControlContext, GhostedHeroBanner, GradientPageBackground, Grid, GridCol, GridRow, Group$1 as Group, GroupItem, Heading, HeroBanner, HeroButton, Hidden, HorizontalCard, Icon$1 as Icon, colors$1 as IconColors, Image, fitOptions as ImageFitOptions, overlayOptions as ImageOverlayOptions, ImageSource, ImpactCard, InformationCard, InputIcon, Link, Markup, MediaCard, Menu, MenuContent, MenuFooter, MenuGroup, MenuGroupSingleSelect, MenuHeader, MenuItem, MenuItemCheckbox, MenuItemContentTemplate, MenuItemMultiLevel, MenuItemMultiLevelContent, MenuItemMultiLevelTrigger, MenuItemSingleSelect, MenuLabel, MenuPortal, MenuScrollable, MenuSeparator, MenuTrigger, Modal, NavigationHeader, NavigationHeaderAction, NavigationHeaderActionBar, NavigationHeaderPage, Pagination, PaginationSimple, Popover, Poster, PosterImage, PosterVideo, ProgressBar, ProgressStepper, ProgressStepperItem, ProgressStepperOverflow, RadioCardGroup, RadioCardGroupInput, RadioGroup, RadioGroupButton, RadioGroupInput, Rule, ScrollToTop, Section, Select, SemanticHeading, SiteFooter, SiteFooterItem, SiteFooterItemGroup, SiteFooterV2, SiteFooterV2Item, SiteFooterV2ItemGroup, SiteFooterV2Main, SiteFooterV2Utility, SiteHeaderV2, SiteHeaderV2Column, SiteHeaderV2Item, SiteHeaderV2ItemGroup, SiteHeaderV2NavItem, SiteHeaderV2NavItemWithSubNav, SiteHeaderV2NodeItem, SiteHeaderV2SubNavItem, SiteHeaderV2VerticalDivider, Skeleton, SkipLink, SkipLinkItem, Spinner, Surface, Context$3 as SurfaceContext, Switch, TabbedBanner, Tabs, TabsContent, TabsItem, TabsList, Tag, TemplateBanner, Text, TextArea, TextInput, Theme, ThemeIcon, ThumbnailSignpost, Toast, ToastNotification, Tooltip, Truncate, TypographyCard, UniversalHeader, UniversalHeaderItem, VerticalSpace, VideoPlayer, Visible, VisuallyHidden$2 as VisuallyHidden, backgrounds, backgroundsBT, isDateValid, isRangeValid, loadingOptions, parseDateString, parseRangeString, themes, useMediaQuery };
+export { Alert, Align, AppButton, Avatar, AvatarGroup, Badge, Banner, Box, BrandLogo, colors as BrandLogoColors, Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, Button, ButtonGroup, ButtonV2, Calendar, Carousel, Checkbox, CheckboxIcon, Columns, ColumnsCol, ComboBox, ContentSwitcher, ContentSwitcherContent, ContentSwitcherDropdown, ContentSwitcherDropdownContent, ContentSwitcherList, ContentSwitcherTab, DATE_FORMAT, DatePicker, DatePickerRange, Disclosure, DisclosureMini, Download, Drawer, DrawerContent, DrawerFooter, DrawerHeader, Elevation, Filter, FilterControl, FilterControls, FilterItem, FilterItems, FormControl, Context$2 as FormControlContext, GhostedHeroBanner, GradientPageBackground, Grid, GridCol, GridRow, Group$1 as Group, GroupItem, Heading, HeroBanner, HeroButton, Hidden, HorizontalCard, Icon$1 as Icon, colors$1 as IconColors, Image, fitOptions as ImageFitOptions, overlayOptions as ImageOverlayOptions, ImageSource, ImpactCard, InformationCard, InputIcon, Link, Markup, MediaCard, Menu, MenuContent, MenuFooter, MenuGroup, MenuGroupSingleSelect, MenuHeader, MenuItem, MenuItemCheckbox, MenuItemContentTemplate, MenuItemMultiLevel, MenuItemMultiLevelContent, MenuItemMultiLevelTrigger, MenuItemSingleSelect, MenuLabel, MenuPortal, MenuScrollable, MenuSeparator, MenuTrigger, Modal, NavigationHeader, NavigationHeaderAction, NavigationHeaderActionBar, NavigationHeaderPage, Pagination, PaginationSimple, Popover, Poster, PosterImage, PosterVideo, ProgressBar, ProgressStepper, ProgressStepperItem, ProgressStepperOverflow, RadioCardGroup, RadioCardGroupInput, RadioGroup, RadioGroupButton, RadioGroupInput, Rule, ScrollToTop, Section, Select, SemanticHeading, SiteFooter, SiteFooterItem, SiteFooterItemGroup, SiteFooterV2, SiteFooterV2Item, SiteFooterV2ItemGroup, SiteFooterV2Main, SiteFooterV2Utility, SiteHeaderV2, SiteHeaderV2Column, SiteHeaderV2Item, SiteHeaderV2ItemGroup, SiteHeaderV2NavItem, SiteHeaderV2NavItemWithSubNav, SiteHeaderV2NodeItem, SiteHeaderV2SubNavItem, SiteHeaderV2VerticalDivider, Skeleton, SkipLink, SkipLinkItem, Spinner, Surface, Context$3 as SurfaceContext, Switch, TabbedBanner, Tabs, TabsContent, TabsItem, TabsList, Tag, TemplateBanner, Text, TextArea, TextInput, Theme, ThemeIcon, ThumbnailSignpost, Toast, ToastNotification, Tooltip, Truncate, TypographyCard, UniversalHeader, UniversalHeaderItem, VerticalSpace, VideoPlayer, Visible, VisuallyHidden$2 as VisuallyHidden, backgrounds, backgroundsBT, isDateValid, isRangeValid, loadingOptions, parseDateString, parseRangeString, themes, useMediaQuery, useProgressStepperOverflow };
 //# sourceMappingURL=index.mjs.map