@arc-ui/components 12.0.0-beta.19 → 12.0.0-beta.20

package/lib/_shared/cjs/ProgressStepper-BL9Y5c4X.cjs

@@ -0,0 +1,77 @@
+'use strict';
+
+var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var index$1 = require('./index-CqYNiqix.cjs');
+var capitaliseFirstLetter = require('./capitalise-first-letter-CdhexpSx.cjs');
+var VisuallyHidden = require('./VisuallyHidden-B4XCvPYP.cjs');
+var Icon = require('./Icon-CzhyKqMd.cjs');
+
+var Error = "\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";
+
+var Complete = "\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=\"m10.125 16.435-3.53-3.53a.75.75 0 0 1 0-1.06.768.768 0 0 1 1.06 0l2.47 2.47 6.22-6.22a.75.75 0 1 1 1.06 1.06l-7.28 7.28Z\"\n        fill=\"currentColor\"\n      />\n    </g>\n    <defs>\n      <clipPath>\n        <rect width=\"24\" height=\"24\" rx=\"12\" />\n      </clipPath>\n    </defs>\n  </svg>\n  ";
+
+var Current = "\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"12\" cy=\"12\" r=\"7\" fill=\"currentColor\" />\n    <defs>\n      <linearGradient\n        id=\"paint0_linear_1_1050\"\n        x1=\"36.6036\"\n        y1=\"-4.31391e-07\"\n        x2=\"-12.6036\"\n        y2=\"24\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stopColor=\"#F200F5\" />\n        <stop offset=\"1\" stopColor=\"#1EC8E6\" />\n      </linearGradient>\n    </defs>\n  </svg>\n  ";
+
+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 = filterAttrs.__rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "invertLabelPosition", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden"]);
+    var statusIcons = {
+        todo: undefined,
+        completed: Complete,
+        current: Current,
+        warning: Warning,
+        error: Error,
+    };
+    var onClickHandler = function (event) {
+        event.preventDefault();
+        onClick && onClick();
+    };
+    var statusIcon = statusIcons[status];
+    return (React.createElement("div", filterAttrs.__assign({ className: index.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--invertLabelPosition"] = direction !== "vertical" && invertLabelPosition,
+            _b)) }, filterAttrs.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: index.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.Icon, { icon: statusIcon && index$1.svgToMiniDataURI(statusIcon) }))))),
+        React.createElement("div", { className: "arc-ProgressStepperItem-textSection" },
+            titleHref || onClick ? (React.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, "aria-label": ariaLabel, className: index.classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler },
+                title,
+                status !== "todo" ? (React.createElement(VisuallyHidden.VisuallyHidden, null,
+                    ":",
+                    capitaliseFirstLetter.capitaliseFirstLetter(status))) : (React.createElement(VisuallyHidden.VisuallyHidden, null, ":To do")))) : (React.createElement("div", { className: "arc-ProgressStepperItem-title" },
+                title,
+                status !== "todo" ? (React.createElement(VisuallyHidden.VisuallyHidden, null,
+                    ":",
+                    capitaliseFirstLetter.capitaliseFirstLetter(status))) : (React.createElement(VisuallyHidden.VisuallyHidden, null, ":To do")))),
+            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 = filterAttrs.__rest(_a, ["children", "size", "isFluid", "direction", "isExpandable", "invertLabelPosition", "ref"]);
+    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", filterAttrs.__assign({ ref: ref, className: index.classNames("arc-ProgressStepper", {
+            "arc-ProgressStepper--vertical": direction === "vertical",
+        }) }, filterAttrs.filterAttrs(props)), items.map(function (item, index) { return (React.createElement(React.Fragment, { key: "StepperItem-".concat(index) },
+        React.createElement(ProgressStepperItem, filterAttrs.__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.filterAttrs(item.props))))); })));
+};
+
+exports.ProgressStepper = ProgressStepper;
+exports.ProgressStepperItem = ProgressStepperItem;

package/lib/_shared/cjs/ProgressStepperOverflow-v-TyS5Sp.cjs

