@arc-ui/components 12.1.0 → 13.0.0

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-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-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-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-DFPoWNR4.cjs → arc-breakpoints-uADxN-b4.cjs}

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

@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 05 Dec 2025 13:50:26 GMT
+ * Generated on Tue, 23 Dec 2025 14:36: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 };

package/lib/_shared/esm/{Calendar-wG6UVDgO.mjs → Calendar-CzFIMyD1.mjs}

@@ -1,15 +1,15 @@
 import { b as __spreadArray, a as __assign, _ as __rest } from './tslib.es6-w7hdJ3oZ.mjs';
-import React__default, { createContext, forwardRef, useContext, useCallback, useRef, useState, useReducer, useEffect } from 'react';
+import React__default, { createContext, useContext, useCallback, useRef, useState, useReducer, useEffect } from 'react';
 import { r as requiredArgs, t as toDate, b as toInteger, _ as _typeof, g as getDefaultOptions, f as format } from './index-Cr6KeQLU.mjs';
-import { a as ArcSizeBreakpointsM } from './index.es-Co1d96HB.mjs';
+import { a as ArcSizeBreakpointsM } from './index.es-99J0r2va.mjs';
 import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 import { u as useMediaQuery } from './use-media-query-l6Sou0dd.mjs';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { T as Text } from './Text-BAzOkkzN.mjs';
-import { V as VisuallyHidden } from './VisuallyHidden-aSQ4RA1o.mjs';
 import './index-Spae4j7j.mjs';
 import { S as Surface } from './Surface-C69KVzkY.mjs';
 import { H as Heading } from './Heading-Da-o0d5x.mjs';
+import { T as Text } from './Text-BAzOkkzN.mjs';
+import { V as VisuallyHidden } from './VisuallyHidden-aSQ4RA1o.mjs';
 import { T as ThemeIcon } from './ThemeIcon-B0n6cKRb.mjs';
 import { I as Icon } from './Icon-CCUbr_AO.mjs';
 
@@ -1063,8 +1063,8 @@ function isEqual(dirtyLeftDate, dirtyRightDate) {
 
 var ArcCalendarContext = createContext(null);
 
-var CalendarDayNumber = forwardRef(function (_a, autoFocusRef) {
-    var date = _a.date, shouldRender = _a.shouldRender, isFocusWithinDayGrid = _a.isFocusWithinDayGrid;
+var CalendarDayNumber = function (_a) {
+    var autoFocusRef = _a.ref, date = _a.date, shouldRender = _a.shouldRender, isFocusWithinDayGrid = _a.isFocusWithinDayGrid;
     var context = useContext(ArcCalendarContext);
     var isFocusDate = context && isEqual(date, context.focusDate);
     var tableCellRef = useCallback(function (el) {
@@ -1125,7 +1125,7 @@ var CalendarDayNumber = forwardRef(function (_a, autoFocusRef) {
             React__default.createElement("div", { className: "arc-CalendarDayNumber-buttonInner" },
                 React__default.createElement(Text, { size: "s" },
                     React__default.createElement("span", { "aria-hidden": true }, getDate(date)))))))));
-});
+};
 
 /**
  * Do not edit directly

package/lib/_shared/esm/{CardHeading-CfPEEmBO.mjs → CardHeading-CV14vmox.mjs}

@@ -5,8 +5,8 @@ import { H as Heading } from './Heading-Da-o0d5x.mjs';
 
 /** Use `CardHeading` internally within card components to display a title, icon, or leading content at the top of a card. */
 var CardHeading = function (_a) {
-    var onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onBlur = _a.onBlur, onFocus = _a.onFocus, href = _a.href, heading = _a.heading, _b = _a.size, size = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d;
-    return (React__default.createElement(Heading, { level: headingLevel, size: size, isWordWrap: false }, href ? (React__default.createElement("a", __assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterAttrs(linkData)), heading)) : (heading)));
+    var onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onBlur = _a.onBlur, onFocus = _a.onFocus, href = _a.href, heading = _a.heading, _b = _a.size, size = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, _e = _a.headingWordWrap, headingWordWrap = _e === void 0 ? false : _e;
+    return (React__default.createElement(Heading, { level: headingLevel, size: size, isWordWrap: headingWordWrap }, href ? (React__default.createElement("a", __assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterAttrs(linkData)), heading)) : (heading)));
 };
 
 export { CardHeading as C };

package/lib/_shared/esm/{CheckboxIcon-BcVQe6mC.mjs → CheckboxIcon-CzRn1j8X.mjs}

