@arc-ui/components 12.1.0 → 13.1.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-DgychllS.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"]);
@@ -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-BxuQPltF.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, className = _a.className, 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", "className"]);
+    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 },
@@ -21,12 +21,15 @@ var Popover = function (_a) {
             React.createElement("div", { ref: setThemeElement },
                 React.createElement(index$1.Portal, { container: themeElement },
                     React.createElement("div", { "data-cy": "z-index", style: { position: "absolute", zIndex: zIndex } },
-                        React.createElement(index$1.Content2, { side: side, sideOffset: sideOffset, align: align, hideWhenDetached: hideWhenDetached, alignOffset: alignOffset !== null && alignOffset !== void 0 ? alignOffset : alignOffsetDefault, onOpenAutoFocus: onOpenAutoFocus, onCloseAutoFocus: onCloseAutoFocus, onEscapeKeyDown: onEscapeKeyDown, onPointerDownOutside: onPointerDownOutside, onFocusOutside: onFocusOutside, onInteractOutside: onInteractOutside },
+                        React.createElement(index$1.Content2, { side: side, sideOffset: sideOffset, align: align, hideWhenDetached: hideWhenDetached, alignOffset: alignOffset !== null && alignOffset !== void 0 ? alignOffset : alignOffsetDefault, onOpenAutoFocus: onOpenAutoFocus, onCloseAutoFocus: onCloseAutoFocus, onEscapeKeyDown: onEscapeKeyDown, onPointerDownOutside: onPointerDownOutside, onFocusOutside: onFocusOutside, onInteractOutside: onInteractOutside, className: className },
                             React.createElement(Surface.Surface, { isTransparent: true, background: background === "light" ? "light-white" : "dark-black" },
                                 React.createElement("div", { className: index$2.classNames("arc-Popover-content", {
                                         "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-mTgKZYEl.cjs → ProgressStepper-Cs6vX7Th.cjs}

@@ -193,8 +193,8 @@ var ProgressStepperItem = function (_a) {
 };
 
 /** Use `ProgressStepper` to provide an overview of a series of steps in a digital journey. */
-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 = tslib_es6.__rest(_a, ["children", "size", "isFluid", "direction", "isExpandable", "invertLabelPosition", "currentStep"]);
+var ProgressStepper = function (_a) {
+    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;
@@ -204,7 +204,7 @@ var ProgressStepper = React.forwardRef(function (_a, ref) {
             "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, 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;
 exports.ProgressStepperItem = ProgressStepperItem;

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-rdwgmFH_.cjs}

@@ -3,7 +3,9 @@
 var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
+var debounce = require('./debounce-uPMetQ6J.cjs');
 var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var arcBreakpoints = require('./arc-breakpoints-JJMLGzht.cjs');
 var VerticalSpace = require('./VerticalSpace-DLQUYsvc.cjs');
 var Box = require('./Box-Va2g7Gdp.cjs');
 var Heading = require('./Heading-BYBmZkmS.cjs');
@@ -23,7 +25,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, contentRatios = _a.contentRatios, 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", "contentRatios", "children", "alignment", "additionalTopMargin", "minHeight", "minHeightM", "minHeightL", "minHeightXL", "headingSize", "isReversed", "isElevated", "headingLevel", "headingWordWrap", "type"]);
     var backgrounds = {
         dark: "dark-brand-02",
         light: "light-white",
@@ -49,6 +51,30 @@ var TemplateBanner = function (_a) {
             ? "".concat(minHeightXL, "px")
             : "auto",
     };
+    var _o = React.useState("1/1"), contentRatiosPerBreakpoint = _o[0], setContentRatios = _o[1];
+    var checkContentRatio = debounce.debounce(function () {
+        if (contentRatios) {
+            for (var _i = 0, _a = Object.entries(arcBreakpoints.ArcBreakpoints); _i < _a.length; _i++) {
+                var _b = _a[_i], key = _b[0], value = _b[1];
+                if (window.innerWidth > value) {
+                    var ratio = contentRatios === null || contentRatios === void 0 ? void 0 : contentRatios[key];
+                    if (ratio) {
+                        setContentRatios(ratio);
+                        return;
+                    }
+                }
+            }
+        }
+        setContentRatios(contentRatio);
+    }, 100);
+    React.useEffect(function () {
+        checkContentRatio();
+        window.addEventListener("resize", checkContentRatio);
+        return function () {
+            window.removeEventListener("resize", checkContentRatio);
+            checkContentRatio.cancel();
+        };
+    }, [contentRatios, checkContentRatio]);
     return (React.createElement("div", tslib_es6.__assign({ style: templateBannerStyles, className: index.classNames("arc-TemplateBanner arc-TemplateBanner-background--".concat(type), {
             "arc-TemplateBanner--elevation": isElevated,
             "arc-TemplateBanner--minHeightM": minHeightM,
@@ -60,24 +86,28 @@ var TemplateBanner = function (_a) {
                 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",
-                        }, xs: 12, order: { xs: isContained && isReversed ? 1 : 0, m: 0 }, m: img ? columnWithImgWidths[contentRatio] : 12 },
+                            xs: !img || contentRatiosPerBreakpoint === "1/0"
+                                ? "center"
+                                : "start",
+                        }, xs: 12, order: { xs: isContained && isReversed ? 1 : 0, m: 0 }, m: img ? columnWithImgWidths[contentRatiosPerBreakpoint] : 12 },
                         React.createElement("div", { className: index.classNames("arc-TemplateBanner-content", {
                                 "arc-TemplateBanner-content--additionalTopMargin": additionalTopMargin && alignment === "start",
                             }) },
                             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))),
                             children && (React.createElement("span", null,
                                 React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
                                 children)))),
-                    img && contentRatio !== "1/0" && (React.createElement(GridRow.GridCol, tslib_es6.__assign({ "data-testid": "arc-TemplateBanner-imageCol", align: img.fit !== "cover"
+                    img && contentRatiosPerBreakpoint !== "1/0" && (React.createElement(GridRow.GridCol, tslib_es6.__assign({ "data-testid": "arc-TemplateBanner-imageCol", align: img.fit !== "cover"
                             ? { m: imageAlignment[img.alignment || "center"] }
-                            : undefined, xs: 12 }, (contentRatio === "2/3" && img ? { m: 4 } : { m: 6 })),
+                            : undefined, xs: 12 }, (contentRatiosPerBreakpoint === "2/3" && img
+                        ? { m: 4 }
+                        : { m: 6 })),
                         React.createElement(BannerImage.BannerImage, tslib_es6.__assign({ ariaHidden: true }, img)))))))));
 };
 

package/lib/_shared/cjs/{TextInput-BHzuoI7E.cjs → TextInput-CLkhL2KT.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');
 
 /**
@@ -62,7 +62,7 @@ var InputIcon = function (_a) {
             "arc-TextInput-inputIcon": true,
             "arc-TextInput-inputIcon--isReadOnly": isReadOnly,
             "arc-TextInput-inputIcon--isDisabled": isDisabled,
-        }), disabled: isReadOnly || isDisabled, "aria-label": isButton.label, onFocus: isButton.onFocus, onClick: function (e) {
+        }), disabled: isReadOnly || isDisabled, "aria-label": isButton.label, onFocus: isButton.onFocus, onKeyDown: isButton.onKeyDown, onClick: function (e) {
             var _a;
             e.preventDefault();
             (_a = isButton.onClick) === null || _a === void 0 ? void 0 : _a.call(isButton);
@@ -73,19 +73,42 @@ var InputIcon = function (_a) {
 
 var TrailingSlot = function (_a) {
     var _b;
-    var trailingSlot = _a.trailingSlot, showPassword = _a.showPassword, isPasswordVisible = _a.isPasswordVisible, onTogglePassword = _a.onTogglePassword, isLoading = _a.isLoading, clearButton = _a.clearButton, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _c = _a.size, size = _c === void 0 ? "m" : _c;
+    var id = _a.id, trailingSlot = _a.trailingSlot, showPassword = _a.showPassword, isPasswordVisible = _a.isPasswordVisible, onTogglePassword = _a.onTogglePassword, isLoading = _a.isLoading, clearButton = _a.clearButton, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _c = _a.size, size = _c === void 0 ? "m" : _c, inputRef = _a.inputRef;
     var spinnerSizeMap = {
         s: 16,
         m: 24,
         l: 24,
     };
     var spinnerSize = spinnerSizeMap[size];
-    return (React.createElement("span", { className: "arc-TextInput-trailingSlot" },
+    var focusInput = function () {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    var clearInput = function () {
+        var _a;
+        if (inputRef.current) {
+            inputRef.current.value = "";
+            inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
+        }
+        (_a = clearButton === null || clearButton === void 0 ? void 0 : clearButton.onClick) === null || _a === void 0 ? void 0 : _a.call(clearButton);
+    };
+    var onClearButtonKeydown = function () {
+        clearInput();
+        focusInput();
+    };
+    return (React.createElement("span", { className: "arc-TextInput-trailingSlot", id: "trailingslot-".concat(id) },
         trailingSlot && !showPassword && !isLoading && !clearButton && (React.createElement(React.Fragment, null, trailingSlot)),
         (clearButton === null || clearButton === void 0 ? void 0 : clearButton.onClick) && !showPassword && !isLoading && (React.createElement(InputIcon, { themeIcon: "textInputClear", isReadOnly: isReadOnly, isDisabled: isDisabled, tooltip: {
                 title: (_b = clearButton.tooltipLabel) !== null && _b !== void 0 ? _b : "Clear",
                 side: "bottom",
-            }, isButton: { onClick: clearButton.onClick, label: "Clear Input" }, size: size })),
+            }, isButton: {
+                onClick: function () {
+                    clearInput();
+                    focusInput();
+                },
+                label: "Clear Input",
+                onKeyDown: onClearButtonKeydown,
+            }, size: size })),
         showPassword && !isLoading && (React.createElement(React.Fragment, null,
             React.createElement(InputIcon, { isDisabled: isDisabled, isReadOnly: isReadOnly, themeIcon: isPasswordVisible
                     ? "textInputShowPassword"
@@ -110,10 +133,20 @@ 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 inputRef = React.useRef(null);
+    var setInputRef = function (node) {
+        inputRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    };
     var inferredInputProps = useNumericInput({
         inputMode: inputMode,
         pattern: pattern,
@@ -145,18 +178,18 @@ var TextInputComponent = React.forwardRef(function (_a, ref) {
             React.createElement("div", { className: "arc-TextInput-inputWrapper", style: { width: width, marginTop: hideLabel ? 0 : undefined } },
                 prefix && (React.createElement("span", { className: "arc-TextInput-prefix arc-TextInput-affixes", "aria-hidden": true }, prefix)),
                 leadingSlot && (React.createElement("span", { className: "arc-TextInput-leadingSlot" }, leadingSlot)),
-                React.createElement("input", tslib_es6.__assign({ placeholder: placeholder, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, onFocus: onFocus, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined, autoComplete: autoComplete }, inferredInputProps)),
+                React.createElement("input", tslib_es6.__assign({ placeholder: placeholder, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, onFocus: onFocus, readOnly: isReadOnly, ref: setInputRef, required: isRequired, value: typeof value !== "undefined" ? value : undefined, autoComplete: autoComplete }, inferredInputProps)),
                 (trailingSlot ||
                     showPassword ||
                     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 })),
+                    (clearButton === null || clearButton === void 0 ? void 0 : clearButton.onClick)) && (React.createElement(TrailingSlot, { id: id, showPassword: showPassword, isReadOnly: isReadOnly, isLoading: isLoading, clearButton: clearButton, trailingSlot: trailingSlot, isPasswordVisible: showPasswordToggle, onTogglePassword: function () { return setShowPasswordToggle(function (prev) { return !prev; }); }, size: size, isDisabled: isDisabled, inputRef: inputRef })),
                 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-DFPoWNR4.cjs → arc-breakpoints-JJMLGzht.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index_es = require('./index.es-B2ZfX2D7.cjs');
+var index_es = require('./index.es-CCJ64o4N.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-B2ZfX2D7.cjs → index.es-CCJ64o4N.cjs}

@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 05 Dec 2025 13:50:26 GMT
+ * Generated on Tue, 10 Feb 2026 16:04:38 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";

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 };