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

package/lib/_shared/esm/{Image-Dl8oH1Rn.mjs → Image-LemsonUX.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, { useState } 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 `Image` to render a single image, or set of images, with support for
@@ -9,7 +10,7 @@ import { s as suffixModifier } from './suffix-modifier-B_pO0UkF.mjs';
  */
 var Image = function (_a) {
     var _b;
-    var alt = _a.alt, _c = _a.fadeOnLoad, fadeOnLoad = _c === void 0 ? false : _c, _d = _a.anchor, anchor = _d === void 0 ? "C" : _d, children = _a.children, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = __rest(_a, ["alt", "fadeOnLoad", "anchor", "children", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
+    var alt = _a.alt, _c = _a.fadeOnLoad, fadeOnLoad = _c === void 0 ? false : _c, _d = _a.anchor, anchor = _d === void 0 ? "C" : _d, children = _a.children, fetchPriority = _a.fetchPriority, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = __rest(_a, ["alt", "fadeOnLoad", "anchor", "children", "fetchPriority", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
     var _e = useState(false), visible = _e[0], setVisible = _e[1];
     var imageRef = function (el) {
         if (el) {
@@ -20,7 +21,7 @@ var Image = function (_a) {
         "arc-Image-img--fade": fadeOnLoad,
         "arc-Image-img--fadeVisible": fadeOnLoad && visible,
     };
-    var img = (React__default.createElement("img", { ref: imageRef, className: classNames("arc-Image-img", animationClasses), alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width }));
+    var img = (React__default.createElement("img", { ref: imageRef, className: classNames("arc-Image-img", animationClasses), alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width, fetchPriority: fetchPriority }));
     return (React__default.createElement("div", __assign({ className: classNames((_b = {
                 "arc-Image": true,
                 "arc-Image--cover": fit === "cover"

package/lib/_shared/esm/{Link-Biyg9qBH.mjs → Link-ogbR4K3O.mjs}

@@ -1,9 +1,10 @@
-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, { useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { C as Context } from './Surface-Colbp3Zx.mjs';
-import { V as VisuallyHidden } from './VisuallyHidden-DqAgoqJo.mjs';
-import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { C as Context } from './Surface-C69KVzkY.mjs';
+import { V as VisuallyHidden } from './VisuallyHidden-aSQ4RA1o.mjs';
+import { T as ThemeIcon } from './ThemeIcon-B0SruPZC.mjs';
 
 /**
  * Use `Link` to direct users to a new page or piece of information.
@@ -31,7 +32,9 @@ var Link = function (_a) {
     };
     var LinkElement = isButton ? "button" : href ? "a" : "span";
     return (React__default.createElement(LinkElement, __assign({}, elementProps[LinkElement], filterAttrs(props)),
-        React__default.createElement("div", { className: "arc-Link-wrapper" },
+        React__default.createElement("div", { className: classNames("arc-Link-wrapper", {
+                "arc-Link--isButton": isButton,
+            }) },
             React__default.createElement(VisuallyHidden, null,
                 screenReaderText || children,
                 isExternalLink && " (Opens in new window)"),

package/lib/_shared/esm/{Popover-8FfvgL4c.mjs → Popover-D0ePWPz_.mjs}

@@ -1,14 +1,15 @@
-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 { R as Root2, A as Anchor2, T as Trigger, P as Portal, C as Content2, a as PopoverArrow } from './index-CxrL7jIX.mjs';
+import { R as Root2, A as Anchor2, T as Trigger, P as Portal, C as Content2, a as PopoverArrow } from './index-Do2wfP-X.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 import { e as useThemeElement } from './index-Bz2JQq34.mjs';
-import { S as Surface } from './Surface-Colbp3Zx.mjs';
+import { S as Surface } from './Surface-C69KVzkY.mjs';
 
 /** 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 = __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 = 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 = __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 = useThemeElement(), themeElement = _l[0], setThemeElement = _l[1];
     var alignOffsetDefault = align === "center" ? 0 : -16;
     return (React__default.createElement("div", __assign({ className: "arc-Popover" }, filterAttrs(props)),
         React__default.createElement(Root2, { open: open, onOpenChange: onOpenChange },
@@ -21,7 +22,8 @@ var Popover = function (_a) {
                                 React__default.createElement("div", { className: 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__default.createElement("div", { id: "popover-content" }, content),
                                     arrow && (React__default.createElement(PopoverArrow, { className: "arc-Popover-arrow" })))))))))));
 };

package/lib/_shared/esm/{ProgressStepper-CLBtBNy2.mjs → ProgressStepper-CujHLQsm.mjs}

@@ -1,10 +1,142 @@
-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 svgToMiniDataURI } from './index-CL6dwOYV.mjs';
+import { g as getDefaultExportFromCjs, c as classNames } from './index-5C0-U8cc.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 import { c as capitaliseFirstLetter } from './capitalise-first-letter-Cubg2CS1.mjs';
-import { V as VisuallyHidden } from './VisuallyHidden-DqAgoqJo.mjs';
-import { I as Icon } from './Icon-CcPOJcQm.mjs';
+import { V as VisuallyHidden } from './VisuallyHidden-aSQ4RA1o.mjs';
+import { I as Icon } from './Icon-CCUbr_AO.mjs';
+
+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__*/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  ";
 

package/lib/_shared/esm/{Rule-3gdMHH-R.mjs → Rule-I1w3EaZi.mjs}

@@ -1,7 +1,8 @@
-import { a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { C as Context } from './Surface-Colbp3Zx.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { C as Context } from './Surface-C69KVzkY.mjs';
 
 /**
  * Use `Rule` to display a horizontal or vertical rule.

package/lib/_shared/esm/{Section-DDygQ5Az.mjs → Section-COc1l3mp.mjs}

@@ -1,13 +1,14 @@
-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 { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 
 /**
  * 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, props = __rest(_a, ["children", "isFullWidth", "isDebugVisible", "isExtended"]);
-    return (React__default.createElement("div", __assign({ className: 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 = __rest(_a, ["children", "isFullWidth", "isDebugVisible", "isExtended", "id"]);
+    return (React__default.createElement("div", __assign({ id: id, className: classNames({
             "arc-Section": true,
             "arc-Section--regular": !isExtended,
             "arc-Section--extended": isExtended,

package/lib/_shared/esm/SemanticHeading-1tLcSJYD.mjs

@@ -0,0 +1,10 @@
+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';
+
+var SemanticHeading = function (_a) {
+    var children = _a.children, level = _a.level, className = _a.className, props = __rest(_a, ["children", "level", "className"]);
+    return React__default.createElement(level ? "h".concat(level) : "span", __assign({ className: classNames("arc-SemanticHeading", className) }, props), children);
+};
+
+export { SemanticHeading as S };

package/lib/_shared/esm/{Spinner-Cd7LiPTy.mjs → Spinner-DvngCIwx.mjs}

@@ -1,6 +1,7 @@
-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 { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 
 /**
  * Use `Spinner` to display a loading state.

package/lib/_shared/esm/{Surface-Colbp3Zx.mjs → Surface-C69KVzkY.mjs}

@@ -1,7 +1,8 @@
-import { b as __spreadArray, _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { b as __spreadArray, _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { createContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { c as camelcase } from './index-Spae4j7j.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 
 var defaultContext = { surface: "light" };
 var Context = createContext(defaultContext);

package/lib/_shared/esm/{TemplateBanner-DeHjliNP.mjs → TemplateBanner-DEYOSosH.mjs}

@@ -1,13 +1,14 @@
-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 { V as VerticalSpace } from './VerticalSpace-Duhm0zXP.mjs';
-import { B as Box } from './Box-BYm_GTct.mjs';
-import { H as Heading } from './Heading-CxHWefi7.mjs';
-import { b as GridRow, G as Grid, a as GridCol } from './GridRow-Ddt5CtFn.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { V as VerticalSpace } from './VerticalSpace-BLWB02I7.mjs';
+import { B as Box } from './Box-C8iK8x5c.mjs';
+import { H as Heading } from './Heading-B9cbwfoz.mjs';
+import { b as GridRow, G as Grid, a as GridCol } from './GridRow-vjacXnq0.mjs';
 import './index-Spae4j7j.mjs';
-import { B as BannerImage } from './BannerImage-BTsixvUH.mjs';
-import { V as Visible } from './Visible-B13QJn7R.mjs';
+import { B as BannerImage } from './BannerImage-CgjgaYkJ.mjs';
+import { V as Visible } from './Visible-B0d79VWZ.mjs';
 
 var BannerRow = function (_a) {
     var isReversed = _a.isReversed, children = _a.children;
@@ -19,7 +20,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 = __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 = __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",
@@ -62,13 +63,13 @@ var TemplateBanner = function (_a) {
                                 "arc-TemplateBanner-content--additionalTopMargin": additionalTopMargin && alignment === "start",
                             }) },
                             label && (React__default.createElement(React__default.Fragment, null,
-                                React__default.createElement(Heading, { level: "3", fontStyle: "overline" }, label),
+                                React__default.createElement(Heading, { level: labelLevel, fontStyle: "overline", isWordWrap: false }, label),
                                 React__default.createElement(VerticalSpace, { size: "8" }))),
-                            React__default.createElement(Heading, { level: headingLevel, size: headingSize }, heading),
+                            React__default.createElement(Heading, { level: headingLevel, size: headingSize, fontStyle: fontStyle, isWordWrap: false }, heading),
                             text && (React__default.createElement(React__default.Fragment, null,
                                 React__default.createElement(VerticalSpace, { size: "16" }),
                                 React__default.createElement("span", { className: "arc-TemplateBanner-text" }, text))),
-                            children && (React__default.createElement(React__default.Fragment, null,
+                            children && (React__default.createElement("span", null,
                                 React__default.createElement(VerticalSpace, { size: "32" }),
                                 children)))),
                     img && contentRatio !== "1/0" && (React__default.createElement(GridCol, __assign({ "data-testid": "arc-TemplateBanner-imageCol", align: img.fit !== "cover"

package/lib/_shared/esm/{Text-CBlnm5CT.mjs → Text-BAzOkkzN.mjs}

@@ -1,8 +1,9 @@
-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, { useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { s as suffixModifier } from './suffix-modifier-B_pO0UkF.mjs';
-import { C as Context } from './Surface-Colbp3Zx.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { C as Context } from './Surface-C69KVzkY.mjs';
 
 /**
  * Use `Text` to display text.

package/lib/_shared/esm/{TextInput-Dk7qNGoh.mjs → TextInput-CjDG2cIX.mjs}

@@ -1,11 +1,12 @@
-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, { forwardRef, useContext, useState } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { u as useAriaDescribedby, F as FormControl } from './FormControl-CWyrVi1u.mjs';
-import { C as Context } from './Surface-Colbp3Zx.mjs';
-import { V as VisuallyHidden } from './VisuallyHidden-DqAgoqJo.mjs';
-import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
-import { S as Spinner } from './Spinner-Cd7LiPTy.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { u as useAriaDescribedby, F as FormControl } from './FormControl-Pc1aHUNM.mjs';
+import { C as Context } from './Surface-C69KVzkY.mjs';
+import { V as VisuallyHidden } from './VisuallyHidden-aSQ4RA1o.mjs';
+import { T as ThemeIcon } from './ThemeIcon-B0SruPZC.mjs';
+import { S as Spinner } from './Spinner-DvngCIwx.mjs';
 
 /**
  * Infer the correct inputMode, pattern and type if specifying a `number` type.
@@ -46,8 +47,8 @@ var TextInputComponent = forwardRef(function (_a, ref) {
     });
     // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
     var ariaDescribedby = useAriaDescribedby({
-        errorMessage: errorMessage,
         id: id,
+        errorMessage: errorMessage,
         helper: helper,
         disclosureText: disclosureText,
     }).ariaDescribedby;

package/lib/_shared/esm/{ThemeIcon-CN_Ed5b1.mjs → ThemeIcon-B0SruPZC.mjs}

@@ -1,8 +1,9 @@
-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, { useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { s as suffixModifier } from './suffix-modifier-B_pO0UkF.mjs';
-import { C as Context } from './Surface-Colbp3Zx.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { C as Context } from './Surface-C69KVzkY.mjs';
 
 var ThemeIcon = function (_a) {
     var _b;

package/lib/_shared/esm/{Tooltip-Dc82Ht7G.mjs → Tooltip-BpSzN3Tx.mjs}

@@ -1,5 +1,5 @@
 'use client';
-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 * as React from 'react';
 import React__default from 'react';
 import { g as useEscapeKeydown, f as useCallbackRef, b as useLayoutEffect2, c as createContextScope$1, a as useId, u as useControllableState, e as useThemeElement } from './index-Bz2JQq34.mjs';
@@ -7,9 +7,10 @@ import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { u as useSize, a as useFloating, b as autoUpdate, o as offset, s as shift, l as limitShift, f as flip, c as size, d as arrow, h as hide } from './index-CWHcEz3_.mjs';
-import { S as Surface } from './Surface-Colbp3Zx.mjs';
-import { I as Icon } from './Icon-CcPOJcQm.mjs';
-import { T as Text } from './Text-CBlnm5CT.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { S as Surface } from './Surface-C69KVzkY.mjs';
+import { I as Icon } from './Icon-CCUbr_AO.mjs';
+import { T as Text } from './Text-BAzOkkzN.mjs';
 
 // packages/core/primitive/src/primitive.tsx
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
@@ -1327,12 +1328,12 @@ 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 = __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 = __rest(_a, ["children", "side", "sideOffset", "align", "alignContent", "title", "supportingCopy", "icon", "ariaLabel", "maxWidth", "delayDuration", "open", "onOpenChange", "asChild", "zIndex"]);
     var _f = useThemeElement(), themeElement = _f[0], setThemeElement = _f[1];
     return (React__default.createElement("div", __assign({}, filterAttrs(props)),
         React__default.createElement(TooltipProvider, null,
             React__default.createElement(Root3, __assign({ delayDuration: delayDuration, open: open, onOpenChange: onOpenChange }, filterAttrs(props)),
-                React__default.createElement(Trigger, { asChild: asChild, className: "arc-Tooltip-trigger" }, children),
+                React__default.createElement(Trigger, { asChild: asChild, "aria-label": ariaLabel, className: "arc-Tooltip-trigger" }, children),
                 React__default.createElement("div", { ref: setThemeElement },
                     React__default.createElement(Portal, { container: themeElement },
                         React__default.createElement(Content2, __assign({ side: side, sideOffset: sideOffset, align: align, alignOffset: align === "start" ? -4 : align === "end" ? -4 : undefined, style: { zIndex: zIndex } }, props),

package/lib/_shared/esm/{VerticalSpace-Duhm0zXP.mjs → VerticalSpace-BLWB02I7.mjs}

@@ -1,13 +1,14 @@
-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 { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 
 /**
  * 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 = __rest(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL"]);
+    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 = __rest(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL", "sizeXXL"]);
     return (React__default.createElement("div", __assign({ className: classNames((_b = {
                 "arc-VerticalSpace": true
             },
@@ -16,6 +17,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(props))));
 };

package/lib/_shared/esm/{Visible-B13QJn7R.mjs → Visible-B0d79VWZ.mjs}

@@ -1,6 +1,7 @@
-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 { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 
 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 = __rest(_a, ["children", "xs", "s", "m", "l", "xl", "xxl"]);

package/lib/_shared/esm/{VisuallyHidden-DqAgoqJo.mjs → VisuallyHidden-aSQ4RA1o.mjs}

@@ -1,5 +1,6 @@
-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 { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 
 /**
  * Use `VisuallyHidden` to provide text for screen readers that is visually hidden on screen.

package/lib/_shared/esm/arc-breakpoints-Bs-at7wk.mjs

@@ -0,0 +1,26 @@
+import { A as ArcSizeBreakpointsXxl, a as ArcSizeBreakpointsXl, b as ArcSizeBreakpointsL, c as ArcSizeBreakpointsM, d as ArcSizeBreakpointsS, e as ArcSizeBreakpointsXs } from './index.es-tyrXzvpp.mjs';
+
+/**
+ * Provides an object of breakpoints for responsive designs.
+ *
+ * This object contains keys representing breakpoint names (e.g., `xxl`, `xl`)
+ * and values representing the pixel widths for those breakpoints. The values are parsed
+ * from strings (e.g., "1400px") into numbers for easier usage in responsive logic.
+ *
+ * Kept in src for internal use
+ */
+var ArcBreakpoints = {
+    xxl: parseInt(ArcSizeBreakpointsXxl, 10),
+    xl: parseInt(ArcSizeBreakpointsXl, 10),
+    l: parseInt(ArcSizeBreakpointsL, 10),
+    m: parseInt(ArcSizeBreakpointsM, 10),
+    s: parseInt(ArcSizeBreakpointsS, 10),
+    xs: parseInt(ArcSizeBreakpointsXs, 10),
+};
+var ARC_MIN_S_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsS, ")");
+var ARC_MIN_M_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsM, ")");
+var ARC_MIN_L_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsL, ")");
+var ARC_MIN_XL_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsXl, ")");
+var ARC_MIN_XXL_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsXxl, ")");
+
+export { ArcBreakpoints as A, ARC_MIN_S_BREAKPOINT as a, ARC_MIN_M_BREAKPOINT as b, ARC_MIN_L_BREAKPOINT as c, ARC_MIN_XL_BREAKPOINT as d, ARC_MIN_XXL_BREAKPOINT as e };

package/lib/_shared/esm/filter-attrs-v_SweZXP.mjs

@@ -0,0 +1,13 @@
+// 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;
+};
+
+export { filterAttrs as f };

package/lib/_shared/esm/{index-DLovItWo.mjs → index-BFKdmv_g.mjs}

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { u as useSize, a as useFloating, b as autoUpdate, o as offset, s as shift, f as flip, c as size, d as arrow, h as hide, l as limitShift } from './index-CWHcEz3_.mjs';
-import { P as Primitive, u as useComposedRefs } from './Combination-BpO6XTeS.mjs';
+import { P as Primitive, u as useComposedRefs } from './Combination-BQ4XBtF-.mjs';
 import { jsx } from 'react/jsx-runtime';
 import { c as createContextScope, f as useCallbackRef, b as useLayoutEffect2 } from './index-Bz2JQq34.mjs';
 

package/lib/_shared/esm/{index-BDWwJ5x2.mjs → index-BWkI4Dwz.mjs}

@@ -390,4 +390,4 @@ const $69cb30bb0017df05$export$54c2e3dc7acea9f5 = $69cb30bb0017df05$export$9712d
 const $69cb30bb0017df05$export$41fb9f06171c75f4 = $69cb30bb0017df05$export$8114b9fdfdf9f3ba;
 const $69cb30bb0017df05$export$7c6e2c02157bb7d2 = $69cb30bb0017df05$export$bd905d70e8fd2ebb;
 
-export { $69cb30bb0017df05$export$41fb9f06171c75f4 as $, $69cb30bb0017df05$export$be92b6f5f03c0fe9 as a, $69cb30bb0017df05$export$7c6e2c02157bb7d2 as b, $69cb30bb0017df05$export$54c2e3dc7acea9f5 as c };
+export { $69cb30bb0017df05$export$be92b6f5f03c0fe9 as $, $69cb30bb0017df05$export$41fb9f06171c75f4 as a, $69cb30bb0017df05$export$7c6e2c02157bb7d2 as b, $69cb30bb0017df05$export$54c2e3dc7acea9f5 as c };

package/lib/_shared/esm/{index-J5IHetgg.mjs → index-CN4hP3Wu.mjs}

@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
-import { u as useComposedRefs, P as Primitive, c as composeEventHandlers, R as ReactRemoveScroll, S as Slot, h as hideOthers, a as useFocusGuards, F as FocusScope, D as DismissableLayer, b as Portal$1 } from './Combination-BpO6XTeS.mjs';
+import { u as useComposedRefs, P as Primitive, c as composeEventHandlers, R as ReactRemoveScroll, S as Slot, h as hideOthers, a as useFocusGuards, F as FocusScope, D as DismissableLayer, b as Portal$1 } from './Combination-BQ4XBtF-.mjs';
 import { c as createContextScope, d as createContext2, u as useControllableState, a as useId } from './index-Bz2JQq34.mjs';
-import { P as Presence } from './index-DXTwueLZ.mjs';
+import { P as Presence } from './index-GCEHSsY8.mjs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var DIALOG_NAME = "Dialog";

package/lib/_shared/esm/{index-CxrL7jIX.mjs → index-Do2wfP-X.mjs}

@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
-import { u as useComposedRefs, P as Primitive, c as composeEventHandlers, h as hideOthers, R as ReactRemoveScroll, S as Slot, a as useFocusGuards, F as FocusScope, D as DismissableLayer, b as Portal$1 } from './Combination-BpO6XTeS.mjs';
+import { u as useComposedRefs, P as Primitive, c as composeEventHandlers, h as hideOthers, R as ReactRemoveScroll, S as Slot, a as useFocusGuards, F as FocusScope, D as DismissableLayer, b as Portal$1 } from './Combination-BQ4XBtF-.mjs';
 import { c as createContextScope, u as useControllableState, a as useId } from './index-Bz2JQq34.mjs';
-import { c as createPopperScope, A as Anchor, C as Content, a as Arrow, R as Root2$1 } from './index-DLovItWo.mjs';
-import { P as Presence } from './index-DXTwueLZ.mjs';
+import { c as createPopperScope, A as Anchor, C as Content, a as Arrow, R as Root2$1 } from './index-BFKdmv_g.mjs';
+import { P as Presence } from './index-GCEHSsY8.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 var POPOVER_NAME = "Popover";

package/lib/_shared/esm/{index-DXTwueLZ.mjs → index-GCEHSsY8.mjs}

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { u as useComposedRefs } from './Combination-BpO6XTeS.mjs';
+import { u as useComposedRefs } from './Combination-BQ4XBtF-.mjs';
 import { b as useLayoutEffect2 } from './index-Bz2JQq34.mjs';
 
 function useStateMachine(initialState, machine) {

package/lib/_shared/esm/{index-BbAu4d3T.mjs → index-u47CK8Y0.mjs}

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import React__default from 'react';
 import { c as createContextScope } from './index-Bz2JQq34.mjs';
-import { u as useComposedRefs, S as Slot } from './Combination-BpO6XTeS.mjs';
+import { u as useComposedRefs, S as Slot } from './Combination-BQ4XBtF-.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 function createCollection(name) {