@arc-ui/components 12.0.0 → 13.0.0

package/lib/_shared/cjs/{CheckboxIcon-BTkdXfpp.cjs → CheckboxIcon-BzY1S_ud.cjs}

@@ -9,15 +9,16 @@ var FormControl = require('./FormControl-TtboqHRx.cjs');
 
 /** Use `CheckboxIcon` to display a visual checkbox indicator that reflects a checked, unchecked, or indeterminate state. */
 var CheckboxIcon = function (_a) {
-    var id = _a.id, name = _a.name, checked = _a.checked, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, isDisabled = _a.isDisabled, isRequired = _a.isRequired, _c = _a.size, size = _c === void 0 ? "m" : _c, value = _a.value, error = _a.error, ariaDescribedBy = _a.ariaDescribedBy, onBlur = _a.onBlur, onChange = _a.onChange, props = tslib_es6.__rest(_a, ["id", "name", "checked", "indeterminate", "isDisabled", "isRequired", "size", "value", "error", "ariaDescribedBy", "onBlur", "onChange"]);
+    var id = _a.id, name = _a.name, checked = _a.checked, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, isDisabled = _a.isDisabled, isRequired = _a.isRequired, _c = _a.size, size = _c === void 0 ? "m" : _c, value = _a.value, error = _a.error, ariaDescribedBy = _a.ariaDescribedBy, onBlur = _a.onBlur, onChange = _a.onChange, ref = _a.ref, props = tslib_es6.__rest(_a, ["id", "name", "checked", "indeterminate", "isDisabled", "isRequired", "size", "value", "error", "ariaDescribedBy", "onBlur", "onChange", "ref"]);
     var requirementStatus = React.useContext(FormControl.Context).requirementStatus;
     var internalRef = React.useRef(null);
     var surface = React.useContext(Surface.Context).surface;
+    var inputRef = (ref || internalRef);
     React.useEffect(function () {
-        if (internalRef.current) {
-            internalRef.current.indeterminate = indeterminate;
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
         }
-    }, [indeterminate, checked]);
+    }, [indeterminate, checked, inputRef]);
     var tickSize = {
         s: 14,
         m: 18,
@@ -45,7 +46,7 @@ var CheckboxIcon = function (_a) {
                 ? true
                 : indeterminate && checked
                     ? "mixed"
-                    : false, className: index.classNames("arc-CheckboxIcon-input"), disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: internalRef, required: isRequired, type: "checkbox", value: value }, checkedProps, props)),
+                    : false, className: index.classNames("arc-CheckboxIcon-input"), disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: inputRef, required: isRequired, type: "checkbox", value: value }, checkedProps, props)),
         React.createElement("span", { className: index.classNames("arc-CheckboxIcon-box") }, indeterminate ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none" },
             React.createElement("rect", { x: "4", y: "8", width: "7.51", height: "1", rx: "0.5", fill: "currentColor" }))) : (React.createElement(ThemeIcon.ThemeIcon, { icon: "checkboxChecked", size: tickSize[size] })))));
 };

package/lib/_shared/cjs/{Combination-6m6aOXZq.cjs → Combination-Cm62lfyr.cjs}

