@arc-ui/components 12.0.0 → 12.1.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, forwardRef, isValidElement, cloneElement, useMemo, useCallback, useReducer, useLayoutEffect, createElement, 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';
@@ -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,
@@ -2003,7 +2003,7 @@ function startOfMonth(dirtyDate) {
 
 /**
  * Do not edit directly
- * Generated on Tue, 18 Nov 2025 18:15:01 GMT
+ * Generated on Fri, 05 Dec 2025 13:50:26 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";
@@ -2171,11 +2171,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 +2787,9 @@ function subDays(dirtyDate, dirtyAmount) {
   return addDays(dirtyDate, -amount);
 }
 
-var defaultOptions$1 = {};
+var defaultOptions$3 = {};
 function getDefaultOptions() {
-  return defaultOptions$1;
+  return defaultOptions$3;
 }
 
 /**
@@ -6075,6 +6075,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 +7651,7 @@ function EventHandler() {
   return self;
 }
 
-const defaultOptions = {
+const defaultOptions$1 = {
   align: 'center',
   axis: 'x',
   container: null,
@@ -7610,7 +7735,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 +7926,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 +8193,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 +8293,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,
@@ -13889,13 +14229,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 +14247,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 +14271,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 },
@@ -17079,7 +17419,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 &&
@@ -18311,7 +18651,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,
@@ -20440,11 +20780,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 +20790,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 +20804,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 ProgressStepper = forwardRef(function (_a, ref) {
+    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, invertLabelPosition = _a.invertLabelPosition, currentStep = _a.currentStep, props = __rest(_a, ["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 = forwardRef(function (_a, ref) {
+    var children = _a.children, size = _a.size, invertLabelPosition = _a.invertLabelPosition, _b = _a.offsetLeft, offsetLeft = _b === void 0 ? 24 : _b, props = __rest(_a, ["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,6 +20963,11 @@ var RadioCardGroup = function (_a) {
                     }) }, children)))));
 };
 
+// src/capitalise-first-letter/capitalise-first-letter.ts
+var capitaliseFirstLetter = (word) => {
+  return word.charAt(0).toUpperCase() + word.slice(1);
+};
+
 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;
     var surface = useContext(Context$3).surface;
@@ -21130,11 +21427,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),
@@ -22005,7 +22303,7 @@ var TextArea = forwardRef(function (_a, ref) {
 var package_default = {
   name: "@arc-ui/helpers",
   private: true,
-  version: "12.0.0",
+  version: "12.1.0",
   type: "module",
   homepage: "https://ui.digital-ent-int.bt.com",
   author: "BT Enterprise Digital UI Team <ui-digital-ent-int@bt.com>",
@@ -26381,7 +26679,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),
@@ -26437,24 +26735,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 +26850,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 +26858,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 +26994,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 +27005,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 +28113,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