@@ -0,0 +1,142 @@
+'use strict';
+
+var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var debounce = require('./debounce-BeIT3oyF.cjs');
+var ProgressStepper = require('./ProgressStepper-BL9Y5c4X.cjs');
+
+/** 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 = filterAttrs.__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
+    React.useEffect(function () {
+        var _a, _b;
+        var checkClosest = debounce.debounce(function () {
+            var closestIndex = findClosestIndex();
+            setClosestScrolledIndex(closestIndex);
+        }, 100);
+        var checkLastChild = debounce.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();
+        };
+    }, []);
+    // 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,
+                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 _a;
+        var clientWidth = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
+        var stepper = containerRef.current;
+        if (!stepper)
+            return;
+        stepper.scrollBy({
+            left: direction ? clientWidth : -clientWidth,
+            behavior: "smooth",
+        });
+    };
+    // Used to set a specific step to jump to on a button click
+    var scrollToStep = function (step) {
+        setActiveIndex(step);
+    };
+    return (React.createElement("div", filterAttrs.__assign({ ref: containerRef, className: "arc-ProgressStepperOverflow", style: { paddingLeft: offsetLeft } }, filterAttrs.filterAttrs(props)),
+        React.createElement(ProgressStepper.ProgressStepper, { size: size, invertLabelPosition: invertLabelPosition, isFluid: false }, children)));
+});
+
+exports.ProgressStepperOverflow = ProgressStepperOverflow;

package/lib/_shared/cjs/{RadioCardGroupInput-BmntgyWB.cjs → RadioCardGroupInput-CeUM3yPS.cjs}

@@ -5,7 +5,7 @@ var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
 var capitaliseFirstLetter = require('./capitalise-first-letter-CdhexpSx.cjs');
 var Surface = require('./Surface-BFx1yNsq.cjs');
-var Icon = require('./Icon-KMACQ1i3.cjs');
+var Icon = require('./Icon-CzhyKqMd.cjs');
 
 var RadioContext = React.createContext({});
 var Provider = RadioContext.Provider;

package/lib/_shared/cjs/{SiteHeaderV2NavItemWithSubNav-CX1WAHv8.cjs → SiteHeaderV2NavItemWithSubNav-fQPk0gZU.cjs}

@@ -3,12 +3,12 @@
 var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
-var index_es = require('./index.es-i8i9xWYf.cjs');
+var index_es = require('./index.es-DBEGtWPg.cjs');
 var BtIconChevronRight2Px = require('./BtIconChevronRight2Px-CIRaur2B.cjs');
 var useMediaQuery = require('./use-media-query-BsUfHjPZ.cjs');
-var Icon = require('./Icon-KMACQ1i3.cjs');
+var Icon = require('./Icon-CzhyKqMd.cjs');
 var Surface = require('./Surface-BFx1yNsq.cjs');
-var ButtonV2 = require('./ButtonV2-CRNNZ_nd.cjs');
+var ButtonV2 = require('./ButtonV2-Bta5SVVY.cjs');
 var handleLinkClick = require('./handle-link-click-C7BvOIYa.cjs');
 var BrandLogo = require('./BrandLogo-D5wlIFmm.cjs');
 

package/lib/_shared/cjs/{TemplateBanner-Dn_6CJqe.cjs → TemplateBanner-CGtTUy81.cjs}

@@ -3,17 +3,25 @@
 var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
-var index_es = require('./index.es-i8i9xWYf.cjs');
-var useMediaQuery = require('./use-media-query-BsUfHjPZ.cjs');
 var VerticalSpace = require('./VerticalSpace-BJvST6WP.cjs');
 var Box = require('./Box-COPXU1Jf.cjs');
 var Heading = require('./Heading-BEMSkLYR.cjs');
 var GridRow = require('./GridRow-BW2ZGtND.cjs');
+require('./index-DR8Rkav9.cjs');
 var BannerImage = require('./BannerImage-kdAKagG-.cjs');
+var Visible = require('./Visible-Dx__9oZG.cjs');
+
+var BannerRow = function (_a) {
+    var isReversed = _a.isReversed, children = _a.children;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Visible.Visible, { xs: true, s: true },
+            React.createElement(GridRow.GridRow, { "data-testid": "arc-TemplateBanner-gridRow-mobile" }, children)),
+        React.createElement(Visible.Visible, { m: true, l: true, xl: true },
+            React.createElement(GridRow.GridRow, { "data-testid": "arc-TemplateBanner-gridRow-desktop", direction: isReversed ? "row-reverse" : "row" }, children))));
+};
 
 var TemplateBanner = function (_a) {
     var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, _c = _a.alignment, alignment = _c === void 0 ? "center" : _c, additionalTopMargin = _a.additionalTopMargin, _d = _a.minHeight, minHeight = _d === void 0 ? 454 : _d, _e = _a.headingSize, headingSize = _e === void 0 ? "xl" : _e, _f = _a.isReversed, isReversed = _f === void 0 ? false : _f, _g = _a.isElevated, isElevated = _g === void 0 ? false : _g, _h = _a.headingLevel, headingLevel = _h === void 0 ? "2" : _h, _j = _a.type, type = _j === void 0 ? "light" : _j, props = filterAttrs.__rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "headingSize", "isReversed", "isElevated", "headingLevel", "type"]);
-    var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsM, ")"));
     var backgrounds = {
         dark: "dark-brand-02",
         light: "light-white",
@@ -26,7 +34,6 @@ var TemplateBanner = function (_a) {
     };
     var isContained = type === "contained";
     var borderWidth = isContained && !isElevated ? "thin" : undefined;
-    var direction = isReversed && isMinWidthArcBreakpointM ? "row-reverse" : "row";
     var columnWithImgWidths = {
         "1/0": 12,
         "2/3": 8,
@@ -37,7 +44,7 @@ var TemplateBanner = function (_a) {
         }) }, filterAttrs.filterAttrs(props)),
         React.createElement(Box.Box, { isBorderRadius: true, "data-testid": "arc-TemplateBanner-box", borderWidth: borderWidth, surface: backgrounds[type], isSurfaceTransparent: !isContained },
             React.createElement(GridRow.Grid, { isGutterless: true, isFluid: true },
-                React.createElement(GridRow.GridRow, { "data-testid": "arc-TemplateBanner-gridRow", direction: direction },
+                React.createElement(BannerRow, { "data-testid": "arc-TemplateBanner-gridRow", isReversed: isReversed },
                     React.createElement(GridRow.GridCol, { "data-testid": "arc-TemplateBanner-contentCol", align: {
                             m: alignment === "start" ? "start" : "center",
                             xs: !img || contentRatio === "1/0" ? "center" : "start",
@@ -46,7 +53,7 @@ var TemplateBanner = function (_a) {
                                 "arc-TemplateBanner-content--additionalTopMargin": additionalTopMargin && alignment === "start",
                             }) },
                             label && (React.createElement(React.Fragment, null,
-                                React.createElement(Heading.Heading, { size: "xxs" }, label.toUpperCase()),
+                                React.createElement(Heading.Heading, { level: "3", fontStyle: "overline" }, label),
                                 React.createElement(VerticalSpace.VerticalSpace, { size: "8" }))),
                             React.createElement(Heading.Heading, { level: headingLevel, size: headingSize }, heading),
                             text && (React.createElement(React.Fragment, null,

package/lib/_shared/cjs/Visible-Dx__9oZG.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+
+var Visible = function (_a) {
+    var children = _a.children, xs = _a.xs, s = _a.s, m = _a.m, l = _a.l, xl = _a.xl, props = filterAttrs.__rest(_a, ["children", "xs", "s", "m", "l", "xl"]);
+    return (React.createElement("div", filterAttrs.__assign({ className: index.classNames("arc-Visible", {
+            "arc-Visible--xs": xs,
+            "arc-Visible--s": s,
+            "arc-Visible--m": m,
+            "arc-Visible--l": l,
+            "arc-Visible--xl": xl,
+        }) }, filterAttrs.filterAttrs(props)), children));
+};
+
+exports.Visible = Visible;

package/lib/_shared/cjs/{index.es-i8i9xWYf.cjs → index.es-DBEGtWPg.cjs}

@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Tue, 10 Jun 2025 09:53:42 GMT
+ * Generated on Mon, 21 Jul 2025 12:02:37 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";

package/lib/_shared/esm/{Avatar-B8aoUhmE.mjs → Avatar-Fb1E5MA9.mjs}

@@ -2,6 +2,7 @@ import { a as __assign, _ as __rest, f as filterAttrs } from './filter-attrs-B6C
 import React__default from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { C as ConditionalWrapper } from './ConditionalWrapper-WoJxFYwS.mjs';
+import { V as VisuallyHidden } from './VisuallyHidden-DqAgoqJo.mjs';
 import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
 import { I as Image } from './Image-Dl8oH1Rn.mjs';
 import { H as Heading } from './Heading-CxHWefi7.mjs';
@@ -35,7 +36,9 @@ var Avatar = function (_a) {
     var wrapperAttrs = __assign({ className: classNames("arc-Avatar", "arc-Avatar--".concat(size), {
             "arc-Avatar--img": Boolean(img),
         }) }, filterAttrs(props));
-    return (React__default.createElement(ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React__default.createElement("a", __assign({ href: href, "aria-label": ariaLabel, onClick: onClick, title: title }, wrapperAttrs), children)); }, fallback: function (children) { return React__default.createElement("div", __assign({}, wrapperAttrs), children); } },
+    return (React__default.createElement(ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React__default.createElement("a", __assign({ href: href, "aria-label": ariaLabel, onClick: onClick, title: title }, wrapperAttrs), children)); }, fallback: function (children) { return (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", __assign({}, wrapperAttrs), children),
+            ariaLabel && React__default.createElement(VisuallyHidden, null, ariaLabel))); } },
         React__default.createElement(AvatarContent, { size: size, img: img, initials: initials })));
 };
 

package/lib/_shared/esm/{Button-9L4AksQP.mjs → Button-BxuM3_gz.mjs}

@@ -2,7 +2,7 @@ import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6C
 import React__default, { forwardRef, useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { s as suffixModifier } from './suffix-modifier-B_pO0UkF.mjs';
-import { I as Icon } from './Icon-MZfaoOo9.mjs';
+import { I as Icon } from './Icon-CcPOJcQm.mjs';
 import { C as Context } from './Surface-Colbp3Zx.mjs';
 import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
 

package/lib/_shared/esm/{ButtonV2-2U4PvnpS.mjs → ButtonV2-DwYBAojW.mjs}

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
 import React__default, { forwardRef, useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { I as Icon } from './Icon-MZfaoOo9.mjs';
+import { I as Icon } from './Icon-CcPOJcQm.mjs';
 import { C as Context } from './Surface-Colbp3Zx.mjs';
 import { S as Spinner } from './Spinner-Cd7LiPTy.mjs';
 
@@ -28,7 +28,7 @@ var ButtonV2 = forwardRef(function (_a, ref) {
             case "compact":
             case "secondary":
             case "tertiary":
-                return surface === "light" ? "gradient" : "auto";
+                return "brand-alt";
             default:
                 return "auto";
         }

package/lib/_shared/esm/{Calendar-Di_PdK9o.mjs → Calendar-CjqPM7ta.mjs}

@@ -1,7 +1,7 @@
 import { b as __spreadArray, a as __assign, _ as __rest, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
 import React__default, { createContext, forwardRef, useContext, useCallback, useRef, useState, useReducer, useEffect } from 'react';
 import { r as requiredArgs, t as toDate, b as toInteger, _ as _typeof, g as getDefaultOptions, f as format } from './index-Cr6KeQLU.mjs';
-import { A as ArcSizeBreakpointsM } from './index.es-DZ9WSYOo.mjs';
+import { A as ArcSizeBreakpointsM } from './index.es-DCvYtQfu.mjs';
 import { u as useMediaQuery } from './use-media-query-DmKuIDEM.mjs';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { T as Text } from './Text-CBlnm5CT.mjs';
@@ -10,7 +10,7 @@ import './index-Spae4j7j.mjs';
 import { S as Surface } from './Surface-Colbp3Zx.mjs';
 import { H as Heading } from './Heading-CxHWefi7.mjs';
 import { B as BtIconChevronRightMid } from './BtIconChevronRightMid-DE4lmVaG.mjs';
-import { I as Icon } from './Icon-MZfaoOo9.mjs';
+import { I as Icon } from './Icon-CcPOJcQm.mjs';
 
 /**
  * @name addMonths

package/lib/_shared/esm/{CardFooter-CgDDDI7Z.mjs → CardFooter-fsAY4cc6.mjs}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { I as Icon } from './Icon-MZfaoOo9.mjs';
+import { I as Icon } from './Icon-CcPOJcQm.mjs';
 import { i as isDate, f as format } from './index-Cr6KeQLU.mjs';
 
 var ArrowRight = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M18.146 11.646a.5.5 0 0 0 0 .707l3.147 3.147H9.5a.5.5 0 0 0 0 1h11.793l-3.146 3.146a.5.5 0 1 0 .707.707L23.207 16l-4.354-4.354a.5.5 0 0 0-.707 0'/%3e%3c/svg%3e";

package/lib/_shared/esm/{ComboBox-Cga1icqB.mjs → ComboBox-CRlJjeev.mjs}

@@ -5,7 +5,7 @@ import { c as classNames } from './index-5C0-U8cc.mjs';
 import { u as useAriaDescribedby, F as FormControl } from './FormControl-CWyrVi1u.mjs';
 import { e as useThemeElement } from './index-Bz2JQq34.mjs';
 import { B as Box } from './Box-BYm_GTct.mjs';
-import { I as Icon } from './Icon-MZfaoOo9.mjs';
+import { I as Icon } from './Icon-CcPOJcQm.mjs';
 import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
 
 /**

package/lib/_shared/esm/{ContentSwitcherDropdown-dktkyAjY.mjs → ContentSwitcherDropdown-BCkuAfwC.mjs}

@@ -59,7 +59,7 @@ var ContentSwitcherDropdown = function (_a) {
                 return null;
             }
             var isActive = child.props.value === selectValue;
-            return (React__default.createElement("div", __assign({ role: "tabpanel", className: "arc-ContentSwitcherDropdown-content", id: "arc-content-switcher-dropdown-content-".concat(child.props.value), "aria-labelledby": "arc-content-switcher-dropdown-trigger-".concat(child.props.value), "data-state": isActive ? "active" : "inactive", tabIndex: 0, hidden: !isActive }, filterAttrs(child.props)), child));
+            return (React__default.createElement("div", __assign({ role: "tabpanel", className: "arc-ContentSwitcherDropdown-content", id: "arc-content-switcher-dropdown-content-".concat(child.props.value), "aria-labelledby": "arc-content-switcher-dropdown-trigger-".concat(child.props.value), "data-state": isActive ? "active" : "inactive", tabIndex: -1, hidden: !isActive }, filterAttrs(child.props)), child));
         })));
 };
 var ContentSwitcherDropdownContent = function (_a) {

package/lib/_shared/esm/{ContentSwitcherList-OnZoE86O.mjs → ContentSwitcherList-DKPD9GfN.mjs}

@@ -13,7 +13,7 @@ var ContentSwitcher = function (_a) {
 
 var ContentSwitcherContent = function (_a) {
     var children = _a.children, value = _a.value;
-    return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-ContentSwitcherContent", value: value },
+    return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-ContentSwitcherContent", value: value, tabIndex: -1 },
         React__default.createElement("div", { className: "arc-ContentSwitcherContent-wrapper" }, children)));
 };
 
@@ -64,11 +64,12 @@ var ContentSwitcherList = function (_a) {
                 list.removeEventListener("scroll", checkOverflow);
             }
             window.removeEventListener("resize", updateLayout);
+            handleResize.cancel();
         };
     }, [children, checkOverflow, handleResize]);
     return (React__default.createElement("span", { className: classNames("arc-ContentSwitcherList-wrapper", {
             "arc-ContentSwitcherList-wrapper--isInset": isInset,
-        }) },
+        }), tabIndex: -1 },
         React__default.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, __assign({ className: classNames("arc-ContentSwitcherList", {
                 "arc-ContentSwitcherList--contained": type === "contained",
                 "arc-ContentSwitcherList--isJustified": isJustified,

package/lib/_shared/esm/{DatePicker-DyPo-u9K.mjs → DatePicker-3sYJ3wGn.mjs}

@@ -2,7 +2,7 @@ import { b as __spreadArray, _ as __rest, a as __assign, f as filterAttrs } from
 import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { R as Root2, A as Anchor2, P as Portal, C as Content2 } from './index-CxrL7jIX.mjs';
-import { C as Calendar, i as isBefore, a as isAfter, c as compareAsc } from './Calendar-Di_PdK9o.mjs';
+import { i as isBefore, a as isAfter, c as compareAsc, C as Calendar } from './Calendar-CjqPM7ta.mjs';
 import { r as requiredArgs, t as toDate, a as isValid, f as format } from './index-Cr6KeQLU.mjs';
 import { e as useThemeElement } from './index-Bz2JQq34.mjs';
 import { a as TextInputWithPlaceHolder } from './TextInput-Dk7qNGoh.mjs';
@@ -138,6 +138,38 @@ var convertRangeStringToDates = function (value) {
         : []), true);
 };
 
+function validateRangeOnBlur(_a) {
+    var value = _a.value, minDate = _a.minDate, maxDate = _a.maxDate, disabledDates = _a.disabledDates, previousValidValue = _a.previousValidValue, dispatchChangeEvent = _a.dispatchChangeEvent, blurEvent = _a.blurEvent;
+    if (!isRangeValid(value))
+        return;
+    var _b = convertRangeStringToDates(value), start = _b[0], end = _b[1];
+    var isStartBeforeMin = minDate && isBefore(start, minDate);
+    var isEndAfterMax = maxDate && isAfter(end, maxDate);
+    var isStartDisabled = isDisabledDate(disabledDates, start);
+    var isEndDisabled = isDisabledDate(disabledDates, end);
+    if (isStartBeforeMin && isEndAfterMax) {
+        return dispatchChangeEvent(blurEvent, "".concat(formatDate(minDate), " - ").concat(formatDate(maxDate)));
+    }
+    if (isStartBeforeMin) {
+        return dispatchChangeEvent(blurEvent, "".concat(formatDate(minDate), " - ").concat(formatDate(end)));
+    }
+    if (isEndAfterMax) {
+        return dispatchChangeEvent(blurEvent, "".concat(formatDate(start), " - ").concat(formatDate(maxDate)));
+    }
+    if (isStartDisabled || isEndDisabled) {
+        var _c = previousValidValue
+            ? convertRangeStringToDates(previousValidValue)
+            : [], prevStart = _c[0], prevEnd = _c[1];
+        return dispatchChangeEvent(blurEvent, prevStart && prevEnd
+            ? "".concat(formatDate(prevStart), " - ").concat(formatDate(prevEnd))
+            : "");
+    }
+    if (isAfter(start, end)) {
+        var _d = [start, end].sort(compareAsc), orderedStart = _d[0], orderedEnd = _d[1];
+        return dispatchChangeEvent(blurEvent, "".concat(formatDate(orderedStart), " - ").concat(formatDate(orderedEnd)));
+    }
+}
+
 /**
  * Use `DatePicker` to clearly present available dates and allow users to choose a way to enter information.
  */