@@ -2,7 +2,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-DXNM3D1d.cjs');
+var index = require('./index-DlWZZNwu.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var ReactDOM = require('react-dom');
 var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');

package/lib/_shared/cjs/{ContentSwitcherDropdown-BLXyhXVS.cjs → ContentSwitcherDropdown-6IGRpV54.cjs}

@@ -3,10 +3,10 @@
 var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index$2 = require('./index-CTlXMLug.cjs');
-var index$1 = require('./index-CDVpHNP8.cjs');
+var index$1 = require('./index-Dgn0408w.cjs');
 var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
 var ThemeIcon = require('./ThemeIcon-CwYN77IF.cjs');
-var index = require('./index-DXNM3D1d.cjs');
+var index = require('./index-DlWZZNwu.cjs');
 var VisuallyHidden = require('./VisuallyHidden-CQg3cOVK.cjs');
 
 // src/get-text-width/get-text-width.ts

package/lib/_shared/cjs/{ContentSwitcherList-BgAW2IhJ.cjs → ContentSwitcherList-Di7RS8ue.cjs}

@@ -5,6 +5,7 @@ var React = require('react');
 var index = require('./index-BCu-VH8y.cjs');
 var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
 var Text = require('./Text-jwsn80lQ.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
 var debounce = require('./debounce-uPMetQ6J.cjs');
 var index$1 = require('./index-CTlXMLug.cjs');
 
@@ -15,11 +16,12 @@ var ContentSwitcher = function (_a) {
         React.createElement(index.$69cb30bb0017df05$export$be92b6f5f03c0fe9, tslib_es6.__assign({ className: "arc-ContentSwitcher-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode, value: value }, filterAttrs.filterAttrs(props)), children)));
 };
 
-var ContentSwitcherTab = React.forwardRef(function (_a, ref) {
-    var label = _a.label, value = _a.value, onClick = _a.onClick, onFocus = _a.onFocus, props = tslib_es6.__rest(_a, ["label", "value", "onClick", "onFocus"]);
-    return (React.createElement(index.$69cb30bb0017df05$export$41fb9f06171c75f4, tslib_es6.__assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick, onFocus: onFocus }, filterAttrs.filterAttrs(props)),
-        React.createElement(Text.Text, { size: "m" }, label)));
-});
+var ContentSwitcherTab = function (_a) {
+    var label = _a.label, value = _a.value, onClick = _a.onClick, onFocus = _a.onFocus, ref = _a.ref, props = tslib_es6.__rest(_a, ["label", "value", "onClick", "onFocus", "ref"]);
+    return (React.createElement(Surface.Surface, { isTransparent: true },
+        React.createElement(index.$69cb30bb0017df05$export$41fb9f06171c75f4, tslib_es6.__assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick, onFocus: onFocus }, filterAttrs.filterAttrs(props)),
+            React.createElement(Text.Text, { size: "m" }, label))));
+};
 
 var ContentSwitcherContent = function (_a) {
     var children = _a.children, value = _a.value, _b = _a.hidden, hidden = _b === void 0 ? undefined : _b, _c = _a.forceMount, forceMount = _c === void 0 ? true : _c, props = tslib_es6.__rest(_a, ["children", "value", "hidden", "forceMount"]);
@@ -34,13 +36,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 -
@@ -59,6 +54,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();
@@ -76,7 +78,7 @@ var ContentSwitcherList = function (_a) {
             window.removeEventListener("resize", updateLayout);
             handleResize.cancel();
         };
-    }, [children, checkOverflow, handleResize]);
+    }, [children, handleResize]);
     return (React.createElement("span", { className: index$1.classNames("arc-ContentSwitcherList-wrapper", {
             "arc-ContentSwitcherList-wrapper--isInset": isInset,
         }), tabIndex: -1 },
@@ -85,14 +87,23 @@ var ContentSwitcherList = function (_a) {
                 "arc-ContentSwitcherList--isJustified": isJustified,
             }), ref: listRef, "aria-label": ariaLabel }, filterAttrs.filterAttrs(props)),
             React.createElement("div", { className: "arc-ContentSwitcherList-inner" }, React.Children.map(children, function (child, index) {
-                if (tabRefs) {
+                if (!React.isValidElement(child)) {
+                    return null;
+                }
+                if (tabRefs.current[index] !== null) {
                     return React.cloneElement(child, {
-                        ref: function (el) { return (tabRefs.current[index] = el); },
+                        ref: function (el) {
+                            tabRefs.current[index] = el;
+                        },
                         onClick: function () {
-                            return scrollTabIntoView({ current: tabRefs.current[index] });
+                            var el = tabRefs.current[index];
+                            if (el)
+                                scrollTabIntoView({ current: el });
                         },
                         onFocus: function () {
-                            return scrollTabIntoView({ current: tabRefs.current[index] });
+                            var el = tabRefs.current[index];
+                            if (el)
+                                scrollTabIntoView({ current: el });
                         },
                     });
                 }

package/lib/_shared/cjs/{Popover-CYcqjefw.cjs → Popover-BtvRErpC.cjs}

@@ -3,17 +3,17 @@
 var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index$2 = require('./index-CTlXMLug.cjs');
-var index$1 = require('./index-BWfgSvRQ.cjs');
+var index$1 = require('./index-DsqYRMfM.cjs');
 var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
-var index = require('./index-DXNM3D1d.cjs');
+var index = require('./index-DlWZZNwu.cjs');
 var Surface = require('./Surface-DIU5ciDT.cjs');
 
 /**
  * Use `Popover` to display content in a portal, triggered by a button.
  */
 var Popover = function (_a) {
-    var align = _a.align, ariaLabel = _a.ariaLabel, alignOffset = _a.alignOffset, _b = _a.arrow, arrow = _b === void 0 ? true : _b, _c = _a.background, background = _c === void 0 ? "light" : _c, children = _a.children, content = _a.content, _d = _a.asChild, asChild = _d === void 0 ? false : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 452 : _e, minHeight = _a.minHeight, onCloseAutoFocus = _a.onCloseAutoFocus, onEscapeKeyDown = _a.onEscapeKeyDown, onFocusOutside = _a.onFocusOutside, onInteractOutside = _a.onInteractOutside, onOpenAutoFocus = _a.onOpenAutoFocus, onPointerDownOutside = _a.onPointerDownOutside, onOpenChange = _a.onOpenChange, open = _a.open, _f = _a.constrainToViewport, constrainToViewport = _f === void 0 ? true : _f, side = _a.side, _g = _a.sideOffset, sideOffset = _g === void 0 ? 0 : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 100 : _h, _j = _a.hideWhenDetached, hideWhenDetached = _j === void 0 ? false : _j, _k = _a.useBespokeTrigger, useBespokeTrigger = _k === void 0 ? false : _k, props = tslib_es6.__rest(_a, ["align", "ariaLabel", "alignOffset", "arrow", "background", "children", "content", "asChild", "maxWidth", "minHeight", "onCloseAutoFocus", "onEscapeKeyDown", "onFocusOutside", "onInteractOutside", "onOpenAutoFocus", "onPointerDownOutside", "onOpenChange", "open", "constrainToViewport", "side", "sideOffset", "zIndex", "hideWhenDetached", "useBespokeTrigger"]);
-    var _l = index.useThemeElement(), themeElement = _l[0], setThemeElement = _l[1];
+    var align = _a.align, ariaLabel = _a.ariaLabel, alignOffset = _a.alignOffset, _b = _a.arrow, arrow = _b === void 0 ? true : _b, _c = _a.background, background = _c === void 0 ? "light" : _c, children = _a.children, content = _a.content, _d = _a.asChild, asChild = _d === void 0 ? false : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 452 : _e, minHeight = _a.minHeight, onCloseAutoFocus = _a.onCloseAutoFocus, onEscapeKeyDown = _a.onEscapeKeyDown, onFocusOutside = _a.onFocusOutside, onInteractOutside = _a.onInteractOutside, onOpenAutoFocus = _a.onOpenAutoFocus, onPointerDownOutside = _a.onPointerDownOutside, onOpenChange = _a.onOpenChange, open = _a.open, _f = _a.constrainToViewport, constrainToViewport = _f === void 0 ? true : _f, side = _a.side, _g = _a.sideOffset, sideOffset = _g === void 0 ? 0 : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 100 : _h, _j = _a.hideWhenDetached, hideWhenDetached = _j === void 0 ? false : _j, _k = _a.useBespokeTrigger, useBespokeTrigger = _k === void 0 ? false : _k, _l = _a.isFluidToViewport, isFluidToViewport = _l === void 0 ? false : _l, _m = _a.contentMargin, contentMargin = _m === void 0 ? false : _m, _o = _a.isFullBleed, isFullBleed = _o === void 0 ? false : _o, props = tslib_es6.__rest(_a, ["align", "ariaLabel", "alignOffset", "arrow", "background", "children", "content", "asChild", "maxWidth", "minHeight", "onCloseAutoFocus", "onEscapeKeyDown", "onFocusOutside", "onInteractOutside", "onOpenAutoFocus", "onPointerDownOutside", "onOpenChange", "open", "constrainToViewport", "side", "sideOffset", "zIndex", "hideWhenDetached", "useBespokeTrigger", "isFluidToViewport", "contentMargin", "isFullBleed"]);
+    var _p = index.useThemeElement(), themeElement = _p[0], setThemeElement = _p[1];
     var alignOffsetDefault = align === "center" ? 0 : -16;
     return (React.createElement("div", tslib_es6.__assign({ className: "arc-Popover" }, filterAttrs.filterAttrs(props)),
         React.createElement(index$1.Root2, { open: open, onOpenChange: onOpenChange },
@@ -27,6 +27,9 @@ var Popover = function (_a) {
                                         "arc-Popover-content--dark": background === "dark",
                                         "arc-Popover-content--brand": background === "brand",
                                         "arc-Popover-content--constrainToViewport": constrainToViewport,
+                                        "arc-Popover-content--isFluidToViewport": isFluidToViewport,
+                                        "arc-Popover-content--contentMargin": contentMargin,
+                                        "arc-Popover-content--isFullBleed": isFullBleed,
                                     }), style: { maxWidth: maxWidth, minHeight: minHeight }, "aria-labelledby": "popover-content" },
                                     content && React.createElement("div", { id: "popover-content" }, content),
                                     arrow && (React.createElement(index$1.PopoverArrow, { className: "arc-Popover-arrow" })))))))))));