@@ -7,15 +7,16 @@ import { C as Context } from './FormControl-DopDD_nC.mjs';
 
 /** 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 = __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 = __rest(_a, ["id", "name", "checked", "indeterminate", "isDisabled", "isRequired", "size", "value", "error", "ariaDescribedBy", "onBlur", "onChange", "ref"]);
     var requirementStatus = useContext(Context).requirementStatus;
     var internalRef = useRef(null);
     var surface = useContext(Context$1).surface;
+    var inputRef = (ref || internalRef);
     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,
@@ -43,7 +44,7 @@ var CheckboxIcon = function (_a) {
                 ? true
                 : indeterminate && checked
                     ? "mixed"
-                    : false, className: 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: 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__default.createElement("span", { className: classNames("arc-CheckboxIcon-box") }, indeterminate ? (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none" },
             React__default.createElement("rect", { x: "4", y: "8", width: "7.51", height: "1", rx: "0.5", fill: "currentColor" }))) : (React__default.createElement(ThemeIcon, { icon: "checkboxChecked", size: tickSize[size] })))));
 };

package/lib/_shared/esm/{Combination-BQ4XBtF-.mjs → Combination-BW0YAEZD.mjs}

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useState } from 'react';
-import { g as useEscapeKeydown, f as useCallbackRef$1, b as useLayoutEffect2 } from './index-Bz2JQq34.mjs';
+import { g as useEscapeKeydown, f as useCallbackRef$1, b as useLayoutEffect2 } from './index-DkAfUbDx.mjs';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';

package/lib/_shared/esm/{ContentSwitcherDropdown-ckPG4pry.mjs → ContentSwitcherDropdown-CwoMd63a.mjs}

@@ -1,10 +1,10 @@
 import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { useState, useEffect, isValidElement } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { R as Root2, T as Trigger, V as Value, I as Icon, P as Portal, C as Content2, S as ScrollUpButton, a as Viewport, b as Item, c as ItemText, d as ItemIndicator, e as ScrollDownButton } from './index-vnVJe9rH.mjs';
+import { R as Root2, T as Trigger, V as Value, I as Icon, P as Portal, C as Content2, S as ScrollUpButton, a as Viewport, b as Item, c as ItemText, d as ItemIndicator, e as ScrollDownButton } from './index-Dfz5UgHo.mjs';
 import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 import { T as ThemeIcon } from './ThemeIcon-B0n6cKRb.mjs';
-import { e as useThemeElement } from './index-Bz2JQq34.mjs';
+import { e as useThemeElement } from './index-DkAfUbDx.mjs';
 import { V as VisuallyHidden } from './VisuallyHidden-aSQ4RA1o.mjs';
 
 // src/get-text-width/get-text-width.ts

package/lib/_shared/esm/{ContentSwitcherList-CWZcMblg.mjs → ContentSwitcherList-Bvp9Zl85.mjs}

@@ -1,8 +1,9 @@
 import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
-import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
-import { $ as $69cb30bb0017df05$export$be92b6f5f03c0fe9, a as $69cb30bb0017df05$export$41fb9f06171c75f4, b as $69cb30bb0017df05$export$7c6e2c02157bb7d2, c as $69cb30bb0017df05$export$54c2e3dc7acea9f5 } from './index-BWkI4Dwz.mjs';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { $ as $69cb30bb0017df05$export$be92b6f5f03c0fe9, a as $69cb30bb0017df05$export$41fb9f06171c75f4, b as $69cb30bb0017df05$export$7c6e2c02157bb7d2, c as $69cb30bb0017df05$export$54c2e3dc7acea9f5 } from './index-CfXVJXLq.mjs';
 import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 import { T as Text } from './Text-BAzOkkzN.mjs';
+import { S as Surface } from './Surface-C69KVzkY.mjs';
 import { d as debounce } from './debounce-D_Nx5go6.mjs';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 
@@ -13,11 +14,12 @@ var ContentSwitcher = function (_a) {
         React__default.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, __assign({ className: "arc-ContentSwitcher-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode, value: value }, filterAttrs(props)), children)));
 };
 
-var ContentSwitcherTab = forwardRef(function (_a, ref) {
-    var label = _a.label, value = _a.value, onClick = _a.onClick, onFocus = _a.onFocus, props = __rest(_a, ["label", "value", "onClick", "onFocus"]);
-    return (React__default.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, __assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick, onFocus: onFocus }, filterAttrs(props)),
-        React__default.createElement(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 = __rest(_a, ["label", "value", "onClick", "onFocus", "ref"]);
+    return (React__default.createElement(Surface, { isTransparent: true },
+        React__default.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, __assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick, onFocus: onFocus }, filterAttrs(props)),
+            React__default.createElement(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 = __rest(_a, ["children", "value", "hidden", "forceMount"]);
@@ -83,14 +85,23 @@ var ContentSwitcherList = function (_a) {
                 "arc-ContentSwitcherList--isJustified": isJustified,
             }), ref: listRef, "aria-label": ariaLabel }, filterAttrs(props)),
             React__default.createElement("div", { className: "arc-ContentSwitcherList-inner" }, React__default.Children.map(children, function (child, index) {
-                if (tabRefs) {
+                if (!React__default.isValidElement(child)) {
+                    return null;
+                }
+                if (tabRefs.current[index] !== null) {
                     return React__default.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 });
                         },
                     });
                 }