@@ -216,32 +248,15 @@ var DatePicker = forwardRef(function (_a, ref) {
         }
     };
     var handleRangeSelectionBlur = function (e) {
-        if (isRangeValid(value) && selectionType === "range") {
-            var _a = convertRangeStringToDates(value), start = _a[0], end = _a[1];
-            var isStartDateBeforeMinDate = minDate && isBefore(start, minDate);
-            var isEndDateAfterMaxDate = maxDate && isAfter(end, maxDate);
-            var isStartDateDisabled = isDisabledDate(disabledDates, start);
-            var isEndDateDisabled = isDisabledDate(disabledDates, end);
-            if (isStartDateBeforeMinDate && isEndDateAfterMaxDate) {
-                return dispatchChangeEvent(e, "".concat(formatDate(minDate), " - ").concat(formatDate(maxDate)));
-            }
-            if (isStartDateBeforeMinDate) {
-                return dispatchChangeEvent(e, "".concat(formatDate(minDate), " - ").concat(formatDate(end)));
-            }
-            if (isEndDateAfterMaxDate) {
-                return dispatchChangeEvent(e, "".concat(formatDate(start), " - ").concat(formatDate(maxDate)));
-            }
-            if (isStartDateDisabled || isEndDateDisabled) {
-                var _b = previousValidValue.current
-                    ? convertRangeStringToDates(previousValidValue.current)
-                    : [], start_1 = _b[0], end_1 = _b[1];
-                return dispatchChangeEvent(e, start_1 && end_1 ? "".concat(formatDate(start_1), " - ").concat(formatDate(end_1)) : "");
-            }
-            if (isAfter(start, end)) {
-                var _c = [start, end].sort(compareAsc), orderedStart = _c[0], orderedEnd = _c[1];
-                return dispatchChangeEvent(e, "".concat(formatDate(orderedStart), " - ").concat(formatDate(orderedEnd)));
-            }
-        }
+        validateRangeOnBlur({
+            value: value,
+            minDate: minDate,
+            maxDate: maxDate,
+            disabledDates: disabledDates,
+            previousValidValue: previousValidValue.current,
+            dispatchChangeEvent: dispatchChangeEvent,
+            blurEvent: e,
+        });
     };
     var handleBlur = function (e) {
         onBlur && onBlur(e);
@@ -306,4 +321,4 @@ var DatePicker = forwardRef(function (_a, ref) {
                     React__default.createElement(Calendar, { autoFocusOnMount: true, type: type, onCancelClick: onCancelClick, selectionType: selectionType, selectedDate: convertDateStringToDate(value), selectedRange: convertRangeStringToDates(value), disabledDates: disabledDates, minDate: minDate, maxDate: maxDate, onDateSelect: handleDateSelect, onRangeSelect: handleRangeSelect }))))));
 });
 
