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

package/lib/_shared/cjs/{Popover-C5mmMkYU.cjs → Popover-hpvmhKV8.cjs}

@@ -1,18 +1,19 @@
 '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$2 = require('./index-CTlXMLug.cjs');
-var index$1 = require('./index-CaO6cOF0.cjs');
+var index$1 = require('./index-BWfgSvRQ.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
 var index = require('./index-DXNM3D1d.cjs');
-var Surface = require('./Surface-BFx1yNsq.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, onCloseAutoFocus = _a.onCloseAutoFocus, onEscapeKeyDown = _a.onEscapeKeyDown, onFocusOutside = _a.onFocusOutside, onInteractOutside = _a.onInteractOutside, onOpenAutoFocus = _a.onOpenAutoFocus, onPointerDownOutside = _a.onPointerDownOutside, onOpenChange = _a.onOpenChange, open = _a.open, side = _a.side, _f = _a.sideOffset, sideOffset = _f === void 0 ? 0 : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.hideWhenDetached, hideWhenDetached = _h === void 0 ? false : _h, _j = _a.useBespokeTrigger, useBespokeTrigger = _j === void 0 ? false : _j, props = filterAttrs.__rest(_a, ["align", "ariaLabel", "alignOffset", "arrow", "background", "children", "content", "asChild", "maxWidth", "onCloseAutoFocus", "onEscapeKeyDown", "onFocusOutside", "onInteractOutside", "onOpenAutoFocus", "onPointerDownOutside", "onOpenChange", "open", "side", "sideOffset", "zIndex", "hideWhenDetached", "useBespokeTrigger"]);
-    var _k = index.useThemeElement(), themeElement = _k[0], setThemeElement = _k[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, 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 alignOffsetDefault = align === "center" ? 0 : -16;
-    return (React.createElement("div", filterAttrs.__assign({ className: "arc-Popover" }, filterAttrs.filterAttrs(props)),
+    return (React.createElement("div", tslib_es6.__assign({ className: "arc-Popover" }, filterAttrs.filterAttrs(props)),
         React.createElement(index$1.Root2, { open: open, onOpenChange: onOpenChange },
             useBespokeTrigger ? (React.createElement(index$1.Anchor2, { className: "arc-Popover-anchor" }, children)) : (React.createElement(index$1.Trigger, { "aria-label": ariaLabel, asChild: asChild, className: "arc-Popover-trigger" }, children)),
             React.createElement("div", { ref: setThemeElement },
@@ -23,7 +24,8 @@ var Popover = function (_a) {
                                 React.createElement("div", { className: index$2.classNames("arc-Popover-content", {
                                         "arc-Popover-content--dark": background === "dark",
                                         "arc-Popover-content--brand": background === "brand",
-                                    }), style: { maxWidth: maxWidth }, "aria-labelledby": "popover-content" },
+                                        "arc-Popover-content--constrainToViewport": constrainToViewport,
+                                    }), 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-BL9Y5c4X.cjs → ProgressStepper-DTZQabiV.cjs}

@@ -1,12 +1,144 @@
 '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-CqYNiqix.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
 var capitaliseFirstLetter = require('./capitalise-first-letter-CdhexpSx.cjs');
-var VisuallyHidden = require('./VisuallyHidden-B4XCvPYP.cjs');
-var Icon = require('./Icon-CzhyKqMd.cjs');
+var VisuallyHidden = require('./VisuallyHidden-CQg3cOVK.cjs');
+var Icon = require('./Icon-Dk2XHa7V.cjs');
+
+var shorterCssColorNames;
+var hasRequiredShorterCssColorNames;
+
+function requireShorterCssColorNames () {
+	if (hasRequiredShorterCssColorNames) return shorterCssColorNames;
+	hasRequiredShorterCssColorNames = 1;
+	shorterCssColorNames = {
+	  aqua: /#00ffff(ff)?(?!\w)|#0ff(f)?(?!\w)/gi,
+	  azure: /#f0ffff(ff)?(?!\w)/gi,
+	  beige: /#f5f5dc(ff)?(?!\w)/gi,
+	  bisque: /#ffe4c4(ff)?(?!\w)/gi,
+	  black: /#000000(ff)?(?!\w)|#000(f)?(?!\w)/gi,
+	  blue: /#0000ff(ff)?(?!\w)|#00f(f)?(?!\w)/gi,
+	  brown: /#a52a2a(ff)?(?!\w)/gi,
+	  coral: /#ff7f50(ff)?(?!\w)/gi,
+	  cornsilk: /#fff8dc(ff)?(?!\w)/gi,
+	  crimson: /#dc143c(ff)?(?!\w)/gi,
+	  cyan: /#00ffff(ff)?(?!\w)|#0ff(f)?(?!\w)/gi,
+	  darkblue: /#00008b(ff)?(?!\w)/gi,
+	  darkcyan: /#008b8b(ff)?(?!\w)/gi,
+	  darkgrey: /#a9a9a9(ff)?(?!\w)/gi,
+	  darkred: /#8b0000(ff)?(?!\w)/gi,
+	  deeppink: /#ff1493(ff)?(?!\w)/gi,
+	  dimgrey: /#696969(ff)?(?!\w)/gi,
+	  gold: /#ffd700(ff)?(?!\w)/gi,
+	  green: /#008000(ff)?(?!\w)/gi,
+	  grey: /#808080(ff)?(?!\w)/gi,
+	  honeydew: /#f0fff0(ff)?(?!\w)/gi,
+	  hotpink: /#ff69b4(ff)?(?!\w)/gi,
+	  indigo: /#4b0082(ff)?(?!\w)/gi,
+	  ivory: /#fffff0(ff)?(?!\w)/gi,
+	  khaki: /#f0e68c(ff)?(?!\w)/gi,
+	  lavender: /#e6e6fa(ff)?(?!\w)/gi,
+	  lime: /#00ff00(ff)?(?!\w)|#0f0(f)?(?!\w)/gi,
+	  linen: /#faf0e6(ff)?(?!\w)/gi,
+	  maroon: /#800000(ff)?(?!\w)/gi,
+	  moccasin: /#ffe4b5(ff)?(?!\w)/gi,
+	  navy: /#000080(ff)?(?!\w)/gi,
+	  oldlace: /#fdf5e6(ff)?(?!\w)/gi,
+	  olive: /#808000(ff)?(?!\w)/gi,
+	  orange: /#ffa500(ff)?(?!\w)/gi,
+	  orchid: /#da70d6(ff)?(?!\w)/gi,
+	  peru: /#cd853f(ff)?(?!\w)/gi,
+	  pink: /#ffc0cb(ff)?(?!\w)/gi,
+	  plum: /#dda0dd(ff)?(?!\w)/gi,
+	  purple: /#800080(ff)?(?!\w)/gi,
+	  red: /#ff0000(ff)?(?!\w)|#f00(f)?(?!\w)/gi,
+	  salmon: /#fa8072(ff)?(?!\w)/gi,
+	  seagreen: /#2e8b57(ff)?(?!\w)/gi,
+	  seashell: /#fff5ee(ff)?(?!\w)/gi,
+	  sienna: /#a0522d(ff)?(?!\w)/gi,
+	  silver: /#c0c0c0(ff)?(?!\w)/gi,
+	  skyblue: /#87ceeb(ff)?(?!\w)/gi,
+	  snow: /#fffafa(ff)?(?!\w)/gi,
+	  tan: /#d2b48c(ff)?(?!\w)/gi,
+	  teal: /#008080(ff)?(?!\w)/gi,
+	  thistle: /#d8bfd8(ff)?(?!\w)/gi,
+	  tomato: /#ff6347(ff)?(?!\w)/gi,
+	  violet: /#ee82ee(ff)?(?!\w)/gi,
+	  wheat: /#f5deb3(ff)?(?!\w)/gi,
+	  white: /#ffffff(ff)?(?!\w)|#fff(f)?(?!\w)/gi,
+	};
+	return shorterCssColorNames;
+}
+
+var miniSvgDataUri;
+var hasRequiredMiniSvgDataUri;
+
+function requireMiniSvgDataUri () {
+	if (hasRequiredMiniSvgDataUri) return miniSvgDataUri;
+	hasRequiredMiniSvgDataUri = 1;
+	var shorterNames = requireShorterCssColorNames();
+	var REGEX = {
+	  whitespace: /\s+/g,
+	  urlHexPairs: /%[\dA-F]{2}/g,
+	  quotes: /"/g,
+	};
+
+	function collapseWhitespace(str) {
+	  return str.trim().replace(REGEX.whitespace, ' ');
+	}
+
+	function dataURIPayload(string) {
+	  return encodeURIComponent(string)
+	    .replace(REGEX.urlHexPairs, specialHexEncode);
+	}
+
+	// `#` gets converted to `%23`, so quite a few CSS named colors are shorter than
+	// their equivalent URL-encoded hex codes.
+	function colorCodeToShorterNames(string) {
+	  Object.keys(shorterNames).forEach(function(key) {
+	    if (shorterNames[key].test(string)) {
+	      string = string.replace(shorterNames[key], key);
+	    }
+	  });
+
+	  return string;
+	}
+
+	function specialHexEncode(match) {
+	  switch (match) { // Browsers tolerate these characters, and they're frequent
+	    case '%20': return ' ';
+	    case '%3D': return '=';
+	    case '%3A': return ':';
+	    case '%2F': return '/';
+	    default: return match.toLowerCase(); // compresses better
+	  }
+	}
+
+	function svgToTinyDataUri(svgString) {
+	  if (typeof svgString !== 'string') {
+	    throw new TypeError('Expected a string, but received ' + typeof svgString);
+	  }
+	  // Strip the Byte-Order Mark if the SVG has one
+	  if (svgString.charCodeAt(0) === 0xfeff) { svgString = svgString.slice(1); }
+
+	  var body = colorCodeToShorterNames(collapseWhitespace(svgString))
+	    .replace(REGEX.quotes, "'");
+	  return 'data:image/svg+xml,' + dataURIPayload(body);
+	}
+
+	svgToTinyDataUri.toSrcset = function toSrcset(svgString) {
+	  return svgToTinyDataUri(svgString).replace(/ /g, '%20');
+	};
+
+	miniSvgDataUri = svgToTinyDataUri;
+	return miniSvgDataUri;
+}
+
+var miniSvgDataUriExports = requireMiniSvgDataUri();
+var svgToMiniDataURI = /*@__PURE__*/index.getDefaultExportFromCjs(miniSvgDataUriExports);
 
 var Error = "\n  <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <g clipPath=\"url(#a)\">\n      <path\n        d=\"m13.06 12 2.845-2.845a.75.75 0 0 0-1.06-1.06L12 10.94 9.155 8.095a.75.75 0 0 0-1.06 1.06L10.939 12l-2.844 2.845a.75.75 0 1 0 1.06 1.06L12 13.061l2.845 2.844a.75.75 0 0 0 1.06-1.06L13.06 12Z\"\n        fill=\"currentColor\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"a\">\n        <rect width=\"24\" height=\"24\" rx=\"12\" />\n      </clipPath>\n    </defs>\n  </svg>\n  ";
 
@@ -18,7 +150,7 @@ var Current = "\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w
 
 var ProgressStepperItem = function (_a) {
     var _b;
-    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.status, status = _d === void 0 ? "todo" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, isFluid = _a.isFluid, invertLabelPosition = _a.invertLabelPosition, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = filterAttrs.__rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "invertLabelPosition", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden"]);
+    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.status, status = _d === void 0 ? "todo" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, isFluid = _a.isFluid, invertLabelPosition = _a.invertLabelPosition, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = tslib_es6.__rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "invertLabelPosition", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden"]);
     var statusIcons = {
         todo: undefined,
         completed: Complete,
@@ -31,7 +163,7 @@ var ProgressStepperItem = function (_a) {
         onClick && onClick();
     };
     var statusIcon = statusIcons[status];
-    return (React.createElement("div", filterAttrs.__assign({ className: index.classNames("arc-ProgressStepperItem", "arc-ProgressStepperItem--".concat(status), "arc-ProgressStepperItem--".concat(size), (_b = {
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames("arc-ProgressStepperItem", "arc-ProgressStepperItem--".concat(status), "arc-ProgressStepperItem--".concat(size), (_b = {
                 "arc-ProgressStepperItem--vertical": direction === "vertical",
                 "arc-ProgressStepperItem--isFluid": isFluid && direction !== "vertical",
                 "arc-ProgressStepperItem--previousStepCompleted": previousStep === "completed"
@@ -43,7 +175,7 @@ var ProgressStepperItem = function (_a) {
             React.createElement("div", { className: "arc-ProgressStepperItem-iconWrapper", "data-testid": "arc-ProgressStepperItem-iconWrapper" },
                 React.createElement("span", { className: index.classNames("arc-ProgressStepperItem-statusIcon", {
                         "arc-ProgressStepperItem-statusIcon--small": size === "small",
-                    }) }, status === "todo" ? null : status === "current" ? (React.createElement("div", { className: "arc-ProgressStepperItem-statusIconInner" })) : (React.createElement(Icon.Icon, { icon: statusIcon && index$1.svgToMiniDataURI(statusIcon) }))))),
+                    }) }, status === "todo" ? null : status === "current" ? (React.createElement("div", { className: "arc-ProgressStepperItem-statusIconInner" })) : (React.createElement(Icon.Icon, { icon: statusIcon && svgToMiniDataURI(statusIcon) }))))),
         React.createElement("div", { className: "arc-ProgressStepperItem-textSection" },
             titleHref || onClick ? (React.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, "aria-label": ariaLabel, className: index.classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler },
                 title,
@@ -61,16 +193,16 @@ var ProgressStepperItem = function (_a) {
 
 /** Use `ProgressStepper` to provide an overview of a series of steps in a digital journey. */
 var ProgressStepper = function (_a) {
-    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, invertLabelPosition = _a.invertLabelPosition, ref = _a.ref, props = filterAttrs.__rest(_a, ["children", "size", "isFluid", "direction", "isExpandable", "invertLabelPosition", "ref"]);
+    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, invertLabelPosition = _a.invertLabelPosition, ref = _a.ref, props = tslib_es6.__rest(_a, ["children", "size", "isFluid", "direction", "isExpandable", "invertLabelPosition", "ref"]);
     var items = React.Children.toArray(children);
     var getStepStatus = function (item) {
         var _a;
         return (_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.status;
     };
-    return (React.createElement("div", filterAttrs.__assign({ ref: ref, className: index.classNames("arc-ProgressStepper", {
+    return (React.createElement("div", tslib_es6.__assign({ ref: ref, className: index.classNames("arc-ProgressStepper", {
             "arc-ProgressStepper--vertical": direction === "vertical",
         }) }, filterAttrs.filterAttrs(props)), items.map(function (item, index) { return (React.createElement(React.Fragment, { key: "StepperItem-".concat(index) },
-        React.createElement(ProgressStepperItem, filterAttrs.__assign({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, invertLabelPosition: invertLabelPosition, direction: direction, isExpandable: isExpandable, size: size, previousStep: getStepStatus(items[index - 1]) }, filterAttrs.filterAttrs(item.props))))); })));
+        React.createElement(ProgressStepperItem, tslib_es6.__assign({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, invertLabelPosition: invertLabelPosition, direction: direction, isExpandable: isExpandable, size: size, previousStep: getStepStatus(items[index - 1]) }, filterAttrs.filterAttrs(item.props))))); })));
 };
 
 exports.ProgressStepper = ProgressStepper;

package/lib/_shared/cjs/{Rule-DMQsi2L6.cjs → Rule-jmvOpci7.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 Surface = require('./Surface-BFx1yNsq.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+var Surface = require('./Surface-DIU5ciDT.cjs');
 
 /**
  * Use `Rule` to display a horizontal or vertical rule.
@@ -12,7 +13,7 @@ var Rule = function (_a, props) {
     var _b;
     var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
     var surface = React.useContext(Surface.Context).surface;
-    return (React.createElement("hr", filterAttrs.__assign({ className: index.classNames((_b = {
+    return (React.createElement("hr", tslib_es6.__assign({ className: index.classNames((_b = {
                 "arc-Rule": true
             },
             _b["arc-Rule--".concat(orientation)] = true,

package/lib/_shared/cjs/{Section-Bz2fwj8Z.cjs → Section-BorWFfNe.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 filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
 
 /**
  * Use `Section` to compose content into vertical page layouts.
  */
 var Section = function (_a) {
-    var children = _a.children, _b = _a.isFullWidth, isFullWidth = _b === void 0 ? false : _b, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.isExtended, isExtended = _d === void 0 ? false : _d, id = _a.id, props = filterAttrs.__rest(_a, ["children", "isFullWidth", "isDebugVisible", "isExtended", "id"]);
-    return (React.createElement("div", filterAttrs.__assign({ id: id, className: index.classNames({
+    var children = _a.children, _b = _a.isFullWidth, isFullWidth = _b === void 0 ? false : _b, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.isExtended, isExtended = _d === void 0 ? false : _d, id = _a.id, props = tslib_es6.__rest(_a, ["children", "isFullWidth", "isDebugVisible", "isExtended", "id"]);
+    return (React.createElement("div", tslib_es6.__assign({ id: id, className: index.classNames({
             "arc-Section": true,
             "arc-Section--regular": !isExtended,
             "arc-Section--extended": isExtended,

package/lib/_shared/cjs/SemanticHeading-BPXN_z49.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+
+var SemanticHeading = function (_a) {
+    var children = _a.children, level = _a.level, className = _a.className, props = tslib_es6.__rest(_a, ["children", "level", "className"]);
+    return React.createElement(level ? "h".concat(level) : "span", tslib_es6.__assign({ className: index.classNames("arc-SemanticHeading", className) }, props), children);
+};
+
+exports.SemanticHeading = SemanticHeading;

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-COymAI91.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, _b = _a.labelLevel, labelLevel = _b === void 0 ? "3" : _b, text = _a.text, img = _a.img, _c = _a.contentRatio, contentRatio = _c === void 0 ? "1/1" : _c, children = _a.children, _d = _a.alignment, alignment = _d === void 0 ? "center" : _d, additionalTopMargin = _a.additionalTopMargin, _e = _a.minHeight, minHeight = _e === void 0 ? 454 : _e, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _f = _a.headingSize, headingSize = _f === void 0 ? "xl" : _f, _g = _a.isReversed, isReversed = _g === void 0 ? false : _g, _h = _a.isElevated, isElevated = _h === void 0 ? false : _h, _j = _a.headingLevel, headingLevel = _j === void 0 ? "2" : _j, _k = _a.type, type = _k === void 0 ? "light" : _k, props = filterAttrs.__rest(_a, ["heading", "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.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: labelLevel, 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: {