package/lib/_shared/cjs/{ProgressStepper-DTZQabiV.cjs → ProgressStepper-Cs6vX7Th.cjs}

@@ -4,8 +4,8 @@ var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
 var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
-var capitaliseFirstLetter = require('./capitalise-first-letter-CdhexpSx.cjs');
 var VisuallyHidden = require('./VisuallyHidden-CQg3cOVK.cjs');
+var ConditionalWrapper = require('./ConditionalWrapper-Cl6kgjCL.cjs');
 var Icon = require('./Icon-Dk2XHa7V.cjs');
 
 var shorterCssColorNames;
@@ -150,7 +150,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 = tslib_es6.__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 = tslib_es6.__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,
@@ -163,46 +164,46 @@ var ProgressStepperItem = function (_a) {
         onClick && onClick();
     };
     var statusIcon = statusIcons[status];
-    return (React.createElement("div", tslib_es6.__assign({ className: index.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", tslib_es6.__assign({ "data-progress-stepper-item-id": id, 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--hasInteractiveStatus"] = onClick || titleHref || 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 && svgToMiniDataURI(statusIcon) }))))),
+                    }) },
+                    status === "todo" && !isViewing ? null : isViewing ? (React.createElement("div", { className: "arc-ProgressStepperItem-statusIconInner" })) : (status !== "current" && (React.createElement(Icon.Icon, { icon: statusIcon && svgToMiniDataURI(statusIcon) }))),
+                    status === "current" && isViewing === undefined ? (React.createElement(Icon.Icon, { 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: 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),
+            React.createElement(ConditionalWrapper.ConditionalWrapper, { condition: Boolean(titleHref || onClick), wrapper: function (children) { return (React.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, className: index.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.VisuallyHidden, 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 = tslib_es6.__rest(_a, ["children", "size", "isFluid", "direction", "isExpandable", "invertLabelPosition", "ref"]);
+    var ref = _a.ref, children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, invertLabelPosition = _a.invertLabelPosition, currentStep = _a.currentStep, props = tslib_es6.__rest(_a, ["ref", "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", tslib_es6.__assign({ ref: ref, className: index.classNames("arc-ProgressStepper", {
+    return (React.createElement("ol", tslib_es6.__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, tslib_es6.__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))))); })));
+        React.createElement(ProgressStepperItem, tslib_es6.__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.filterAttrs(item.props))))); })));
 };
 
 exports.ProgressStepper = ProgressStepper;

