@arc-ui/components 12.0.0-beta.22 → 12.0.0-beta.24

package/lib/_shared/cjs/Spinner-427lpnHI.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+
+/**
+ * Use `Spinner` to display a loading state.
+ */
+var Spinner = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? "m" : _b, color = _a.color, props = tslib_es6.__rest(_a, ["size", "color"]);
+    return (React.createElement("svg", tslib_es6.__assign({ className: index.classNames("arc-Spinner", "arc-Spinner-".concat(color), "arc-Spinner-size--".concat(size)), width: typeof size === "number" ? "".concat(size, "px") : undefined, "data-testid": "arc-Spinner", "aria-label": "loading", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg" }, filterAttrs.filterAttrs(props)),
+        React.createElement("circle", { cx: "24", cy: "24", fill: "none", r: "22", strokeWidth: "4", strokeLinecap: "round" })));
+};
+
+exports.Spinner = Spinner;

package/lib/_shared/cjs/{Surface-BFx1yNsq.cjs → Surface-DIU5ciDT.cjs}

@@ -1,9 +1,10 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
 var index$1 = require('./index-DR8Rkav9.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
 
 var defaultContext = { surface: "light" };
 var Context = React.createContext(defaultContext);
@@ -13,7 +14,7 @@ var Provider = Context.Provider;
  */
 var Surface = function (_a) {
     var _b;
-    var background = _a.background, children = _a.children, _c = _a.growVertically, growVertically = _c === void 0 ? false : _c, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, isTransparent = _a.isTransparent, props = filterAttrs.__rest(_a, ["background", "children", "growVertically", "padding", "paddingHorizontal", "paddingVertical", "isTransparent"]);
+    var background = _a.background, children = _a.children, _c = _a.growVertically, growVertically = _c === void 0 ? false : _c, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, isTransparent = _a.isTransparent, props = tslib_es6.__rest(_a, ["background", "children", "growVertically", "padding", "paddingHorizontal", "paddingVertical", "isTransparent"]);
     var surface = "light";
     if (background === "dark-black" ||
         background === "dark-brand-01" ||
@@ -23,7 +24,7 @@ var Surface = function (_a) {
         surface = "dark";
     }
     return (React.createElement(Provider, { value: { surface: surface } },
-        React.createElement("div", filterAttrs.__assign({ "data-testid": "arc-surface", className: index.classNames((_b = {
+        React.createElement("div", tslib_es6.__assign({ "data-testid": "arc-surface", className: index.classNames((_b = {
                     "arc-Surface": true
                 },
                 _b["arc-Surface--".concat(background && index$1.camelcase(background), "Background")] = background,
@@ -46,8 +47,8 @@ var backgroundsShared = [
     "light-neutral-02",
     "light-white",
 ];
-var backgrounds = filterAttrs.__spreadArray([], backgroundsShared, true);
-var backgroundsBT = filterAttrs.__spreadArray([], backgroundsShared, true);
+var backgrounds = tslib_es6.__spreadArray([], backgroundsShared, true);
+var backgroundsBT = tslib_es6.__spreadArray([], backgroundsShared, true);
 
 exports.Context = Context;
 exports.Surface = Surface;

package/lib/_shared/cjs/{TemplateBanner-CImrJ9ON.cjs → TemplateBanner-BlmWfDQD.cjs}

@@ -1,15 +1,16 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
-var VerticalSpace = require('./VerticalSpace-BJvST6WP.cjs');
-var Box = require('./Box-COPXU1Jf.cjs');
-var Heading = require('./Heading-BEMSkLYR.cjs');
-var GridRow = require('./GridRow-BW2ZGtND.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var VerticalSpace = require('./VerticalSpace-DLQUYsvc.cjs');
+var Box = require('./Box-Va2g7Gdp.cjs');
+var Heading = require('./Heading-CoiZ2EmD.cjs');
+var GridRow = require('./GridRow-l_SePUqV.cjs');
 require('./index-DR8Rkav9.cjs');
-var BannerImage = require('./BannerImage-kdAKagG-.cjs');
-var Visible = require('./Visible-vchtZSfm.cjs');
+var BannerImage = require('./BannerImage-qK8-w9rt.cjs');
+var Visible = require('./Visible-DZWtZ5qG.cjs');
 
 var BannerRow = function (_a) {
     var isReversed = _a.isReversed, children = _a.children;
@@ -21,7 +22,7 @@ var BannerRow = function (_a) {
 };
 
 var TemplateBanner = function (_a) {
-    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, _c = _a.alignment, alignment = _c === void 0 ? "center" : _c, additionalTopMargin = _a.additionalTopMargin, _d = _a.minHeight, minHeight = _d === void 0 ? 454 : _d, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _e = _a.headingSize, headingSize = _e === void 0 ? "xl" : _e, _f = _a.isReversed, isReversed = _f === void 0 ? false : _f, _g = _a.isElevated, isElevated = _g === void 0 ? false : _g, _h = _a.headingLevel, headingLevel = _h === void 0 ? "2" : _h, _j = _a.type, type = _j === void 0 ? "light" : _j, props = filterAttrs.__rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "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.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 backgrounds = {
         dark: "dark-brand-02",
         light: "light-white",
@@ -47,7 +48,7 @@ var TemplateBanner = function (_a) {
             ? "".concat(minHeightXL, "px")
             : "auto",
     };
-    return (React.createElement("div", filterAttrs.__assign({ style: templateBannerStyles, className: index.classNames("arc-TemplateBanner arc-TemplateBanner-background--".concat(type), {
+    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,
             "arc-TemplateBanner--minHeightL": minHeightL,
@@ -64,19 +65,19 @@ var TemplateBanner = function (_a) {
                                 "arc-TemplateBanner-content--additionalTopMargin": additionalTopMargin && alignment === "start",
                             }) },
                             label && (React.createElement(React.Fragment, null,
-                                React.createElement(Heading.Heading, { level: "3", fontStyle: "overline" }, label),
+                                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 }, heading),
+                            React.createElement(Heading.Heading, { level: headingLevel, size: headingSize, fontStyle: fontStyle, isWordWrap: false }, heading),
                             text && (React.createElement(React.Fragment, null,
                                 React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
                                 React.createElement("span", { className: "arc-TemplateBanner-text" }, text))),
-                            children && (React.createElement(React.Fragment, null,
+                            children && (React.createElement("span", null,
                                 React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
                                 children)))),
-                    img && contentRatio !== "1/0" && (React.createElement(GridRow.GridCol, filterAttrs.__assign({ "data-testid": "arc-TemplateBanner-imageCol", align: img.fit !== "cover"
+                    img && contentRatio !== "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 })),
-                        React.createElement(BannerImage.BannerImage, filterAttrs.__assign({ ariaHidden: true }, img)))))))));
+                        React.createElement(BannerImage.BannerImage, tslib_es6.__assign({ ariaHidden: true }, img)))))))));
 };
 
 exports.TemplateBanner = TemplateBanner;

package/lib/_shared/cjs/{Text-Cr5nmYmx.cjs → Text-jwsn80lQ.cjs}

@@ -1,20 +1,21 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
 var suffixModifier = require('./suffix-modifier-DLUGR-yG.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
 
 /**
  * Use `Text` to display text.
  */
 var Text = function (_a) {
     var _b;
-    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, id = _a.id, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, _h = _a.elementType, elementType = _h === void 0 ? "span" : _h, props = filterAttrs.__rest(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone", "elementType"]);
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, id = _a.id, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, _h = _a.elementType, elementType = _h === void 0 ? "span" : _h, props = tslib_es6.__rest(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone", "elementType"]);
     var surface = React.useContext(Surface.Context).surface;
     var Element = elementType;
-    return (React.createElement(Element, filterAttrs.__assign({ id: id, className: index.classNames((_b = {
+    return (React.createElement(Element, tslib_es6.__assign({ id: id, className: index.classNames((_b = {
                 "arc-Text": true
             },
             _b[suffixModifier.suffixModifier("arc-Text--align", align)] = align !== "left",

package/lib/_shared/cjs/{TextInput-ByySubi5.cjs → TextInput-B0JrZhOo.cjs}

@@ -1,13 +1,14 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
-var FormControl = require('./FormControl-BPnKQrCm.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
-var VisuallyHidden = require('./VisuallyHidden-B4XCvPYP.cjs');
-var ThemeIcon = require('./ThemeIcon-BoxbjTaQ.cjs');
-var Spinner = require('./Spinner-bbrOwxv2.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var FormControl = require('./FormControl-DiERJpGW.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
+var VisuallyHidden = require('./VisuallyHidden-CQg3cOVK.cjs');
+var ThemeIcon = require('./ThemeIcon-Def4RZfK.cjs');
+var Spinner = require('./Spinner-427lpnHI.cjs');
 
 /**
  * Infer the correct inputMode, pattern and type if specifying a `number` type.
@@ -38,7 +39,7 @@ var useNumericInput = function (props) {
 
 var TextInputComponent = React.forwardRef(function (_a, ref) {
     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, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _k = _a.inputAlignment, inputAlignment = _k === void 0 ? "left" : _k, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, props = filterAttrs.__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", "iconButton", "prefix", "suffix", "inputAlignment", "width", "autoComplete", "isLoading"]);
+    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, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _k = _a.inputAlignment, inputAlignment = _k === void 0 ? "left" : _k, width = _a.width, autoComplete = _a.autoComplete, isLoading = _a.isLoading, 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", "iconButton", "prefix", "suffix", "inputAlignment", "width", "autoComplete", "isLoading"]);
     var surface = React.useContext(Surface.Context).surface;
     var _l = React.useState(false), showPasswordToggle = _l[0], setShowPasswordToggle = _l[1];
     var inferredInputProps = useNumericInput({
@@ -48,8 +49,8 @@ var TextInputComponent = React.forwardRef(function (_a, ref) {
     });
     // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
     var ariaDescribedby = FormControl.useAriaDescribedby({
-        errorMessage: errorMessage,
         id: id,
+        errorMessage: errorMessage,
         helper: helper,
         disclosureText: disclosureText,
     }).ariaDescribedby;
@@ -63,7 +64,7 @@ var TextInputComponent = React.forwardRef(function (_a, ref) {
         m: 24,
         l: 32,
     };
-    return (React.createElement("div", filterAttrs.__assign({ className: index.classNames((_b = {
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames((_b = {
                 "arc-TextInput": true,
                 "arc-TextInput--withAdditionalControl": showPassword || iconButton,
                 "arc-TextInput--alignRight": inputAlignment === "right",
@@ -79,7 +80,7 @@ var TextInputComponent = React.forwardRef(function (_a, ref) {
         React.createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: size, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
             React.createElement("div", { className: "arc-TextInput-inputWrapper", style: { width: width, marginTop: hideLabel ? 0 : undefined } },
                 prefix && (React.createElement("span", { className: "arc-TextInput-prefix", "aria-hidden": true }, prefix)),
-                React.createElement("input", filterAttrs.__assign({ placeholder: placeholder, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled || isLoading, 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 || isLoading, 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)),
                 iconButton && !showPassword && (React.createElement("div", { className: "arc-TextInput-additionalControl" },
                     React.createElement("button", { ref: iconButton.ref, className: "arc-TextInput-iconButton", disabled: isReadOnly || isDisabled, "aria-label": iconButton.label, onFocus: iconButton.onFocus, onClick: function (e) {
                             e.preventDefault();
@@ -100,8 +101,8 @@ var TextInputComponent = React.forwardRef(function (_a, ref) {
 /**
  * Use `TextInput` to allow users to enter short form text.
  */
-var TextInput = React.forwardRef(function (props, ref) { return React.createElement(TextInputComponent, filterAttrs.__assign({ ref: ref }, props)); });
-var TextInputWithPlaceHolder = React.forwardRef(function (props, ref) { return React.createElement(TextInputComponent, filterAttrs.__assign({ ref: ref }, props)); });
+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)); });
 
 exports.TextInput = TextInput;
 exports.TextInputWithPlaceHolder = TextInputWithPlaceHolder;

package/lib/_shared/cjs/{ThemeIcon-BoxbjTaQ.cjs → ThemeIcon-Def4RZfK.cjs}

@@ -1,16 +1,17 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
 var suffixModifier = require('./suffix-modifier-DLUGR-yG.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
 
 var ThemeIcon = function (_a) {
     var _b;
-    var size = _a.size, icon = _a.icon, _c = _a.color, color = _c === void 0 ? "auto" : _c, props = filterAttrs.__rest(_a, ["size", "icon", "color"]);
+    var size = _a.size, icon = _a.icon, _c = _a.color, color = _c === void 0 ? "auto" : _c, props = tslib_es6.__rest(_a, ["size", "icon", "color"]);
     var surface = React.useContext(Surface.Context).surface;
-    return (React.createElement("span", filterAttrs.__assign({ style: {
+    return (React.createElement("span", tslib_es6.__assign({ style: {
             height: size,
             width: size,
         }, className: index.classNames("arc-ThemeIcon", "arc-ThemeIcon--".concat(icon), (_b = {

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

@@ -1,15 +1,16 @@
 'use client';
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-DXNM3D1d.cjs');
 var ReactDOM = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
 var index$1 = require('./index-B11wQrRa.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
-var Icon = require('./Icon-CzhyKqMd.cjs');
-var Text = require('./Text-Cr5nmYmx.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
+var Icon = require('./Icon-Dk2XHa7V.cjs');
+var Text = require('./Text-jwsn80lQ.cjs');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -1347,15 +1348,15 @@ var Arrow2 = TooltipArrow;
 
 /** Use `Tooltip` to display information related to an element when the element receives keyboard focus or the mouse hovers over it */
 var Tooltip = function (_a) {
-    var children = _a.children, side = _a.side, sideOffset = _a.sideOffset, align = _a.align, alignContent = _a.alignContent, title = _a.title, supportingCopy = _a.supportingCopy, icon = _a.icon, _b = _a.maxWidth, maxWidth = _b === void 0 ? "450px" : _b, _c = _a.delayDuration, delayDuration = _c === void 0 ? 300 : _c, open = _a.open, onOpenChange = _a.onOpenChange, _d = _a.asChild, asChild = _d === void 0 ? false : _d, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, props = filterAttrs.__rest(_a, ["children", "side", "sideOffset", "align", "alignContent", "title", "supportingCopy", "icon", "maxWidth", "delayDuration", "open", "onOpenChange", "asChild", "zIndex"]);
+    var children = _a.children, side = _a.side, sideOffset = _a.sideOffset, align = _a.align, alignContent = _a.alignContent, title = _a.title, supportingCopy = _a.supportingCopy, icon = _a.icon, ariaLabel = _a.ariaLabel, _b = _a.maxWidth, maxWidth = _b === void 0 ? "450px" : _b, _c = _a.delayDuration, delayDuration = _c === void 0 ? 300 : _c, open = _a.open, onOpenChange = _a.onOpenChange, _d = _a.asChild, asChild = _d === void 0 ? false : _d, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, props = tslib_es6.__rest(_a, ["children", "side", "sideOffset", "align", "alignContent", "title", "supportingCopy", "icon", "ariaLabel", "maxWidth", "delayDuration", "open", "onOpenChange", "asChild", "zIndex"]);
     var _f = index.useThemeElement(), themeElement = _f[0], setThemeElement = _f[1];
-    return (React.createElement("div", filterAttrs.__assign({}, filterAttrs.filterAttrs(props)),
+    return (React.createElement("div", tslib_es6.__assign({}, filterAttrs.filterAttrs(props)),
         React.createElement(TooltipProvider, null,
-            React.createElement(Root3, filterAttrs.__assign({ delayDuration: delayDuration, open: open, onOpenChange: onOpenChange }, filterAttrs.filterAttrs(props)),
-                React.createElement(Trigger, { asChild: asChild, className: "arc-Tooltip-trigger" }, children),
+            React.createElement(Root3, tslib_es6.__assign({ delayDuration: delayDuration, open: open, onOpenChange: onOpenChange }, filterAttrs.filterAttrs(props)),
+                React.createElement(Trigger, { asChild: asChild, "aria-label": ariaLabel, className: "arc-Tooltip-trigger" }, children),
                 React.createElement("div", { ref: setThemeElement },
                     React.createElement(Portal, { container: themeElement },
-                        React.createElement(Content2, filterAttrs.__assign({ side: side, sideOffset: sideOffset, align: align, alignOffset: align === "start" ? -4 : align === "end" ? -4 : undefined, style: { zIndex: zIndex } }, props),
+                        React.createElement(Content2, tslib_es6.__assign({ side: side, sideOffset: sideOffset, align: align, alignOffset: align === "start" ? -4 : align === "end" ? -4 : undefined, style: { zIndex: zIndex } }, props),
                             React.createElement(Surface.Surface, { background: "dark-neutral-01", isTransparent: true },
                                 React.createElement("div", { className: "arc-Tooltip-content", style: { maxWidth: maxWidth } },
                                     React.createElement("div", { className: "arc-Tooltip-title", style: {

package/lib/_shared/cjs/{VerticalSpace-BJvST6WP.cjs → VerticalSpace-DLQUYsvc.cjs}

@@ -1,16 +1,17 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
 
 /**
  * Use `VerticalSpace` to create vertical space between components.
  */
 var VerticalSpace = function (_a) {
     var _b;
-    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, sizeS = _a.sizeS, sizeM = _a.sizeM, sizeL = _a.sizeL, sizeXL = _a.sizeXL, props = filterAttrs.__rest(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL"]);
-    return (React.createElement("div", filterAttrs.__assign({ className: index.classNames((_b = {
+    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, sizeS = _a.sizeS, sizeM = _a.sizeM, sizeL = _a.sizeL, sizeXL = _a.sizeXL, sizeXXL = _a.sizeXXL, props = tslib_es6.__rest(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL", "sizeXXL"]);
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames((_b = {
                 "arc-VerticalSpace": true
             },
             _b["arc-VerticalSpace--size".concat(size)] = size,
@@ -18,6 +19,7 @@ var VerticalSpace = function (_a) {
             _b["arc-VerticalSpace--sizeM".concat(sizeM)] = sizeM,
             _b["arc-VerticalSpace--sizeL".concat(sizeL)] = sizeL,
             _b["arc-VerticalSpace--sizeXL".concat(sizeXL)] = sizeXL,
+            _b["arc-VerticalSpace--sizeXXL".concat(sizeXXL)] = sizeXXL,
             _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
             _b)) }, filterAttrs.filterAttrs(props))));
 };

package/lib/_shared/cjs/{Visible-vchtZSfm.cjs → Visible-DZWtZ5qG.cjs}

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

package/lib/_shared/cjs/VisuallyHidden-CQg3cOVK.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+
+/**
+ * Use `VisuallyHidden` to provide text for screen readers that is visually hidden on screen.
+ */
+var VisuallyHidden = function (_a) {
+    var children = _a.children, props = tslib_es6.__rest(_a, ["children"]);
+    return (React.createElement("span", tslib_es6.__assign({ "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, filterAttrs.filterAttrs(props)), children));
+};
+
+exports.VisuallyHidden = VisuallyHidden;

package/lib/_shared/cjs/{arc-breakpoints-DWUgmeLA.cjs → arc-breakpoints-BDA1EnFK.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index_es = require('./index.es-DlNskPlN.cjs');
+var index_es = require('./index.es-VcVPUNjD.cjs');
 
 /**
  * Provides an object of breakpoints for responsive designs.
@@ -19,5 +19,15 @@ var ArcBreakpoints = {
     s: parseInt(index_es.ArcSizeBreakpointsS, 10),
     xs: parseInt(index_es.ArcSizeBreakpointsXs, 10),
 };
+var ARC_MIN_S_BREAKPOINT = "(min-width: ".concat(index_es.ArcSizeBreakpointsS, ")");
+var ARC_MIN_M_BREAKPOINT = "(min-width: ".concat(index_es.ArcSizeBreakpointsM, ")");
+var ARC_MIN_L_BREAKPOINT = "(min-width: ".concat(index_es.ArcSizeBreakpointsL, ")");
+var ARC_MIN_XL_BREAKPOINT = "(min-width: ".concat(index_es.ArcSizeBreakpointsXl, ")");
+var ARC_MIN_XXL_BREAKPOINT = "(min-width: ".concat(index_es.ArcSizeBreakpointsXxl, ")");
 
+exports.ARC_MIN_L_BREAKPOINT = ARC_MIN_L_BREAKPOINT;
+exports.ARC_MIN_M_BREAKPOINT = ARC_MIN_M_BREAKPOINT;
+exports.ARC_MIN_S_BREAKPOINT = ARC_MIN_S_BREAKPOINT;
+exports.ARC_MIN_XL_BREAKPOINT = ARC_MIN_XL_BREAKPOINT;
+exports.ARC_MIN_XXL_BREAKPOINT = ARC_MIN_XXL_BREAKPOINT;
 exports.ArcBreakpoints = ArcBreakpoints;

package/lib/_shared/cjs/filter-attrs-D19P2s1V.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+// src/filter-attrs/filter-attrs.ts
+var attributePrefixes = ["data-", "aria-"];
+var filterAttrs = (props) => {
+  const filteredProps = {};
+  for (const prop in props) {
+    if (Object.prototype.hasOwnProperty.call(props, prop) && attributePrefixes.some((prefix) => prop.startsWith(prefix))) {
+      filteredProps[prop] = props[prop];
+    }
+  }
+  return filteredProps;
+};
+
+exports.filterAttrs = filterAttrs;

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

@@ -2,7 +2,7 @@
 'use strict';
 
 var React = require('react');
-var Combination = require('./Combination-B-rSVLfT.cjs');
+var Combination = require('./Combination-6m6aOXZq.cjs');
 var index = require('./index-DXNM3D1d.cjs');
 
 function _interopNamespaceDefault(e) {

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

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

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

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

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

@@ -3,7 +3,7 @@
 
 var React = require('react');
 var index = require('./index-DXNM3D1d.cjs');
-var Combination = require('./Combination-B-rSVLfT.cjs');
+var Combination = require('./Combination-6m6aOXZq.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespaceDefault(e) {

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

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

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

@@ -3,7 +3,7 @@
 
 var React = require('react');
 var index$1 = require('./index-B11wQrRa.cjs');
-var Combination = require('./Combination-B-rSVLfT.cjs');
+var Combination = require('./Combination-6m6aOXZq.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var index = require('./index-DXNM3D1d.cjs');
 

package/lib/_shared/cjs/{index.es-DlNskPlN.cjs → index.es-VcVPUNjD.cjs}

@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 15 Aug 2025 18:14:58 GMT
+ * Generated on Fri, 24 Oct 2025 10:49:57 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";

package/lib/_shared/cjs/{filter-attrs-eK6E_34o.cjs → tslib.es6-CCZ3TN_7.cjs}

@@ -55,18 +55,5 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-// src/filter-attrs/filter-attrs.ts
-var attributePrefixes = ["data-", "aria-"];
-var filterAttrs = (props) => {
-  const filteredProps = {};
-  for (const prop in props) {
-    if (Object.prototype.hasOwnProperty.call(props, prop) && attributePrefixes.some((prefix) => prop.startsWith(prefix))) {
-      filteredProps[prop] = props[prop];
-    }
-  }
-  return filteredProps;
-};
-
 exports.__rest = __rest;
 exports.__spreadArray = __spreadArray;
-exports.filterAttrs = filterAttrs;

package/lib/_shared/cjs/use-media-query-DqZqShGX.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+var React = require('react');
+
+var IS_SERVER = typeof window === "undefined";
+/**
+ * @typedef MediaQueryOutputs
+ * @param {boolean} matches - does the document match the media query?
+ */
+/**
+ * Handle with care!
+ *
+ * If you need to change something in the browser based on @media query, you
+ * probably don’t need this hook. Use CSS media queries instead.
+ *
+ * Sometimes UI requirements are not achievable with CSS media queries alone. In
+ * these rare cases, use this hook to make media query matches available
+ * to React JavaScript code.
+ *
+ * @param {string} mediaQuery - the media query to parse
+ * @returns {MediaQueryOutputs}
+ */
+var useMediaQuery = function (mediaQuery) {
+    var getMatches = function (query) {
+        if (IS_SERVER) {
+            return false;
+        }
+        return window.matchMedia(query).matches;
+    };
+    var _a = React.useState(false), matches = _a[0], setMatches = _a[1];
+    // Handles the change event of the media query.
+    var handleChange = function () {
+        setMatches(getMatches(mediaQuery));
+    };
+    React.useEffect(function () {
+        var matchMedia = window.matchMedia(mediaQuery);
+        // Triggered at the first client-side load and if query changes
+        handleChange();
+        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+        if (matchMedia.addListener) {
+            matchMedia.addListener(handleChange);
+        }
+        else {
+            matchMedia.addEventListener("change", handleChange);
+        }
+        return function () {
+            if (matchMedia.removeListener) {
+                matchMedia.removeListener(handleChange);
+            }
+            else {
+                matchMedia.removeEventListener("change", handleChange);
+            }
+        };
+    }, [mediaQuery]);
+    return matches;
+};
+
+exports.useMediaQuery = useMediaQuery;

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

@@ -1,11 +1,12 @@
-import { a as __assign, _ as __rest, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { a as __assign, _ as __rest } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 import { C as ConditionalWrapper } from './ConditionalWrapper-WoJxFYwS.mjs';
-import { V as VisuallyHidden } from './VisuallyHidden-DqAgoqJo.mjs';
-import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
-import { I as Image } from './Image-Dl8oH1Rn.mjs';
-import { H as Heading } from './Heading-CxHWefi7.mjs';
+import { V as VisuallyHidden } from './VisuallyHidden-aSQ4RA1o.mjs';
+import { T as ThemeIcon } from './ThemeIcon-B0SruPZC.mjs';
+import { I as Image } from './Image-LemsonUX.mjs';
+import { H as Heading } from './Heading-B9cbwfoz.mjs';
 
 var AvatarContent = function (_a) {
     var img = _a.img, initials = _a.initials, _b = _a.size, size = _b === void 0 ? "xl" : _b;

package/lib/_shared/esm/{Badge-BZ7E0zcQ.mjs → Badge-C_3PBa0p.mjs}

@@ -1,7 +1,8 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default 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';
 
 /** Use `Badge` as a static, non-interactive way to provide short updates. */
 var Badge = function (_a) {

package/lib/_shared/esm/{BannerImage-BTsixvUH.mjs → BannerImage-CgjgaYkJ.mjs}

@@ -1,6 +1,6 @@
-import { _ as __rest, a as __assign } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default from 'react';
-import { I as Image } from './Image-Dl8oH1Rn.mjs';
+import { I as Image } from './Image-LemsonUX.mjs';
 
 var BannerImage = function (_a) {
     var sources = _a.sources, ariaHidden = _a.ariaHidden, props = __rest(_a, ["sources", "ariaHidden"]);