-export { DATE_FORMAT as D, parseDateString as a, isDateValid as b, DatePicker as c, isRangeValid as i, parseRangeString as p };
+export { DATE_FORMAT as D, isRangeValid as a, parseDateString as b, convertRangeStringToDates as c, DatePicker as d, formatDate as f, isDateValid as i, parseRangeString as p, validateRangeOnBlur as v };

package/lib/_shared/esm/{HeroButton-HYskwyvn.mjs → HeroButton-jdjjV_Gf.mjs}

@@ -2,7 +2,7 @@ import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6C
 import React__default, { forwardRef, useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { c as camelcase } from './index-Spae4j7j.mjs';
-import { I as Icon } from './Icon-MZfaoOo9.mjs';
+import { I as Icon } from './Icon-CcPOJcQm.mjs';
 import { C as Context } from './Surface-Colbp3Zx.mjs';
 import { S as Spinner } from './Spinner-Cd7LiPTy.mjs';
 

package/lib/_shared/esm/{Icon-MZfaoOo9.mjs → Icon-CcPOJcQm.mjs}

@@ -27,10 +27,10 @@ var Icon = function (_a) {
 var colors = [
     "auto",
     "brand",
+    "brand-alt",
     "statusRed",
     "statusAmber",
     "statusGreen",
-    "gradient",
 ];
 
 export { Icon as I, colors as c };

package/lib/_shared/esm/{MediaCard-tYOu7gv8.mjs → MediaCard-DqMaNWsE.mjs}

@@ -1,15 +1,13 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
 import React__default, { useContext, useState, useEffect, Suspense } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { a as ArcSizeBreakpointsS } from './index.es-DZ9WSYOo.mjs';
-import { u as useMediaQuery } from './use-media-query-DmKuIDEM.mjs';
 import { I as Image } from './Image-Dl8oH1Rn.mjs';
 import { H as Heading } from './Heading-CxHWefi7.mjs';
 import { C as Context, S as Surface } from './Surface-Colbp3Zx.mjs';
 import { T as Text } from './Text-CBlnm5CT.mjs';
 import { V as VerticalSpace } from './VerticalSpace-Duhm0zXP.mjs';
 import { C as CardHeading } from './CardHeading-_setRRjq.mjs';
-import { C as CardFooter } from './CardFooter-CgDDDI7Z.mjs';
+import { C as CardFooter } from './CardFooter-fsAY4cc6.mjs';
 import { C as ConditionalWrapper } from './ConditionalWrapper-WoJxFYwS.mjs';
 
 var VideoPlayer = React__default.lazy(function () {
@@ -28,8 +26,6 @@ var MediaCard = function (_a) {
     var surface = useContext(Context).surface;
     var _e = useState(false), isClient = _e[0], setIsClient = _e[1];
     var _f = useState(false), showHoverState = _f[0], setShowHoverState = _f[1];
-    var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
-    var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     useEffect(function () {
         setIsClient(true);
@@ -45,12 +41,12 @@ var MediaCard = function (_a) {
             media.type === "video" && isClient && (React__default.createElement(Suspense, { fallback: null },
                 React__default.createElement(VideoPlayer, __assign({ isSupportingTextHidden: true }, media)))),
             React__default.createElement("div", { className: "arc-MediaCard-content" },
-                label && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(Heading, { size: "xxs" }, label.toUpperCase()),
-                    React__default.createElement(VerticalSpace, { size: headingSpacing }))),
+                label && (React__default.createElement("div", { className: "arc-MediaCard-label" },
+                    React__default.createElement(Heading, { level: "3", fontStyle: "overline" }, label),
+                    React__default.createElement(VerticalSpace, { size: "16" }))),
                 React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: media.type !== "video" ? url : undefined, onClick: media.type !== "video" ? onClick : undefined, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
                 React__default.createElement("div", { className: "arc-MediaCard-textContainer" }, text && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(VerticalSpace, { size: headingSpacing }),
+                    React__default.createElement(VerticalSpace, { size: "16" }),
                     React__default.createElement(Text, null, text),
                     (url || metaText) && React__default.createElement(VerticalSpace, { size: "24" })))),
                 React__default.createElement(CardFooter, { buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url) && media.type !== "video", isHovered: showHoverState })))));