package/lib/_shared/cjs/{Rule-jmvOpci7.cjs → Rule-essaguo_.cjs}

@@ -9,9 +9,9 @@ var Surface = require('./Surface-DIU5ciDT.cjs');
 /**
  * Use `Rule` to display a horizontal or vertical rule.
  */
-var Rule = function (_a, props) {
+var Rule = function (_a) {
     var _b;
-    var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
+    var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c, props = tslib_es6.__rest(_a, ["orientation"]);
     var surface = React.useContext(Surface.Context).surface;
     return (React.createElement("hr", tslib_es6.__assign({ className: index.classNames((_b = {
                 "arc-Rule": true

package/lib/_shared/cjs/{TemplateBanner-CzDAL0lq.cjs → TemplateBanner-DyXBKuMw.cjs}

@@ -23,7 +23,7 @@ var BannerRow = function (_a) {
 
 /** Use `TemplateBanner` as a base structure for banner components; other banner variants extend or consume this template. */
 var TemplateBanner = function (_a) {
-    var heading = _a.heading, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, label = _a.label, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, text = _a.text, img = _a.img, _d = _a.contentRatio, contentRatio = _d === void 0 ? "1/1" : _d, children = _a.children, _e = _a.alignment, alignment = _e === void 0 ? "center" : _e, additionalTopMargin = _a.additionalTopMargin, _f = _a.minHeight, minHeight = _f === void 0 ? 454 : _f, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _g = _a.headingSize, headingSize = _g === void 0 ? "xl" : _g, _h = _a.isReversed, isReversed = _h === void 0 ? false : _h, _j = _a.isElevated, isElevated = _j === void 0 ? false : _j, _k = _a.headingLevel, headingLevel = _k === void 0 ? "2" : _k, _l = _a.type, type = _l === void 0 ? "light" : _l, props = tslib_es6.__rest(_a, ["heading", "fontStyle", "label", "labelLevel", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "minHeightM", "minHeightL", "minHeightXL", "headingSize", "isReversed", "isElevated", "headingLevel", "type"]);
+    var heading = _a.heading, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, label = _a.label, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, text = _a.text, img = _a.img, _d = _a.contentRatio, contentRatio = _d === void 0 ? "1/1" : _d, children = _a.children, _e = _a.alignment, alignment = _e === void 0 ? "center" : _e, additionalTopMargin = _a.additionalTopMargin, _f = _a.minHeight, minHeight = _f === void 0 ? 454 : _f, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _g = _a.headingSize, headingSize = _g === void 0 ? "xl" : _g, _h = _a.isReversed, isReversed = _h === void 0 ? false : _h, _j = _a.isElevated, isElevated = _j === void 0 ? false : _j, _k = _a.headingLevel, headingLevel = _k === void 0 ? "2" : _k, _l = _a.headingWordWrap, headingWordWrap = _l === void 0 ? false : _l, _m = _a.type, type = _m === void 0 ? "light" : _m, props = tslib_es6.__rest(_a, ["heading", "fontStyle", "label", "labelLevel", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "minHeightM", "minHeightL", "minHeightXL", "headingSize", "isReversed", "isElevated", "headingLevel", "headingWordWrap", "type"]);
     var backgrounds = {
         dark: "dark-brand-02",
         light: "light-white",
@@ -68,7 +68,7 @@ var TemplateBanner = function (_a) {
                             label && (React.createElement(React.Fragment, null,
                                 React.createElement(Heading.Heading, { level: labelLevel, fontStyle: "overline", isWordWrap: false }, label),
                                 React.createElement(VerticalSpace.VerticalSpace, { size: "8" }))),
-                            React.createElement(Heading.Heading, { level: headingLevel, size: headingSize, fontStyle: fontStyle, isWordWrap: false }, heading),
+                            React.createElement(Heading.Heading, { level: headingLevel, size: headingSize, fontStyle: fontStyle, isWordWrap: headingWordWrap }, heading),
                             text && (React.createElement(React.Fragment, null,
                                 React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
                                 React.createElement("span", { className: "arc-TemplateBanner-text" }, text))),

package/lib/_shared/cjs/{TextInput-BHzuoI7E.cjs → TextInput-C_K2PLf5.cjs}

@@ -9,7 +9,7 @@ var Surface = require('./Surface-DIU5ciDT.cjs');
 var VisuallyHidden = require('./VisuallyHidden-CQg3cOVK.cjs');
 var Spinner = require('./Spinner-427lpnHI.cjs');
 var Icon = require('./Icon-Dk2XHa7V.cjs');
-var Tooltip = require('./Tooltip-CEb7YEP2.cjs');
+var Tooltip = require('./Tooltip-CdmWvrnr.cjs');
 var ThemeIcon = require('./ThemeIcon-CwYN77IF.cjs');
 
 /**
@@ -110,9 +110,9 @@ var TrailingSlot = function (_a) {
 };
 
 /** Use `TextInput` as a single-line field that allows users to enter short text, such as names, email, search queries or passwords. */
-var TextInputComponent = React.forwardRef(function (_a, ref) {
+var TextInputComponent = function (_a) {
     var _b;
-    var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _j = _a.size, size = _j === void 0 ? "m" : _j, leadingSlot = _a.leadingSlot, trailingSlot = _a.trailingSlot, _k = _a.inputAlignment, inputAlignment = _k === void 0 ? "left" : _k, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, isErrorAlert = _a.isErrorAlert, prefix = _a.prefix, suffix = _a.suffix, clearButton = _a.clearButton, props = tslib_es6.__rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "maxLength", "minLength", "name", "onBlur", "onFocus", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "size", "leadingSlot", "trailingSlot", "inputAlignment", "width", "autoComplete", "isLoading", "isErrorAlert", "prefix", "suffix", "clearButton"]);
+    var ref = _a.ref, _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _j = _a.size, size = _j === void 0 ? "m" : _j, leadingSlot = _a.leadingSlot, trailingSlot = _a.trailingSlot, _k = _a.inputAlignment, inputAlignment = _k === void 0 ? "left" : _k, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, isErrorAlert = _a.isErrorAlert, prefix = _a.prefix, suffix = _a.suffix, clearButton = _a.clearButton, props = tslib_es6.__rest(_a, ["ref", "defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "maxLength", "minLength", "name", "onBlur", "onFocus", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "size", "leadingSlot", "trailingSlot", "inputAlignment", "width", "autoComplete", "isLoading", "isErrorAlert", "prefix", "suffix", "clearButton"]);
     var _l = React.useState(false), showPasswordToggle = _l[0], setShowPasswordToggle = _l[1];
     var inferredInputProps = useNumericInput({
         inputMode: inputMode,
@@ -151,12 +151,12 @@ var TextInputComponent = React.forwardRef(function (_a, ref) {
                     isLoading ||
                     (clearButton === null || clearButton === void 0 ? void 0 : clearButton.onClick)) && (React.createElement(TrailingSlot, { showPassword: showPassword, isReadOnly: isReadOnly, isLoading: isLoading, clearButton: clearButton, trailingSlot: trailingSlot, isPasswordVisible: showPasswordToggle, onTogglePassword: function () { return setShowPasswordToggle(function (prev) { return !prev; }); }, size: size, isDisabled: isDisabled })),
                 suffix && (React.createElement("span", { className: "arc-TextInput-suffix arc-TextInput-affixes", "aria-hidden": true }, suffix))))));
-});
+};
 /**
  * Use `TextInput` to allow users to enter short form text.
  */
-var TextInput = React.forwardRef(function (props, ref) { return React.createElement(TextInputComponent, tslib_es6.__assign({ ref: ref }, props)); });
-var TextInputWithPlaceHolder = React.forwardRef(function (props, ref) { return React.createElement(TextInputComponent, tslib_es6.__assign({ ref: ref }, props)); });
+var TextInput = function (props) { return (React.createElement(TextInputComponent, tslib_es6.__assign({}, props))); };
+var TextInputWithPlaceHolder = function (props) { return React.createElement(TextInputComponent, tslib_es6.__assign({}, props)); };
 
 exports.InputIcon = InputIcon;
 exports.TextInput = TextInput;

package/lib/_shared/cjs/{Tooltip-CEb7YEP2.cjs → Tooltip-CdmWvrnr.cjs}

@@ -3,10 +3,10 @@
 
 var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
-var index = require('./index-DXNM3D1d.cjs');
+var index = require('./index-DlWZZNwu.cjs');
 var ReactDOM = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
-var index$1 = require('./index-B11wQrRa.cjs');
+var index$1 = require('./index-BdJeAKfz.cjs');
 var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
 var Surface = require('./Surface-DIU5ciDT.cjs');
 var Icon = require('./Icon-Dk2XHa7V.cjs');

package/lib/_shared/cjs/{arc-breakpoints-Cl4-g1TC.cjs → arc-breakpoints-uADxN-b4.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index_es = require('./index.es-Dbvw_3_e.cjs');
+var index_es = require('./index.es-BAsay4oe.cjs');
 
 /**
  * Provides an object of breakpoints for responsive designs.

package/lib/_shared/cjs/{index-BGGFOAAx.cjs → index-BBDa9gnQ.cjs}

@@ -2,8 +2,8 @@
 'use strict';
 
 var React = require('react');
-var Combination = require('./Combination-6m6aOXZq.cjs');
-var index = require('./index-DXNM3D1d.cjs');
+var Combination = require('./Combination-Cm62lfyr.cjs');
+var index = require('./index-DlWZZNwu.cjs');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);

package/lib/_shared/cjs/{index-D9onmVh5.cjs → index-BDUrOKEW.cjs}

@@ -2,9 +2,9 @@
 'use strict';
 
 var React = require('react');
-var Combination = require('./Combination-6m6aOXZq.cjs');
-var index = require('./index-DXNM3D1d.cjs');
-var index$1 = require('./index-BGGFOAAx.cjs');
+var Combination = require('./Combination-Cm62lfyr.cjs');
+var index = require('./index-DlWZZNwu.cjs');
+var index$1 = require('./index-BBDa9gnQ.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespaceDefault(e) {

package/lib/_shared/cjs/{index-CklPiHsS.cjs → index-B_WZUATb.cjs}

@@ -2,8 +2,8 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-DXNM3D1d.cjs');
-var Combination = require('./Combination-6m6aOXZq.cjs');
+var index = require('./index-DlWZZNwu.cjs');
+var Combination = require('./Combination-Cm62lfyr.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespaceDefault(e) {

package/lib/_shared/cjs/{index-B11wQrRa.cjs → index-BdJeAKfz.cjs}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var ReactDOM = require('react-dom');
-var index$1 = require('./index-DXNM3D1d.cjs');
+var index$1 = require('./index-DlWZZNwu.cjs');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);

package/lib/_shared/cjs/{index-CDVpHNP8.cjs → index-Dgn0408w.cjs}

@@ -3,10 +3,10 @@
 
 var React = require('react');
 var ReactDOM = require('react-dom');
-var Combination = require('./Combination-6m6aOXZq.cjs');
-var index = require('./index-CklPiHsS.cjs');
-var index$1 = require('./index-DXNM3D1d.cjs');
-var index$2 = require('./index-KrMgv4q_.cjs');
+var Combination = require('./Combination-Cm62lfyr.cjs');
+var index = require('./index-B_WZUATb.cjs');
+var index$1 = require('./index-DlWZZNwu.cjs');
+var index$2 = require('./index-WO7l1Mfx.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespaceDefault(e) {

package/lib/_shared/cjs/{index-DXNM3D1d.cjs → index-DlWZZNwu.cjs}

@@ -139,9 +139,9 @@ var count = 0;
 function useId(deterministicId) {
   const [id, setId] = React__namespace.useState(useReactId());
   useLayoutEffect2(() => {
-    if (!deterministicId) setId((reactId) => reactId ?? String(count++));
+    setId((reactId) => reactId ?? String(count++));
   }, [deterministicId]);
-  return deterministicId || (id ? `radix-${id}` : "");
+  return (id ? `radix-${id}` : "");
 }
 
 // packages/react/use-controllable-state/src/useControllableState.tsx

package/lib/_shared/cjs/{index-BWfgSvRQ.cjs → index-DsqYRMfM.cjs}

@@ -2,10 +2,10 @@
 'use strict';
 
 var React = require('react');
-var Combination = require('./Combination-6m6aOXZq.cjs');
-var index = require('./index-DXNM3D1d.cjs');
-var index$1 = require('./index-KrMgv4q_.cjs');
-var index$2 = require('./index-BGGFOAAx.cjs');
+var Combination = require('./Combination-Cm62lfyr.cjs');
+var index = require('./index-DlWZZNwu.cjs');
+var index$1 = require('./index-WO7l1Mfx.cjs');
+var index$2 = require('./index-BBDa9gnQ.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespaceDefault(e) {

package/lib/_shared/cjs/{index-KrMgv4q_.cjs → index-WO7l1Mfx.cjs}

@@ -2,10 +2,10 @@
 'use strict';
 
 var React = require('react');
-var index$1 = require('./index-B11wQrRa.cjs');
-var Combination = require('./Combination-6m6aOXZq.cjs');
+var index$1 = require('./index-BdJeAKfz.cjs');
+var Combination = require('./Combination-Cm62lfyr.cjs');
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('./index-DXNM3D1d.cjs');
+var index = require('./index-DlWZZNwu.cjs');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);

package/lib/_shared/cjs/{index.es-Dbvw_3_e.cjs → index.es-BAsay4oe.cjs}

@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Tue, 18 Nov 2025 18:15:01 GMT
+ * Generated on Tue, 23 Dec 2025 14:36:38 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";

package/lib/_shared/cjs/{use-media-query-DqZqShGX.cjs → use-media-query-BJV2IbHi.cjs}

@@ -28,11 +28,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();

package/lib/_shared/esm/{Button-DTiOFT9M.mjs → Button-Benn9Qop.mjs}

@@ -1,5 +1,5 @@
 import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
-import React__default, { forwardRef, useContext } from 'react';
+import React__default, { useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { s as suffixModifier } from './suffix-modifier-B_pO0UkF.mjs';
 import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
@@ -10,9 +10,9 @@ import { T as ThemeIcon } from './ThemeIcon-B0n6cKRb.mjs';
 /**
  * Use `Button` to let a user complete an action like ‘Log in’ or ‘Register’.
  */
-var Button = forwardRef(function (_a, ref) {
+var Button = function (_a) {
     var _b;
-    var ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, _h = _a.size, size = _h === void 0 ? "m" : _h, supportingText = _a.supportingText, target = _a.target, type = _a.type, form = _a.form, props = __rest(_a, ["ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "size", "supportingText", "target", "type", "form"]);
+    var ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, _h = _a.size, size = _h === void 0 ? "m" : _h, supportingText = _a.supportingText, target = _a.target, type = _a.type, form = _a.form, ref = _a.ref, props = __rest(_a, ["ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "size", "supportingText", "target", "type", "form", "ref"]);
     var surface = useContext(Context).surface;
     var buttonClasses = classNames((_b = {
             "arc-Button": true,
@@ -40,7 +40,7 @@ var Button = forwardRef(function (_a, ref) {
         React__default.createElement("span", { className: "arc-Button-inner" },
             buttonText,
             buttonIcon)));
-});
+};
 var ButtonIcon = function (_a) {
     var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
     return (React__default.createElement("span", { className: "arc-Button-icon" }, isChevron ? (React__default.createElement(ThemeIcon, { icon: isBeforeText ? "buttonLeft" : "buttonRight" })) : (React__default.createElement(Icon, { icon: icon }))));

package/lib/_shared/esm/{ButtonV2-ByW5P8Hq.mjs → ButtonV2-CgjYgfZA.mjs}

@@ -1,5 +1,5 @@
 import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
-import React__default, { forwardRef, useContext } from 'react';
+import React__default, { useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 import { I as Icon } from './Icon-CCUbr_AO.mjs';
@@ -9,8 +9,8 @@ import { S as Spinner } from './Spinner-DvngCIwx.mjs';
 /**
  * Use `ButtonV2` for our most up to date Call To Action button, offering Primary, Secondary, Tertiary, Compact and Error states.
  */
-var ButtonV2 = forwardRef(function (_a, ref) {
-    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, iconActive = _a.iconActive, _c = _a.iconPosition, iconPosition = _c === void 0 ? "beforeText" : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? false : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, isSpan = _a.isSpan, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, props = __rest(_a, ["label", "buttonStyle", "icon", "iconActive", "iconPosition", "size", "ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "isFullWidth", "isLoading", "isSpan", "onClick", "href", "id", "rel", "target", "type", "form"]);
+var ButtonV2 = function (_a) {
+    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, iconActive = _a.iconActive, _c = _a.iconPosition, iconPosition = _c === void 0 ? "beforeText" : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? false : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, isSpan = _a.isSpan, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, ref = _a.ref, props = __rest(_a, ["label", "buttonStyle", "icon", "iconActive", "iconPosition", "size", "ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "isFullWidth", "isLoading", "isSpan", "onClick", "href", "id", "rel", "target", "type", "form", "ref"]);
     var surface = useContext(Context).surface;
     var ButtonElement = isSpan ? "span" : "button";
     var iconSizes = {
@@ -54,6 +54,6 @@ var ButtonV2 = forwardRef(function (_a, ref) {
         return (React__default.createElement("a", __assign({}, commonProps, { className: ButtonV2Classes, href: href, rel: rel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, target: target }), renderButtonContent()));
     }
     return (React__default.createElement(ButtonElement, __assign({}, commonProps, { className: ButtonV2Classes, "aria-label": ariaLabel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, disabled: isLoading, type: type, form: form }), renderButtonContent()));
-});
+};
 
 export { ButtonV2 as B };