@arc-ui/components 12.0.0 → 12.1.0

package/lib/index.cjs

@@ -1664,7 +1664,7 @@ var Breadcrumbs = function (_a) {
             window.removeEventListener("resize", handleResize);
             handleResize.cancel();
         };
-    }, []);
+    }, [children]);
     var items = React.Children.toArray(children);
     return (React.createElement("nav", __assign({ "aria-label": "Breadcrumbs", className: classNames({
             "arc-Breadcrumbs": true,
@@ -2023,7 +2023,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";
@@ -2191,11 +2191,11 @@ var useMediaQuery = function (mediaQuery) {
         return window.matchMedia(query).matches;
     };
     var _a = React.useState(false), matches = _a[0], setMatches = _a[1];
-    // Handles the change event of the media query.
-    var handleChange = function () {
-        setMatches(getMatches(mediaQuery));
-    };
     React.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();
@@ -2807,9 +2807,9 @@ function subDays(dirtyDate, dirtyAmount) {
   return addDays(dirtyDate, -amount);
 }
 
-var defaultOptions$1 = {};
+var defaultOptions$3 = {};
 function getDefaultOptions() {
-  return defaultOptions$1;
+  return defaultOptions$3;
 }
 
 /**
@@ -6095,6 +6095,131 @@ var Calendar = function (_a) {
                 onCancelClick && (React.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]';
 }
@@ -7546,7 +7671,7 @@ function EventHandler() {
   return self;
 }
 
-const defaultOptions = {
+const defaultOptions$1 = {
   align: 'center',
   axis: 'x',
   container: null,
@@ -7630,7 +7755,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;
@@ -7821,6 +7946,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, ")");
@@ -7895,9 +8213,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 = React.useId();
-    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];
+    React.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 = React.useState(), dotButtonFocusIndex = _h[0], setCarouselDotButtonFocusIndex = _h[1];
     var prevButtonRef = React.useRef(null);
     var _j = React.useState(0), visibleSlideIndex = _j[0], setVisibleSlideIndex = _j[1];
@@ -7975,7 +8313,9 @@ var Carousel = function (_a) {
             React.createElement("div", { ref: emblaRef, className: classNames("arc-Carousel-viewport", {
                     "arc-Carousel-viewport--gutter": withGutter,
                 }) },
-                React.createElement("div", { className: "arc-Carousel-slider", role: "region", "aria-roledescription": "carousel" }, React.Children.map(children, function (child, i) { return (React.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.createElement("div", { className: "arc-Carousel-slider", role: "region", "aria-roledescription": "carousel" }, React.Children.map(children, function (child, i) { return (React.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.createElement("div", { className: "arc-Carousel-nav" },
             React.createElement("button", { "data-testid": "previous-button", ref: prevButtonRef, className: classNames("arc-Carousel-navButton", {
                     "arc-Carousel-navButton--hidden": !prevButtonEnabled,
@@ -13909,13 +14249,6 @@ var ContentSwitcherList = function (_a) {
     var _d = React.useState(0), contentSwitcherListWidth = _d[0], setContentSwitcherListWidth = _d[1];
     var tabRefs = React.useRef([]);
     var listRef = React.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 -
@@ -13934,6 +14267,13 @@ var ContentSwitcherList = function (_a) {
     }, 100);
     React.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();
@@ -13951,7 +14291,7 @@ var ContentSwitcherList = function (_a) {
             window.removeEventListener("resize", updateLayout);
             handleResize.cancel();
         };
-    }, [children, checkOverflow, handleResize]);
+    }, [children, handleResize]);
     return (React.createElement("span", { className: classNames("arc-ContentSwitcherList-wrapper", {
             "arc-ContentSwitcherList-wrapper--isInset": isInset,
         }), tabIndex: -1 },
@@ -17099,7 +17439,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 &&
@@ -18331,7 +18671,7 @@ var InformationCard = function (_a) {
             window.removeEventListener("resize", checkMinHeight);
             checkMinHeight.cancel();
         };
-    }, [minHeights, ArcBreakpoints]);
+    }, [minHeights, checkMinHeight]);
     return (React.createElement("div", __assign({ style: { minHeight: minHeight ? minHeight : minimumHeight }, className: classNames("arc-InformationCard", {
             "arc-InformationCard--isALink": cardUrl,
             "arc-InformationCard--outlined": cardUrl && showHoverState,
@@ -20460,11 +20800,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";
@@ -20475,7 +20810,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 = React.useId();
     var statusIcons = {
         todo: undefined,
         completed: Complete,
@@ -20488,181 +20824,137 @@ var ProgressStepperItem = function (_a) {
         onClick && onClick();
     };
     var statusIcon = statusIcons[status];
-    return (React.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.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.createElement("div", { className: "arc-ProgressStepperItem-iconSection" },
             React.createElement("div", { className: "arc-ProgressStepperItem-iconWrapper", "data-testid": "arc-ProgressStepperItem-iconWrapper" },
                 React.createElement("span", { className: classNames("arc-ProgressStepperItem-statusIcon", {
                         "arc-ProgressStepperItem-statusIcon--small": size === "small",
-                    }) }, status === "todo" ? null : status === "current" ? (React.createElement("div", { className: "arc-ProgressStepperItem-statusIconInner" })) : (React.createElement(Icon$1, { icon: statusIcon && svgToMiniDataURI(statusIcon) }))))),
+                    }) },
+                    status === "todo" && !isViewing ? null : isViewing ? (React.createElement("div", { className: "arc-ProgressStepperItem-statusIconInner" })) : (status !== "current" && (React.createElement(Icon$1, { icon: statusIcon && svgToMiniDataURI(statusIcon) }))),
+                    status === "current" && isViewing === undefined ? (React.createElement(Icon$1, { icon: statusIcon && svgToMiniDataURI(statusIcon) })) : null))),
         React.createElement("div", { className: "arc-ProgressStepperItem-textSection" },
-            titleHref || onClick ? (React.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.createElement(VisuallyHidden$2, null,
-                    ":",
-                    capitaliseFirstLetter(status))) : (React.createElement(VisuallyHidden$2, null, ":To do")))) : (React.createElement("div", { className: "arc-ProgressStepperItem-title" },
-                title,
-                status !== "todo" ? (React.createElement(VisuallyHidden$2, null,
-                    ":",
-                    capitaliseFirstLetter(status))) : (React.createElement(VisuallyHidden$2, null, ":To do")))),
-            React.createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle),
+            React.createElement(ConditionalWrapper, { condition: Boolean(titleHref || onClick), wrapper: function (children) { return (React.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.createElement("div", { className: "arc-ProgressStepperItem-title" },
+                    children,
+                    React.createElement(VisuallyHidden$2, null, " - ".concat(accessibleStatusLabel)))); } }, title),
+            subTitle && (React.createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle)),
             stepContent && !isStepContentHidden && direction === "vertical" && (React.createElement(React.Fragment, null,
                 React.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 = React.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.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.createElement("div", __assign({ ref: ref, className: classNames("arc-ProgressStepper", {
+    return (React.createElement("ol", __assign({ ref: ref, className: classNames("arc-ProgressStepper", {
             "arc-ProgressStepper--vertical": direction === "vertical",
         }) }, filterAttrs(props)), items.map(function (item, index) { return (React.createElement(React.Fragment, { key: "StepperItem-".concat(index) },
-        React.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.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 = React.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 = React.useState(onLoadStep ? onLoadStep : 0), activeIndex = _c[0], setActiveIndex = _c[1];
-    var _d = React.useState(0), closestScrolledIndex = _d[0], setClosestScrolledIndex = _d[1];
-    var _e = React.useState(true), lastStepVisible = _e[0], setLastStepVisible = _e[1];
-    var containerRef = React.useRef(null);
-    React.useImperativeHandle(stepperRef, function () { return ({
-        handleStepScroll: handleStepScroll,
-        scrollToStep: scrollToStep,
-        handleViewScroll: handleViewScroll,
-        isLastChildVisible: isLastChildVisible,
-    }); });
-    // Add Horizontal Scroll Event Listener
+var ProgressStepperOverflow = React.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.createElement("div", __assign({ className: "arc-ProgressStepperOverflow", style: { paddingLeft: offsetLeft } }, filterAttrs(props)),
+        React.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 = React.useRef(null);
+    var _e = React.useState({}), itemVisibility = _e[0], setItemVisibility = _e[1];
     React.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
-    React.useEffect(function () {
-        scrollTo();
-    }, [activeIndex]);
-    // Exposing changes in activeIndex outside of component
     React.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 = React.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.createElement("div", __assign({ ref: containerRef, className: "arc-ProgressStepperOverflow", style: { paddingLeft: offsetLeft } }, filterAttrs(props)),
-        React.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 = React.createContext({});
 var Provider$3 = RadioContext$1.Provider;
@@ -20691,6 +20983,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 = React.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 = React.useContext(Context$3).surface;
@@ -21150,11 +21447,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.createElement("li", { className: "arc-SiteHeaderV2ItemGroup" },
         React.createElement(ElementType, __assign({ className: "arc-SiteHeaderV2ItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterAttrs(props)),
             title ? (React.createElement(React.Fragment, null,
-                React.createElement("summary", { tabIndex: isMinWidthArcBreakpointL ? -1 : 0, className: "arc-SiteHeaderV2ItemGroup-summary" }, href ? (React.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
+                React.createElement(ElementTypeSummary, { tabIndex: isMinWidthArcBreakpointL ? -1 : 0, className: "arc-SiteHeaderV2ItemGroup-summary" }, href ? (React.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
                     React.createElement(ConditionalWrapper, { condition: isMinWidthArcBreakpointL, wrapper: function (children) { return (React.createElement("a", { onClick: handleLinkClick({
                                 handler: onClick,
                             }), className: "arc-SiteHeaderV2ItemGroup-title", href: href }, children)); }, fallback: function (children) { return (React.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, children)); } }, title),
@@ -22025,7 +22323,7 @@ var TextArea = React.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>",
@@ -26401,7 +26699,7 @@ var NavigationHeaderDisclosure = function (_a) {
         if (containerRef.current && containerRef.current.firstChild && isOpen) {
             containerRef.current.firstChild.focus();
         }
-    }, [isOpen, containerRef.current]);
+    }, [isOpen]);
     return (React.createElement("details", { className: classNames("arc-NavigationHeaderDisclosure", suffixModifier("arc-NavigationHeaderDisclosure--on", surface)), open: isOpen },
         React.createElement("summary", { "aria-expanded": isOpen, onClick: handleOnClick, className: "arc-NavigationHeaderDisclosure-summary" },
             React.createElement("span", { className: "arc-NavigationHeaderDisclosure-heading" }, heading),
@@ -26457,24 +26755,25 @@ var NavigationHeaderBurgerMenu = function (_a) {
     };
     React.useEffect(function () {
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
-    }, [isOpen]);
+    }, [isOpen, onOpenChange]);
     // Close the menu if the nav or trigger is hidden
     React.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 = React.useMemo(function () {
         var colorConfig = {
             light: {
@@ -26571,6 +26870,7 @@ var NavigationHeaderDropdown = function (_a) {
     var navigationHeaderContext = React.useContext(NavigationHeaderContext);
     // Close the dropdown if the nav or trigger is hidden
     React.useEffect(function () {
+        var trigger = triggerRef.current;
         var resizeObserver = new ResizeObserver(function (entries) {
             var entry = entries[0];
             if (!checkElementVisibility(entry.target) && isOpen) {
@@ -26578,20 +26878,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;
@@ -26719,14 +27014,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
     React.useEffect(function () {
+        var trigger = triggerRef.current;
         var resizeObserver = new ResizeObserver(function (entries) {
             var entry = entries[0];
             if (!checkElementVisibility(entry.target) && isOpen) {
@@ -26734,20 +27025,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.createElement("div", { ref: containerRef },
         React.createElement(NavigationHeaderButton, { "data-sub-nav-item": true, ref: triggerRef, isActive: isOpen, "aria-label": ariaLabel, onClick: onTriggerClick }, trigger),
         React.createElement(Root$1, { open: isOpen, modal: false },
@@ -28018,4 +28304,5 @@ exports.parseDateString = parseDateString;
 exports.parseRangeString = parseRangeString;
 exports.themes = themes;
 exports.useMediaQuery = useMediaQuery;
+exports.useProgressStepperOverflow = useProgressStepperOverflow;
 //# sourceMappingURL=index.cjs.map