@arc-ui/components 12.0.0-beta.16 → 12.0.0-beta.18

package/lib/index.mjs

@@ -385,34 +385,20 @@ var backgroundsBT = __spreadArray([], backgroundsShared, true);
  */
 var Icon$1 = function (_a) {
     var _b;
-    var testId = _a.testId, icon = _a.icon, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isPresentationIcon, isPresentationIcon = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = __rest(_a, ["testId", "icon", "color", "isInline", "isPresentationIcon", "label", "size"]);
+    var testId = _a.testId, icon = _a.icon, label = _a.label, size = _a.size, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.isInline, isInline = _d === void 0 ? false : _d, props = __rest(_a, ["testId", "icon", "label", "size", "color", "isInline"]);
     var surface = useContext(Context$3).surface;
-    var presentationIconProps = {
-        role: "presentation",
-        "aria-hidden": true,
-    };
-    var renderIcon = function () {
-        if (!icon)
-            return null;
-        var accessibleProps = isPresentationIcon ? presentationIconProps : {};
-        if (typeof icon === "function") {
-            var IconComponent = icon || (function () { return React__default.createElement(React__default.Fragment, null); });
-            return React__default.createElement(IconComponent, __assign({}, accessibleProps));
-        }
-        if (React__default.isValidElement(icon) && icon.type === "svg") {
-            return React__default.cloneElement(icon, accessibleProps);
-        }
-        return null;
-    };
-    return (React__default.createElement("span", __assign({ "data-testid": testId, "aria-label": label, className: classNames((_b = {},
+    var iconUrl = icon ? "url(\"".concat(icon, "\")") : undefined;
+    return (React__default.createElement("span", __assign({ "data-testid": testId, "aria-label": label, role: label ? "img" : undefined, className: classNames((_b = {},
             _b["arc-Icon"] = true,
-            _b[suffixModifier("arc-Icon--color", color)] = color !== "auto",
             _b["arc-Icon--inline"] = isInline,
+            _b[suffixModifier("arc-Icon--color", color)] = color !== "auto",
             _b["arc-Icon--onDarkSurface"] = surface === "dark",
-            _b)), role: label ? "img" : undefined, style: {
+            _b)), style: {
             height: size,
             width: size,
-        } }, filterAttrs(props)), renderIcon()));
+            maskImage: iconUrl,
+            WebkitMaskImage: iconUrl,
+        } }, filterAttrs(props))));
 };
 var colors$1 = [
     "auto",
@@ -420,6 +406,7 @@ var colors$1 = [
     "statusRed",
     "statusAmber",
     "statusGreen",
+    "gradient",
 ];
 
 var ThemeIcon = function (_a) {
@@ -665,7 +652,7 @@ var Badge = function (_a) {
 
 /**
  * Do not edit directly
- * Generated on Thu, 06 Mar 2025 14:17:53 GMT
+ * Generated on Mon, 19 May 2025 14:54:16 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";
@@ -827,26 +814,6 @@ var VerticalSpace = function (_a) {
             _b)) }, filterAttrs(props))));
 };
 
-/**
- * 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 = __rest(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone", "elementType"]);
-    var surface = useContext(Context$3).surface;
-    var Element = elementType;
-    return (React__default.createElement(Element, __assign({ id: id, className: classNames((_b = {
-                "arc-Text": true
-            },
-            _b[suffixModifier("arc-Text--align", align)] = align !== "left",
-            _b["arc-Text--inline"] = isInline,
-            _b["arc-Text--measured"] = isMeasured,
-            _b["arc-Text--size".concat(size && size.toUpperCase())] = size && size !== "m",
-            _b["arc-Text--".concat(tone)] = tone !== "default",
-            _b["arc-Text--onDarkSurface"] = surface === "dark",
-            _b)) }, filterAttrs(props)), children));
-};
-
 /**
  * Use `Box` as a simple way to group bespoke content and interactive elements together.
  */
@@ -899,8 +866,8 @@ var GridRow = function (_a) {
 };
 
 var BannerImage = function (_a) {
-    var sources = _a.sources, props = __rest(_a, ["sources"]);
-    return (React__default.createElement(Image, __assign({ fadeOnLoad: true }, props), sources &&
+    var sources = _a.sources, ariaHidden = _a.ariaHidden, props = __rest(_a, ["sources", "ariaHidden"]);
+    return (React__default.createElement(Image, __assign({ "aria-hidden": ariaHidden, fadeOnLoad: true }, props), sources &&
         sources.map(function (source) { return React__default.createElement("source", __assign({ key: source.srcSet }, source)); })));
 };
 
@@ -919,7 +886,7 @@ var TemplateBanner = function (_a) {
     };
     var isContained = type === "contained";
     var borderWidth = isContained && !isElevated ? "thin" : undefined;
-    var direction = isReversed && isMinWidthArcBreakpointM ? "row" : "row-reverse";
+    var direction = isReversed && isMinWidthArcBreakpointM ? "row-reverse" : "row";
     var columnWithImgWidths = {
         "1/0": 12,
         "2/3": 8,
@@ -931,14 +898,10 @@ var TemplateBanner = function (_a) {
         React__default.createElement(Box, { isBorderRadius: true, "data-testid": "arc-TemplateBanner-box", borderWidth: borderWidth, surface: backgrounds[type], isSurfaceTransparent: !isContained },
             React__default.createElement(Grid, { isGutterless: true, isFluid: true },
                 React__default.createElement(GridRow, { "data-testid": "arc-TemplateBanner-gridRow", direction: direction },
-                    img && contentRatio !== "1/0" && (React__default.createElement(GridCol, __assign({ "data-coltype": "img", "data-testid": "arc-TemplateBanner-imageCol", align: img.fit !== "cover"
-                            ? { m: imageAlignment[img.alignment || "center"] }
-                            : undefined, xs: 12, order: { xs: isContained && isReversed ? 0 : 1, m: 0 } }, (contentRatio === "2/3" && img ? { m: 4 } : { m: 6 })),
-                        React__default.createElement(BannerImage, __assign({}, img)))),
                     React__default.createElement(GridCol, { "data-testid": "arc-TemplateBanner-contentCol", align: {
                             m: alignment === "start" ? "start" : "center",
                             xs: !img || contentRatio === "1/0" ? "center" : "start",
-                        }, xs: 12, m: img ? columnWithImgWidths[contentRatio] : 12 },
+                        }, xs: 12, order: { xs: isContained && isReversed ? 1 : 0, m: 0 }, m: img ? columnWithImgWidths[contentRatio] : 12 },
                         React__default.createElement("div", { className: classNames("arc-TemplateBanner-content", {
                                 "arc-TemplateBanner-content--additionalTopMargin": additionalTopMargin && alignment === "start",
                             }) },
@@ -948,11 +911,14 @@ var TemplateBanner = function (_a) {
                             React__default.createElement(Heading, { level: headingLevel, size: headingSize }, heading),
                             text && (React__default.createElement(React__default.Fragment, null,
                                 React__default.createElement(VerticalSpace, { size: "16" }),
-                                React__default.createElement("p", { className: "arc-TemplateBanner-text" },
-                                    React__default.createElement(Text, null, text)))),
+                                React__default.createElement("span", { className: "arc-TemplateBanner-text" }, text))),
                             children && (React__default.createElement(React__default.Fragment, null,
                                 React__default.createElement(VerticalSpace, { size: "32" }),
-                                children)))))))));
+                                children)))),
+                    img && contentRatio !== "1/0" && (React__default.createElement(GridCol, __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__default.createElement(BannerImage, __assign({ ariaHidden: true }, img)))))))));
 };
 
 var Banner = function (_a) {
@@ -1633,39 +1599,21 @@ function requireDebounce () {
 var debounceExports = requireDebounce();
 var debounce = /*@__PURE__*/getDefaultExportFromCjs(debounceExports);
 
-const BtIconChevronLeft2Px = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M22.5,29.99854a.99676.99676,0,0,1-.707-.293L8.08594,15.99268,21.793,2.294A1.00023,1.00023,0,0,1,23.207,3.709l-12.293,12.28467L23.207,28.2915a1,1,0,0,1-.707,1.707Z",
-      fill: "currentColor",
-    }),
-  );
+/**
+ * Do not edit directly
+ * Generated file
+ */
 
-const BtIconChevronRight2Px = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M9.5,29.99854A1.00025,1.00025,0,0,1,8.793,28.291l12.293-12.28467L8.793,3.7085A.99989.99989,0,0,1,10.207,2.29443l13.707,13.71289L10.207,29.70605A.99827.99827,0,0,1,9.5,29.99854Z",
-      fill: "currentColor",
-    }),
-  );
+const BtIconChevronLeft2Px =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M22.5 29.999a1 1 0 0 1-.707-.293L8.086 15.993 21.793 2.294a1 1 0 0 1 1.414 1.415L10.914 15.994l12.293 12.298a1 1 0 0 1-.707 1.706'/%3e%3c/svg%3e";
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconChevronRight2Px =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M9.5 29.999a1 1 0 0 1-.707-1.708l12.293-12.285L8.793 3.71a1 1 0 0 1 1.414-1.415l13.707 13.713-13.707 13.7a1 1 0 0 1-.707.292'/%3e%3c/svg%3e";
 
 var BreadcrumbsItem = function (_a) {
     var spacerIconAfter = _a.spacerIconAfter, spacerIconBefore = _a.spacerIconBefore, children = _a.children;
@@ -1809,8 +1757,9 @@ var Spinner = function (_a) {
 };
 
 var ButtonV2 = forwardRef(function (_a, ref) {
-    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, _c = _a.iconPosition, iconPosition = _c === void 0 ? "beforeText" : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? false : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, props = __rest(_a, ["label", "buttonStyle", "icon", "iconPosition", "size", "ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "isFullWidth", "isLoading", "onClick", "href", "id", "rel", "target", "type", "form"]);
+    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, _c = _a.iconPosition, iconPosition = _c === void 0 ? "beforeText" : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? false : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, isSpan = _a.isSpan, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, props = __rest(_a, ["label", "buttonStyle", "icon", "iconPosition", "size", "ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "isFullWidth", "isLoading", "isSpan", "onClick", "href", "id", "rel", "target", "type", "form"]);
     var surface = useContext(Context$3).surface;
+    var ButtonElement = isSpan ? "span" : "button";
     var iconSizes = {
         s: 16,
         m: 32,
@@ -1825,6 +1774,16 @@ var ButtonV2 = forwardRef(function (_a, ref) {
         "arc-ButtonV2--withIconBeforeText": iconPosition === "beforeText" && (icon || isLoading),
     });
     var commonProps = __assign({ id: id, onClick: onClick, ref: ref }, filterAttrs(props));
+    var getIconColor = function (buttonStyle) {
+        switch (buttonStyle) {
+            case "compact":
+            case "secondary":
+            case "tertiary":
+                return surface === "light" ? "gradient" : "auto";
+            default:
+                return "auto";
+        }
+    };
     var buttonContent = (React__default.createElement("span", { className: classNames("arc-ButtonV2-inner", {
             "arc-ButtonV2-inner--iconBeforeText": iconPosition === "beforeText",
         }) },
@@ -1832,11 +1791,11 @@ var ButtonV2 = forwardRef(function (_a, ref) {
         isLoading && (React__default.createElement("span", { className: "arc-ButtonV2-icon" },
             React__default.createElement(Spinner, { size: size }))),
         icon && !isLoading && (React__default.createElement("span", { className: "arc-ButtonV2-icon" },
-            React__default.createElement(Icon$1, { size: iconSizes[size], icon: icon })))));
+            React__default.createElement(Icon$1, { color: getIconColor(buttonStyle), size: iconSizes[size], icon: icon })))));
     if (href && !isLoading) {
         return (React__default.createElement("a", __assign({}, commonProps, { className: ButtonV2Classes, href: href, rel: rel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, target: target }), buttonContent));
     }
-    return (React__default.createElement("button", __assign({}, commonProps, { className: ButtonV2Classes, "aria-label": ariaLabel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, disabled: isLoading, type: type, form: form }),
+    return (React__default.createElement(ButtonElement, __assign({}, commonProps, { className: ButtonV2Classes, "aria-label": ariaLabel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, disabled: isLoading, type: type, form: form }),
         React__default.createElement("span", { className: classNames("arc-ButtonV2-inner", {
                 "arc-ButtonV2-inner--iconBeforeText": iconPosition === "beforeText",
             }) }, buttonContent)));
@@ -5095,6 +5054,26 @@ function cleanEscapedString(input) {
   return matched[1].replace(doubleQuoteRegExp, "'");
 }
 
+/**
+ * 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 = __rest(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone", "elementType"]);
+    var surface = useContext(Context$3).surface;
+    var Element = elementType;
+    return (React__default.createElement(Element, __assign({ id: id, className: classNames((_b = {
+                "arc-Text": true
+            },
+            _b[suffixModifier("arc-Text--align", align)] = align !== "left",
+            _b["arc-Text--inline"] = isInline,
+            _b["arc-Text--measured"] = isMeasured,
+            _b["arc-Text--size".concat(size && size.toUpperCase())] = size && size !== "m",
+            _b["arc-Text--".concat(tone)] = tone !== "default",
+            _b["arc-Text--onDarkSurface"] = surface === "dark",
+            _b)) }, filterAttrs(props)), children));
+};
+
 var ArcCalendarContext = createContext(null);
 
 var CalendarDayNumber = forwardRef(function (_a, autoFocusRef) {
@@ -5161,24 +5140,13 @@ var CalendarDayNumber = forwardRef(function (_a, autoFocusRef) {
                     React__default.createElement("span", { "aria-hidden": true }, getDate(date)))))))));
 });
 
-const BtIconChevronDownMid = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        viewBox: "0 0 32 32",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M16.0001 18.0909L21.7041 12.3935C21.9566 12.1415 22.2987 12 22.6554 12C23.0121 12 23.3543 12.1415 23.6068 12.3935C23.7316 12.5181 23.8306 12.6661 23.8982 12.829C23.9657 12.9919 24.0005 13.1665 24.0005 13.3429C24.0005 13.5192 23.9657 13.6938 23.8982 13.8567C23.8306 14.0196 23.7316 14.1676 23.6068 14.2922L16.9508 20.9402C16.6983 21.1918 16.3565 21.3331 16.0001 21.3331C15.6437 21.3331 15.3018 21.1918 15.0494 20.9402L8.39342 14.2922C8.26861 14.1676 8.16959 14.0196 8.10202 13.8567C8.03446 13.6938 7.99969 13.5192 7.99969 13.3429C7.99969 13.1665 8.03446 12.9919 8.10202 12.829C8.16959 12.6661 8.26861 12.5181 8.39342 12.3935C8.6459 12.1415 8.98804 12 9.34475 12C9.70147 12 10.0436 12.1415 10.2961 12.3935L16.0001 18.0909Z",
-      fill: "currentColor",
-    }),
-  );
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconChevronDownMid =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' fill-rule='evenodd' d='m16 18.09 5.704-5.696a1.347 1.347 0 0 1 2.296.949 1.34 1.34 0 0 1-.393.95L16.95 20.94a1.347 1.347 0 0 1-1.902 0l-6.656-6.648A1.342 1.342 0 0 1 9.345 12c.356 0 .699.142.951.393z' clip-rule='evenodd'/%3e%3c/svg%3e";
 
 var CalendarDateSelect = function (_a) {
     var ariaLabel = _a.ariaLabel, onChange = _a.onChange, name = _a.name, value = _a.value, displayValue = _a.displayValue, options = _a.options;
@@ -5372,43 +5340,21 @@ var CalendarDayGrid = function (_a) {
             React__default.createElement("tbody", { onKeyDown: handleKeyDown }, getWeeksInMonth(month).map(function (week, i) { return (React__default.createElement("tr", { key: "".concat(month.getTime(), "-week-").concat(i) }, week.map(function (day) { return (React__default.createElement(CalendarDayNumber, { ref: autoFocusRef, shouldRender: isSameMonth(month, day), key: day.getTime(), date: day, isFocusWithinDayGrid: isFocusWithinDayGrid })); }))); }))))); })));
 };
 
-const BtIconChevronLeftMid = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        viewBox: "0 0 16 16",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M7.62107 8.00023L10.4697 10.8522C10.5957 10.9785 10.6665 11.1495 10.6665 11.3279C10.6665 11.5063 10.5957 11.6773 10.4697 11.8036C10.4074 11.866 10.3335 11.9155 10.252 11.9493C10.1706 11.983 10.0833 12.0004 9.99507 12.0004C9.9069 12.0004 9.81959 11.983 9.73814 11.9493C9.65669 11.9155 9.5827 11.866 9.52041 11.8036L6.19641 8.47556C6.07061 8.34935 5.99998 8.17842 5.99998 8.00023C5.99998 7.82203 6.07061 7.6511 6.19641 7.52489L9.52041 4.19689C9.5827 4.13449 9.65669 4.08498 9.73814 4.0512C9.81959 4.01741 9.9069 4.00003 9.99507 4.00003C10.0832 4.00003 10.1706 4.01741 10.252 4.0512C10.3335 4.08498 10.4074 4.13449 10.4697 4.19689C10.5957 4.32313 10.6665 4.4942 10.6665 4.67256C10.6665 4.85092 10.5957 5.02199 10.4697 5.14823L7.62107 8.00023Z",
-      fill: "currentColor",
-    }),
-  );
+/**
+ * Do not edit directly
+ * Generated file
+ */
 
-const BtIconChevronRightMid = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        viewBox: "0 0 16 16",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M9.04543 8.0002L6.19676 5.1482C6.07077 5.02196 6 4.85089 6 4.67253C6 4.49418 6.07077 4.32311 6.19676 4.19687C6.25906 4.13446 6.33304 4.08495 6.41449 4.05117C6.49594 4.01739 6.58325 4 6.67143 4C6.75961 4 6.84692 4.01739 6.92837 4.05117C7.00982 4.08495 7.0838 4.13446 7.1461 4.19687L10.4701 7.52487C10.5959 7.65108 10.6665 7.82201 10.6665 8.0002C10.6665 8.1784 10.5959 8.34932 10.4701 8.47553L7.1461 11.8035C7.0838 11.8659 7.00982 11.9155 6.92837 11.9492C6.84692 11.983 6.75961 12.0004 6.67143 12.0004C6.58325 12.0004 6.49594 11.983 6.41449 11.9492C6.33304 11.9155 6.25906 11.8659 6.19676 11.8035C6.07077 11.6773 6 11.5062 6 11.3279C6 11.1495 6.07077 10.9784 6.19676 10.8522L9.04543 8.0002Z",
-      fill: "currentColor",
-    }),
-  );
+const BtIconChevronLeftMid =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' fill-rule='evenodd' d='m7.621 8 2.849 2.852a.673.673 0 0 1-.732 1.097.7.7 0 0 1-.218-.145L6.196 8.476a.673.673 0 0 1 0-.951L9.52 4.197a.67.67 0 0 1 1.146.476c0 .178-.07.349-.196.475z' clip-rule='evenodd'/%3e%3c/svg%3e";
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconChevronRightMid =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' fill-rule='evenodd' d='M9.045 8 6.197 5.148a.673.673 0 0 1 .731-1.097.7.7 0 0 1 .218.146l3.324 3.328a.673.673 0 0 1 0 .95l-3.324 3.329A.67.67 0 0 1 6 11.328c0-.178.07-.35.197-.476z' clip-rule='evenodd'/%3e%3c/svg%3e";
 
 var CalendarNavButton = function (_a) {
     var isDisabled = _a.isDisabled, onClick = _a.onClick, direction = _a.direction, ariaLabel = _a.ariaLabel;
@@ -8037,6 +7983,44 @@ var Checkbox = forwardRef(function (_a, ref) {
             errorMessage))));
 });
 
+/**
+ * Use `Columns` to compose layouts on a 12-column grid.
+ */
+var Columns = function (_a) {
+    var children = _a.children, _b = _a.isGutterless, isGutterless = _b === void 0 ? false : _b, _c = _a.isExtended, isExtended = _c === void 0 ? false : _c, props = __rest(_a, ["children", "isGutterless", "isExtended"]);
+    return (React__default.createElement("div", __assign({ className: classNames({
+            "arc-Columns": true,
+            "arc-Columns--regular": !isExtended,
+            "arc-Columns--extended": isExtended,
+            "arc-Columns--gutterless": isGutterless,
+        }) }, filterAttrs(props)),
+        React__default.createElement("div", { className: "arc-Columns-inner" }, children)));
+};
+var ColumnsCol = function (_a) {
+    var _b;
+    var align = _a.align, children = _a.children, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, offset = _a.offset, offsetS = _a.offsetS, offsetM = _a.offsetM, offsetL = _a.offsetL, offsetXL = _a.offsetXL, span = _a.span, spanS = _a.spanS, spanM = _a.spanM, spanL = _a.spanL, spanXL = _a.spanXL, props = __rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {},
+            _b["arc-Columns-col"] = true,
+            _b[suffixModifier("arc-Columns-col--align", align || "")] = align,
+            _b["arc-Columns-col--".concat(span)] = typeof span !== "undefined",
+            _b["arc-Columns-col--s".concat(spanS)] = typeof spanS !== "undefined",
+            _b["arc-Columns-col--m".concat(spanM)] = typeof spanM !== "undefined",
+            _b["arc-Columns-col--l".concat(spanL)] = typeof spanL !== "undefined",
+            _b["arc-Columns-col--xL".concat(spanXL)] = typeof spanXL !== "undefined",
+            _b["arc-Columns-col--offset"] = typeof offset !== "undefined" ||
+                typeof offsetS !== "undefined" ||
+                typeof offsetM !== "undefined" ||
+                typeof offsetL !== "undefined" ||
+                typeof offsetXL !== "undefined",
+            _b["arc-Columns-col--offset".concat(offset)] = typeof offset !== "undefined",
+            _b["arc-Columns-col--offsetS".concat(offsetS)] = typeof offsetS !== "undefined",
+            _b["arc-Columns-col--offsetM".concat(offsetM)] = typeof offsetM !== "undefined",
+            _b["arc-Columns-col--offsetL".concat(offsetL)] = typeof offsetL !== "undefined",
+            _b["arc-Columns-col--offsetXL".concat(offsetXL)] = typeof offsetXL !== "undefined",
+            _b["arc-Columns-col--debugVisible"] = isDebugVisible,
+            _b)) }, filterAttrs(props)), children));
+};
+
 // packages/core/primitive/src/primitive.tsx
 function composeEventHandlers$1(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
@@ -8522,7 +8506,7 @@ function createFocusGuard() {
 
 var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
 var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
-var EVENT_OPTIONS = { bubbles: false, cancelable: true };
+var EVENT_OPTIONS$1 = { bubbles: false, cancelable: true };
 var FOCUS_SCOPE_NAME = "FocusScope";
 var FocusScope = React.forwardRef((props, forwardedRef) => {
   const {
@@ -8587,11 +8571,11 @@ var FocusScope = React.forwardRef((props, forwardedRef) => {
       const previouslyFocusedElement = document.activeElement;
       const hasFocusedCandidate = container.contains(previouslyFocusedElement);
       if (!hasFocusedCandidate) {
-        const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
+        const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS$1);
         container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
         container.dispatchEvent(mountEvent);
         if (!mountEvent.defaultPrevented) {
-          focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
+          focusFirst$2(removeLinks(getTabbableCandidates(container)), { select: true });
           if (document.activeElement === previouslyFocusedElement) {
             focus(container);
           }
@@ -8600,7 +8584,7 @@ var FocusScope = React.forwardRef((props, forwardedRef) => {
       return () => {
         container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
         setTimeout(() => {
-          const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
+          const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS$1);
           container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
           container.dispatchEvent(unmountEvent);
           if (!unmountEvent.defaultPrevented) {
@@ -8640,7 +8624,7 @@ var FocusScope = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(Primitive$1.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
 });
 FocusScope.displayName = FOCUS_SCOPE_NAME;
-function focusFirst(candidates, { select = false } = {}) {
+function focusFirst$2(candidates, { select = false } = {}) {
   const previouslyFocusedElement = document.activeElement;
   for (const candidate of candidates) {
     focus(candidate, { select });
@@ -10889,7 +10873,7 @@ var Arrow$3 = React.forwardRef((props, forwardedRef) => {
   );
 });
 Arrow$3.displayName = NAME$3;
-var Root$3 = Arrow$3;
+var Root$4 = Arrow$3;
 
 // packages/react/use-size/src/useSize.tsx
 function useSize(element) {
@@ -10936,11 +10920,11 @@ var Popper$1 = (props) => {
   return /* @__PURE__ */ jsx(PopperProvider$1, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
 };
 Popper$1.displayName = POPPER_NAME$1;
-var ANCHOR_NAME$2 = "PopperAnchor";
+var ANCHOR_NAME$3 = "PopperAnchor";
 var PopperAnchor$1 = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopePopper, virtualRef, ...anchorProps } = props;
-    const context = usePopperContext$1(ANCHOR_NAME$2, __scopePopper);
+    const context = usePopperContext$1(ANCHOR_NAME$3, __scopePopper);
     const ref = React.useRef(null);
     const composedRefs = useComposedRefs$1(forwardedRef, ref);
     React.useEffect(() => {
@@ -10949,9 +10933,9 @@ var PopperAnchor$1 = React.forwardRef(
     return virtualRef ? null : /* @__PURE__ */ jsx(Primitive$1.div, { ...anchorProps, ref: composedRefs });
   }
 );
-PopperAnchor$1.displayName = ANCHOR_NAME$2;
-var CONTENT_NAME$5 = "PopperContent";
-var [PopperContentProvider$1, useContentContext$1] = createPopperContext$1(CONTENT_NAME$5);
+PopperAnchor$1.displayName = ANCHOR_NAME$3;
+var CONTENT_NAME$7 = "PopperContent";
+var [PopperContentProvider$1, useContentContext$1] = createPopperContext$1(CONTENT_NAME$7);
 var PopperContent$1 = React.forwardRef(
   (props, forwardedRef) => {
     const {
@@ -10970,7 +10954,7 @@ var PopperContent$1 = React.forwardRef(
       onPlaced,
       ...contentProps
     } = props;
-    const context = usePopperContext$1(CONTENT_NAME$5, __scopePopper);
+    const context = usePopperContext$1(CONTENT_NAME$7, __scopePopper);
     const [content, setContent] = React.useState(null);
     const composedRefs = useComposedRefs$1(forwardedRef, (node) => setContent(node));
     const [arrow$1, setArrow] = React.useState(null);
@@ -11093,8 +11077,8 @@ var PopperContent$1 = React.forwardRef(
     );
   }
 );
-PopperContent$1.displayName = CONTENT_NAME$5;
-var ARROW_NAME$4 = "PopperArrow";
+PopperContent$1.displayName = CONTENT_NAME$7;
+var ARROW_NAME$6 = "PopperArrow";
 var OPPOSITE_SIDE$1 = {
   top: "bottom",
   right: "left",
@@ -11103,7 +11087,7 @@ var OPPOSITE_SIDE$1 = {
 };
 var PopperArrow$1 = React.forwardRef(function PopperArrow2(props, forwardedRef) {
   const { __scopePopper, ...arrowProps } = props;
-  const contentContext = useContentContext$1(ARROW_NAME$4, __scopePopper);
+  const contentContext = useContentContext$1(ARROW_NAME$6, __scopePopper);
   const baseSide = OPPOSITE_SIDE$1[contentContext.placedSide];
   return (
     // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
@@ -11133,7 +11117,7 @@ var PopperArrow$1 = React.forwardRef(function PopperArrow2(props, forwardedRef)
           visibility: contentContext.shouldHideArrow ? "hidden" : void 0
         },
         children: /* @__PURE__ */ jsx(
-          Root$3,
+          Root$4,
           {
             ...arrowProps,
             ref: forwardedRef,
@@ -11148,7 +11132,7 @@ var PopperArrow$1 = React.forwardRef(function PopperArrow2(props, forwardedRef)
     )
   );
 });
-PopperArrow$1.displayName = ARROW_NAME$4;
+PopperArrow$1.displayName = ARROW_NAME$6;
 function isNotNull$1(value) {
   return value !== null;
 }
@@ -11187,20 +11171,20 @@ function getSideAndAlignFromPlacement$1(placement) {
   const [side, align = "center"] = placement.split("-");
   return [side, align];
 }
-var Root2$3 = Popper$1;
+var Root2$4 = Popper$1;
 var Anchor$1 = PopperAnchor$1;
 var Content$2 = PopperContent$1;
 var Arrow$2 = PopperArrow$1;
 
-var PORTAL_NAME$5 = "Portal";
-var Portal$5 = React.forwardRef((props, forwardedRef) => {
+var PORTAL_NAME$7 = "Portal";
+var Portal$6 = React.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
   const [mounted, setMounted] = React.useState(false);
   useLayoutEffect2(() => setMounted(true), []);
   const container = containerProp || mounted && globalThis?.document?.body;
   return container ? ReactDOM__default.createPortal(/* @__PURE__ */ jsx(Primitive$1.div, { ...portalProps, ref: forwardedRef }), container) : null;
 });
-Portal$5.displayName = PORTAL_NAME$5;
+Portal$6.displayName = PORTAL_NAME$7;
 
 function useStateMachine$1(initialState, machine) {
   return React.useReducer((state, event) => {
@@ -12203,7 +12187,7 @@ var POPOVER_NAME = "Popover";
 var [createPopoverContext, createPopoverScope] = createContextScope$1(POPOVER_NAME, [
   createPopperScope$1
 ]);
-var usePopperScope$2 = createPopperScope$1();
+var usePopperScope$3 = createPopperScope$1();
 var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
 var Popover$1 = (props) => {
   const {
@@ -12214,7 +12198,7 @@ var Popover$1 = (props) => {
     onOpenChange,
     modal = false
   } = props;
-  const popperScope = usePopperScope$2(__scopePopover);
+  const popperScope = usePopperScope$3(__scopePopover);
   const triggerRef = React.useRef(null);
   const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
   const [open = false, setOpen] = useControllableState({
@@ -12222,7 +12206,7 @@ var Popover$1 = (props) => {
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ jsx(Root2$3, { ...popperScope, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Root2$4, { ...popperScope, children: /* @__PURE__ */ jsx(
     PopoverProvider,
     {
       scope: __scopePopover,
@@ -12240,12 +12224,12 @@ var Popover$1 = (props) => {
   ) });
 };
 Popover$1.displayName = POPOVER_NAME;
-var ANCHOR_NAME$1 = "PopoverAnchor";
+var ANCHOR_NAME$2 = "PopoverAnchor";
 var PopoverAnchor = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopePopover, ...anchorProps } = props;
-    const context = usePopoverContext(ANCHOR_NAME$1, __scopePopover);
-    const popperScope = usePopperScope$2(__scopePopover);
+    const context = usePopoverContext(ANCHOR_NAME$2, __scopePopover);
+    const popperScope = usePopperScope$3(__scopePopover);
     const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
     React.useEffect(() => {
       onCustomAnchorAdd();
@@ -12254,13 +12238,13 @@ var PopoverAnchor = React.forwardRef(
     return /* @__PURE__ */ jsx(Anchor$1, { ...popperScope, ...anchorProps, ref: forwardedRef });
   }
 );
-PopoverAnchor.displayName = ANCHOR_NAME$1;
-var TRIGGER_NAME$3 = "PopoverTrigger";
+PopoverAnchor.displayName = ANCHOR_NAME$2;
+var TRIGGER_NAME$4 = "PopoverTrigger";
 var PopoverTrigger = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopePopover, ...triggerProps } = props;
-    const context = usePopoverContext(TRIGGER_NAME$3, __scopePopover);
-    const popperScope = usePopperScope$2(__scopePopover);
+    const context = usePopoverContext(TRIGGER_NAME$4, __scopePopover);
+    const popperScope = usePopperScope$3(__scopePopover);
     const composedTriggerRef = useComposedRefs$1(forwardedRef, context.triggerRef);
     const trigger = /* @__PURE__ */ jsx(
       Primitive$1.button,
@@ -12278,30 +12262,30 @@ var PopoverTrigger = React.forwardRef(
     return context.hasCustomAnchor ? trigger : /* @__PURE__ */ jsx(Anchor$1, { asChild: true, ...popperScope, children: trigger });
   }
 );
-PopoverTrigger.displayName = TRIGGER_NAME$3;
-var PORTAL_NAME$4 = "PopoverPortal";
-var [PortalProvider$2, usePortalContext$2] = createPopoverContext(PORTAL_NAME$4, {
+PopoverTrigger.displayName = TRIGGER_NAME$4;
+var PORTAL_NAME$6 = "PopoverPortal";
+var [PortalProvider$3, usePortalContext$3] = createPopoverContext(PORTAL_NAME$6, {
   forceMount: void 0
 });
 var PopoverPortal = (props) => {
   const { __scopePopover, forceMount, children, container } = props;
-  const context = usePopoverContext(PORTAL_NAME$4, __scopePopover);
-  return /* @__PURE__ */ jsx(PortalProvider$2, { scope: __scopePopover, forceMount, children: /* @__PURE__ */ jsx(Presence$1, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$5, { asChild: true, container, children }) }) });
+  const context = usePopoverContext(PORTAL_NAME$6, __scopePopover);
+  return /* @__PURE__ */ jsx(PortalProvider$3, { scope: __scopePopover, forceMount, children: /* @__PURE__ */ jsx(Presence$1, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$6, { asChild: true, container, children }) }) });
 };
-PopoverPortal.displayName = PORTAL_NAME$4;
-var CONTENT_NAME$4 = "PopoverContent";
+PopoverPortal.displayName = PORTAL_NAME$6;
+var CONTENT_NAME$6 = "PopoverContent";
 var PopoverContent = React.forwardRef(
   (props, forwardedRef) => {
-    const portalContext = usePortalContext$2(CONTENT_NAME$4, props.__scopePopover);
+    const portalContext = usePortalContext$3(CONTENT_NAME$6, props.__scopePopover);
     const { forceMount = portalContext.forceMount, ...contentProps } = props;
-    const context = usePopoverContext(CONTENT_NAME$4, props.__scopePopover);
+    const context = usePopoverContext(CONTENT_NAME$6, props.__scopePopover);
     return /* @__PURE__ */ jsx(Presence$1, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ jsx(PopoverContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(PopoverContentNonModal, { ...contentProps, ref: forwardedRef }) });
   }
 );
-PopoverContent.displayName = CONTENT_NAME$4;
+PopoverContent.displayName = CONTENT_NAME$6;
 var PopoverContentModal = React.forwardRef(
   (props, forwardedRef) => {
-    const context = usePopoverContext(CONTENT_NAME$4, props.__scopePopover);
+    const context = usePopoverContext(CONTENT_NAME$6, props.__scopePopover);
     const contentRef = React.useRef(null);
     const composedRefs = useComposedRefs$1(forwardedRef, contentRef);
     const isRightClickOutsideRef = React.useRef(false);
@@ -12341,7 +12325,7 @@ var PopoverContentModal = React.forwardRef(
 );
 var PopoverContentNonModal = React.forwardRef(
   (props, forwardedRef) => {
-    const context = usePopoverContext(CONTENT_NAME$4, props.__scopePopover);
+    const context = usePopoverContext(CONTENT_NAME$6, props.__scopePopover);
     const hasInteractedOutsideRef = React.useRef(false);
     const hasPointerDownOutsideRef = React.useRef(false);
     return /* @__PURE__ */ jsx(
@@ -12393,8 +12377,8 @@ var PopoverContentImpl = React.forwardRef(
       onInteractOutside,
       ...contentProps
     } = props;
-    const context = usePopoverContext(CONTENT_NAME$4, __scopePopover);
-    const popperScope = usePopperScope$2(__scopePopover);
+    const context = usePopoverContext(CONTENT_NAME$6, __scopePopover);
+    const popperScope = usePopperScope$3(__scopePopover);
     useFocusGuards();
     return /* @__PURE__ */ jsx(
       FocusScope,
@@ -12459,40 +12443,31 @@ var PopoverClose = React.forwardRef(
   }
 );
 PopoverClose.displayName = CLOSE_NAME$1;
-var ARROW_NAME$3 = "PopoverArrow";
+var ARROW_NAME$5 = "PopoverArrow";
 var PopoverArrow = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopePopover, ...arrowProps } = props;
-    const popperScope = usePopperScope$2(__scopePopover);
+    const popperScope = usePopperScope$3(__scopePopover);
     return /* @__PURE__ */ jsx(Arrow$2, { ...popperScope, ...arrowProps, ref: forwardedRef });
   }
 );
-PopoverArrow.displayName = ARROW_NAME$3;
+PopoverArrow.displayName = ARROW_NAME$5;
 function getState$1(open) {
   return open ? "open" : "closed";
 }
-var Root2$2 = Popover$1;
-var Anchor2 = PopoverAnchor;
-var Trigger$2 = PopoverTrigger;
-var Portal$4 = PopoverPortal;
-var Content2$2 = PopoverContent;
+var Root2$3 = Popover$1;
+var Anchor2$1 = PopoverAnchor;
+var Trigger$3 = PopoverTrigger;
+var Portal$5 = PopoverPortal;
+var Content2$4 = PopoverContent;
 
-const BtIconChevronDown2Px = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M15.99316,23.91406,2.294,10.207A.99989.99989,0,1,1,3.708,8.793l12.28515,12.293L28.292,8.793A.99989.99989,0,1,1,29.70605,10.207Z",
-      fill: "currentColor",
-    }),
-  );
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconChevronDown2Px =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M15.993 23.914 2.294 10.207a1 1 0 1 1 1.414-1.414l12.285 12.293L28.292 8.793a1 1 0 1 1 1.414 1.414Z'/%3e%3c/svg%3e";
 
 var filterOptions = function (options, value) {
     return options.filter(function (option) {
@@ -12719,7 +12694,7 @@ var ComboBox = forwardRef(function (_a, ref) {
             "arc-ComboBox--constrained": !isFluid,
         }) },
         React__default.createElement("div", { ref: containerRef },
-            React__default.createElement(Root2$2, { open: isExpanded },
+            React__default.createElement(Root2$3, { open: isExpanded },
                 React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
                     React__default.createElement("div", { onClick: onInputClick, className: classNames("arc-ComboBox-container", {
                             "arc-ComboBox-container--cursor": isAutocomplete,
@@ -12738,10 +12713,10 @@ var ComboBox = forwardRef(function (_a, ref) {
                         isAutocomplete && (React__default.createElement("div", { className: classNames("arc-ComboBox-inputIcon", {
                                 "arc-ComboBox-inputIcon--expanded": isExpanded,
                             }) },
-                            React__default.createElement(Icon$1, { isPresentationIcon: true, icon: BtIconChevronDown2Px, size: 24 }))))),
-                React__default.createElement(Anchor2, null),
-                React__default.createElement(Portal$4, { container: themeElement },
-                    React__default.createElement(Content2$2, { align: "start", sideOffset: 5, onInteractOutside: onInteractOutside, onOpenAutoFocus: onOpenAutoFocus },
+                            React__default.createElement(Icon$1, { icon: BtIconChevronDown2Px, size: 24 }))))),
+                React__default.createElement(Anchor2$1, null),
+                React__default.createElement(Portal$5, { container: themeElement },
+                    React__default.createElement(Content2$4, { align: "start", sideOffset: 5, onInteractOutside: onInteractOutside, onOpenAutoFocus: onOpenAutoFocus },
                         React__default.createElement("div", { className: "arc-ComboBox-listboxContainer" },
                             React__default.createElement(Box, { elevationLevel: "1" },
                                 React__default.createElement("ul", { ref: setScrollPosition, id: listBoxId, className: "arc-ComboBox-list", role: "listbox", "aria-label": listBoxAriaLabel, "aria-multiselectable": isMultiSelectable }, options.length ? (options.map(function (option, i) { return (React__default.createElement("li", { id: "".concat(listBoxId, "-").concat(i), ref: function (el) { return (listItemRefs.current[i] = el); }, key: option, className: classNames("arc-ComboBox-listItem", {
@@ -12754,44 +12729,6 @@ var ComboBox = forwardRef(function (_a, ref) {
                                         React__default.createElement(ThemeIcon, { size: 20, icon: "selectIndicator" })))); })) : (React__default.createElement("li", { className: "arc-ComboBox-listItem", role: "option", "aria-selected": false, "aria-disabled": true }, "No matches found")))))))))));
 });
 
-/**
- * Use `Columns` to compose layouts on a 12-column grid.
- */
-var Columns = function (_a) {
-    var children = _a.children, _b = _a.isGutterless, isGutterless = _b === void 0 ? false : _b, _c = _a.isExtended, isExtended = _c === void 0 ? false : _c, props = __rest(_a, ["children", "isGutterless", "isExtended"]);
-    return (React__default.createElement("div", __assign({ className: classNames({
-            "arc-Columns": true,
-            "arc-Columns--regular": !isExtended,
-            "arc-Columns--extended": isExtended,
-            "arc-Columns--gutterless": isGutterless,
-        }) }, filterAttrs(props)),
-        React__default.createElement("div", { className: "arc-Columns-inner" }, children)));
-};
-var ColumnsCol = function (_a) {
-    var _b;
-    var align = _a.align, children = _a.children, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, offset = _a.offset, offsetS = _a.offsetS, offsetM = _a.offsetM, offsetL = _a.offsetL, offsetXL = _a.offsetXL, span = _a.span, spanS = _a.spanS, spanM = _a.spanM, spanL = _a.spanL, spanXL = _a.spanXL, props = __rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
-    return (React__default.createElement("div", __assign({ className: classNames((_b = {},
-            _b["arc-Columns-col"] = true,
-            _b[suffixModifier("arc-Columns-col--align", align || "")] = align,
-            _b["arc-Columns-col--".concat(span)] = typeof span !== "undefined",
-            _b["arc-Columns-col--s".concat(spanS)] = typeof spanS !== "undefined",
-            _b["arc-Columns-col--m".concat(spanM)] = typeof spanM !== "undefined",
-            _b["arc-Columns-col--l".concat(spanL)] = typeof spanL !== "undefined",
-            _b["arc-Columns-col--xL".concat(spanXL)] = typeof spanXL !== "undefined",
-            _b["arc-Columns-col--offset"] = typeof offset !== "undefined" ||
-                typeof offsetS !== "undefined" ||
-                typeof offsetM !== "undefined" ||
-                typeof offsetL !== "undefined" ||
-                typeof offsetXL !== "undefined",
-            _b["arc-Columns-col--offset".concat(offset)] = typeof offset !== "undefined",
-            _b["arc-Columns-col--offsetS".concat(offsetS)] = typeof offsetS !== "undefined",
-            _b["arc-Columns-col--offsetM".concat(offsetM)] = typeof offsetM !== "undefined",
-            _b["arc-Columns-col--offsetL".concat(offsetL)] = typeof offsetL !== "undefined",
-            _b["arc-Columns-col--offsetXL".concat(offsetXL)] = typeof offsetXL !== "undefined",
-            _b["arc-Columns-col--debugVisible"] = isDebugVisible,
-            _b)) }, filterAttrs(props)), children));
-};
-
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -13958,14 +13895,14 @@ var VisuallyHidden$1 = React.forwardRef(
 VisuallyHidden$1.displayName = NAME$2;
 
 var OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
-var SELECTION_KEYS = [" ", "Enter"];
+var SELECTION_KEYS$1 = [" ", "Enter"];
 var SELECT_NAME = "Select";
-var [Collection, useCollection, createCollectionScope] = createCollection(SELECT_NAME);
+var [Collection$2, useCollection$2, createCollectionScope$2] = createCollection(SELECT_NAME);
 var [createSelectContext, createSelectScope] = createContextScope$1(SELECT_NAME, [
-  createCollectionScope,
+  createCollectionScope$2,
   createPopperScope$1
 ]);
-var usePopperScope$1 = createPopperScope$1();
+var usePopperScope$2 = createPopperScope$1();
 var [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);
 var [SelectNativeOptionsProvider, useSelectNativeOptionsContext] = createSelectContext(SELECT_NAME);
 var Select$1 = (props) => {
@@ -13985,7 +13922,7 @@ var Select$1 = (props) => {
     required,
     form
   } = props;
-  const popperScope = usePopperScope$1(__scopeSelect);
+  const popperScope = usePopperScope$2(__scopeSelect);
   const [trigger, setTrigger] = React.useState(null);
   const [valueNode, setValueNode] = React.useState(null);
   const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false);
@@ -14004,7 +13941,7 @@ var Select$1 = (props) => {
   const isFormControl = trigger ? form || !!trigger.closest("form") : true;
   const [nativeOptionsSet, setNativeOptionsSet] = React.useState(/* @__PURE__ */ new Set());
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
-  return /* @__PURE__ */ jsx(Root2$3, { ...popperScope, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Root2$4, { ...popperScope, children: /* @__PURE__ */ jsxs(
     SelectProvider,
     {
       required,
@@ -14024,7 +13961,7 @@ var Select$1 = (props) => {
       triggerPointerDownPosRef,
       disabled,
       children: [
-        /* @__PURE__ */ jsx(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Collection$2.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx(
           SelectNativeOptionsProvider,
           {
             scope: props.__scopeSelect,
@@ -14065,15 +14002,15 @@ var Select$1 = (props) => {
   ) });
 };
 Select$1.displayName = SELECT_NAME;
-var TRIGGER_NAME$2 = "SelectTrigger";
+var TRIGGER_NAME$3 = "SelectTrigger";
 var SelectTrigger = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, disabled = false, ...triggerProps } = props;
-    const popperScope = usePopperScope$1(__scopeSelect);
-    const context = useSelectContext(TRIGGER_NAME$2, __scopeSelect);
+    const popperScope = usePopperScope$2(__scopeSelect);
+    const context = useSelectContext(TRIGGER_NAME$3, __scopeSelect);
     const isDisabled = context.disabled || disabled;
     const composedRefs = useComposedRefs$1(forwardedRef, context.onTriggerChange);
-    const getItems = useCollection(__scopeSelect);
+    const getItems = useCollection$2(__scopeSelect);
     const pointerTypeRef = React.useRef("touch");
     const [searchRef, handleTypeaheadSearch, resetTypeahead] = useTypeaheadSearch((search) => {
       const enabledItems = getItems().filter((item) => !item.disabled);
@@ -14142,7 +14079,7 @@ var SelectTrigger = React.forwardRef(
     ) });
   }
 );
-SelectTrigger.displayName = TRIGGER_NAME$2;
+SelectTrigger.displayName = TRIGGER_NAME$3;
 var VALUE_NAME = "SelectValue";
 var SelectValue = React.forwardRef(
   (props, forwardedRef) => {
@@ -14174,15 +14111,15 @@ var SelectIcon = React.forwardRef(
   }
 );
 SelectIcon.displayName = ICON_NAME;
-var PORTAL_NAME$3 = "SelectPortal";
+var PORTAL_NAME$5 = "SelectPortal";
 var SelectPortal = (props) => {
-  return /* @__PURE__ */ jsx(Portal$5, { asChild: true, ...props });
+  return /* @__PURE__ */ jsx(Portal$6, { asChild: true, ...props });
 };
-SelectPortal.displayName = PORTAL_NAME$3;
-var CONTENT_NAME$3 = "SelectContent";
+SelectPortal.displayName = PORTAL_NAME$5;
+var CONTENT_NAME$5 = "SelectContent";
 var SelectContent = React.forwardRef(
   (props, forwardedRef) => {
-    const context = useSelectContext(CONTENT_NAME$3, props.__scopeSelect);
+    const context = useSelectContext(CONTENT_NAME$5, props.__scopeSelect);
     const [fragment, setFragment] = React.useState();
     useLayoutEffect2(() => {
       setFragment(new DocumentFragment());
@@ -14190,16 +14127,16 @@ var SelectContent = React.forwardRef(
     if (!context.open) {
       const frag = fragment;
       return frag ? ReactDOM.createPortal(
-        /* @__PURE__ */ jsx(SelectContentProvider, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx("div", { children: props.children }) }) }),
+        /* @__PURE__ */ jsx(SelectContentProvider, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx(Collection$2.Slot, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx("div", { children: props.children }) }) }),
         frag
       ) : null;
     }
     return /* @__PURE__ */ jsx(SelectContentImpl, { ...props, ref: forwardedRef });
   }
 );
-SelectContent.displayName = CONTENT_NAME$3;
+SelectContent.displayName = CONTENT_NAME$5;
 var CONTENT_MARGIN = 10;
-var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME$3);
+var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME$5);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
 var SelectContentImpl = React.forwardRef(
   (props, forwardedRef) => {
@@ -14224,7 +14161,7 @@ var SelectContentImpl = React.forwardRef(
       //
       ...contentProps
     } = props;
-    const context = useSelectContext(CONTENT_NAME$3, __scopeSelect);
+    const context = useSelectContext(CONTENT_NAME$5, __scopeSelect);
     const [content, setContent] = React.useState(null);
     const [viewport, setViewport] = React.useState(null);
     const composedRefs = useComposedRefs$1(forwardedRef, (node) => setContent(node));
@@ -14232,7 +14169,7 @@ var SelectContentImpl = React.forwardRef(
     const [selectedItemText, setSelectedItemText] = React.useState(
       null
     );
-    const getItems = useCollection(__scopeSelect);
+    const getItems = useCollection$2(__scopeSelect);
     const [isPositioned, setIsPositioned] = React.useState(false);
     const firstValidItemFoundRef = React.useRef(false);
     React.useEffect(() => {
@@ -14437,12 +14374,12 @@ SelectContentImpl.displayName = CONTENT_IMPL_NAME;
 var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
 var SelectItemAlignedPosition = React.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onPlaced, ...popperProps } = props;
-  const context = useSelectContext(CONTENT_NAME$3, __scopeSelect);
-  const contentContext = useSelectContentContext(CONTENT_NAME$3, __scopeSelect);
+  const context = useSelectContext(CONTENT_NAME$5, __scopeSelect);
+  const contentContext = useSelectContentContext(CONTENT_NAME$5, __scopeSelect);
   const [contentWrapper, setContentWrapper] = React.useState(null);
   const [content, setContent] = React.useState(null);
   const composedRefs = useComposedRefs$1(forwardedRef, (node) => setContent(node));
-  const getItems = useCollection(__scopeSelect);
+  const getItems = useCollection$2(__scopeSelect);
   const shouldExpandOnScrollRef = React.useRef(false);
   const shouldRepositionRef = React.useRef(true);
   const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
@@ -14606,7 +14543,7 @@ var SelectPopperPosition = React.forwardRef((props, forwardedRef) => {
     collisionPadding = CONTENT_MARGIN,
     ...popperProps
   } = props;
-  const popperScope = usePopperScope$1(__scopeSelect);
+  const popperScope = usePopperScope$2(__scopeSelect);
   return /* @__PURE__ */ jsx(
     Content$2,
     {
@@ -14632,7 +14569,7 @@ var SelectPopperPosition = React.forwardRef((props, forwardedRef) => {
   );
 });
 SelectPopperPosition.displayName = POPPER_POSITION_NAME;
-var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME$3, {});
+var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME$5, {});
 var VIEWPORT_NAME = "SelectViewport";
 var SelectViewport = React.forwardRef(
   (props, forwardedRef) => {
@@ -14651,7 +14588,7 @@ var SelectViewport = React.forwardRef(
           nonce
         }
       ),
-      /* @__PURE__ */ jsx(Collection.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Collection$2.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ jsx(
         Primitive$1.div,
         {
           "data-radix-select-viewport": "",
@@ -14701,8 +14638,8 @@ var SelectViewport = React.forwardRef(
   }
 );
 SelectViewport.displayName = VIEWPORT_NAME;
-var GROUP_NAME = "SelectGroup";
-var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
+var GROUP_NAME$3 = "SelectGroup";
+var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME$3);
 var SelectGroup = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...groupProps } = props;
@@ -14710,18 +14647,18 @@ var SelectGroup = React.forwardRef(
     return /* @__PURE__ */ jsx(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx(Primitive$1.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
   }
 );
-SelectGroup.displayName = GROUP_NAME;
-var LABEL_NAME = "SelectLabel";
+SelectGroup.displayName = GROUP_NAME$3;
+var LABEL_NAME$2 = "SelectLabel";
 var SelectLabel = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...labelProps } = props;
-    const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
+    const groupContext = useSelectGroupContext(LABEL_NAME$2, __scopeSelect);
     return /* @__PURE__ */ jsx(Primitive$1.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
   }
 );
-SelectLabel.displayName = LABEL_NAME;
-var ITEM_NAME = "SelectItem";
-var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
+SelectLabel.displayName = LABEL_NAME$2;
+var ITEM_NAME$3 = "SelectItem";
+var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME$3);
 var SelectItem = React.forwardRef(
   (props, forwardedRef) => {
     const {
@@ -14731,8 +14668,8 @@ var SelectItem = React.forwardRef(
       textValue: textValueProp,
       ...itemProps
     } = props;
-    const context = useSelectContext(ITEM_NAME, __scopeSelect);
-    const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
+    const context = useSelectContext(ITEM_NAME$3, __scopeSelect);
+    const contentContext = useSelectContentContext(ITEM_NAME$3, __scopeSelect);
     const isSelected = context.value === value;
     const [textValue, setTextValue] = React.useState(textValueProp ?? "");
     const [isFocused, setIsFocused] = React.useState(false);
@@ -14765,7 +14702,7 @@ var SelectItem = React.forwardRef(
           setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
         }, []),
         children: /* @__PURE__ */ jsx(
-          Collection.ItemSlot,
+          Collection$2.ItemSlot,
           {
             scope: __scopeSelect,
             value,
@@ -14811,7 +14748,7 @@ var SelectItem = React.forwardRef(
                 onKeyDown: composeEventHandlers$1(itemProps.onKeyDown, (event) => {
                   const isTypingAhead = contentContext.searchRef?.current !== "";
                   if (isTypingAhead && event.key === " ") return;
-                  if (SELECTION_KEYS.includes(event.key)) handleSelect();
+                  if (SELECTION_KEYS$1.includes(event.key)) handleSelect();
                   if (event.key === " ") event.preventDefault();
                 })
               }
@@ -14822,7 +14759,7 @@ var SelectItem = React.forwardRef(
     );
   }
 );
-SelectItem.displayName = ITEM_NAME;
+SelectItem.displayName = ITEM_NAME$3;
 var ITEM_TEXT_NAME = "SelectItemText";
 var SelectItemText = React.forwardRef(
   (props, forwardedRef) => {
@@ -14855,15 +14792,15 @@ var SelectItemText = React.forwardRef(
   }
 );
 SelectItemText.displayName = ITEM_TEXT_NAME;
-var ITEM_INDICATOR_NAME = "SelectItemIndicator";
+var ITEM_INDICATOR_NAME$1 = "SelectItemIndicator";
 var SelectItemIndicator = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...itemIndicatorProps } = props;
-    const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
+    const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME$1, __scopeSelect);
     return itemContext.isSelected ? /* @__PURE__ */ jsx(Primitive$1.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
   }
 );
-SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
+SelectItemIndicator.displayName = ITEM_INDICATOR_NAME$1;
 var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
 var SelectScrollUpButton = React.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
@@ -14935,7 +14872,7 @@ var SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
   const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
   const autoScrollTimerRef = React.useRef(null);
-  const getItems = useCollection(__scopeSelect);
+  const getItems = useCollection$2(__scopeSelect);
   const clearAutoScrollTimer = React.useCallback(() => {
     if (autoScrollTimerRef.current !== null) {
       window.clearInterval(autoScrollTimerRef.current);
@@ -14973,25 +14910,25 @@ var SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
     }
   );
 });
-var SEPARATOR_NAME = "SelectSeparator";
+var SEPARATOR_NAME$2 = "SelectSeparator";
 var SelectSeparator = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...separatorProps } = props;
     return /* @__PURE__ */ jsx(Primitive$1.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
   }
 );
-SelectSeparator.displayName = SEPARATOR_NAME;
-var ARROW_NAME$2 = "SelectArrow";
+SelectSeparator.displayName = SEPARATOR_NAME$2;
+var ARROW_NAME$4 = "SelectArrow";
 var SelectArrow = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...arrowProps } = props;
-    const popperScope = usePopperScope$1(__scopeSelect);
-    const context = useSelectContext(ARROW_NAME$2, __scopeSelect);
-    const contentContext = useSelectContentContext(ARROW_NAME$2, __scopeSelect);
+    const popperScope = usePopperScope$2(__scopeSelect);
+    const context = useSelectContext(ARROW_NAME$4, __scopeSelect);
+    const contentContext = useSelectContentContext(ARROW_NAME$4, __scopeSelect);
     return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx(Arrow$2, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
   }
 );
-SelectArrow.displayName = ARROW_NAME$2;
+SelectArrow.displayName = ARROW_NAME$4;
 function shouldShowPlaceholder(value) {
   return value === "" || value === void 0;
 }
@@ -15048,7 +14985,7 @@ function findNextItem(items, search, currentItem) {
   const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
   const normalizedSearch = isRepeated ? search[0] : search;
   const currentItemIndex = currentItem ? items.indexOf(currentItem) : -1;
-  let wrappedItems = wrapArray(items, Math.max(currentItemIndex, 0));
+  let wrappedItems = wrapArray$2(items, Math.max(currentItemIndex, 0));
   const excludeCurrentItem = normalizedSearch.length === 1;
   if (excludeCurrentItem) wrappedItems = wrappedItems.filter((v) => v !== currentItem);
   const nextItem = wrappedItems.find(
@@ -15056,19 +14993,19 @@ function findNextItem(items, search, currentItem) {
   );
   return nextItem !== currentItem ? nextItem : void 0;
 }
-function wrapArray(array, startIndex) {
+function wrapArray$2(array, startIndex) {
   return array.map((_, index) => array[(startIndex + index) % array.length]);
 }
-var Root2$1 = Select$1;
-var Trigger$1 = SelectTrigger;
+var Root2$2 = Select$1;
+var Trigger$2 = SelectTrigger;
 var Value = SelectValue;
 var Icon = SelectIcon;
-var Portal$3 = SelectPortal;
-var Content2$1 = SelectContent;
+var Portal$4 = SelectPortal;
+var Content2$3 = SelectContent;
 var Viewport = SelectViewport;
-var Item = SelectItem;
+var Item$1 = SelectItem;
 var ItemText = SelectItemText;
-var ItemIndicator = SelectItemIndicator;
+var ItemIndicator$1 = SelectItemIndicator;
 var ScrollUpButton = SelectScrollUpButton;
 var ScrollDownButton = SelectScrollDownButton;
 
@@ -15098,7 +15035,7 @@ var ContentSwitcherDropdown = function (_a) {
         return current.label.length > longest.length ? current.label : longest;
     }, ""));
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Root2$1, { defaultValue: defaultValue, onValueChange: onValueChangeHandler, value: selectValue },
+        React__default.createElement(Root2$2, { defaultValue: defaultValue, onValueChange: onValueChangeHandler, value: selectValue },
             React__default.createElement("span", __assign({ className: classNames("arc-ContentSwitcherDropdown-selectTriggerWrapper", {
                     "arc-ContentSwitcherDropdown-selectTriggerWrapper--isInset": isInset,
                     "arc-ContentSwitcherDropdown-selectTriggerWrapper--isFluid": isFluid,
@@ -15107,16 +15044,17 @@ var ContentSwitcherDropdown = function (_a) {
                     width: width ? width : LongestLabelWidth + 84,
                 },
             }), filterAttrs(props)),
-                React__default.createElement(Trigger$1, { className: "arc-ContentSwitcherDropdown-selectTrigger", "aria-label": ariaLabel },
+                React__default.createElement(Trigger$2, { className: "arc-ContentSwitcherDropdown-selectTrigger", "aria-label": ariaLabel },
                     React__default.createElement(Value, null),
                     React__default.createElement(Icon, { className: "arc-ContentSwitcherDropdown-selectTriggerIcon" },
-                        React__default.createElement(ThemeIcon, { size: 24, icon: "selectTrigger" })))),
-            React__default.createElement(Portal$3, { container: themeElement },
-                React__default.createElement(Content2$1, { className: "arc-ContentSwitcherDropdown-selectContent", sideOffset: 8, position: "popper" },
+                        React__default.createElement(ThemeIcon, { size: 24, icon: "selectTrigger" })),
+                    React__default.createElement(VisuallyHidden$2, null, ". This is a content switcher. Use the dropdown to select a section. The content below will update based on your selection."))),
+            React__default.createElement(Portal$4, { container: themeElement },
+                React__default.createElement(Content2$3, { className: "arc-ContentSwitcherDropdown-selectContent", sideOffset: 8, position: "popper" },
                     React__default.createElement(ScrollUpButton, null),
-                    React__default.createElement(Viewport, null, tabs.map(function (item, index) { return (React__default.createElement(Item, { value: item.value, key: index, className: "arc-ContentSwitcherDropdown-selectItem", id: "arc-content-switcher-dropdown-trigger-".concat(item.value) },
+                    React__default.createElement(Viewport, null, tabs.map(function (item, index) { return (React__default.createElement(Item$1, { value: item.value, key: index, className: "arc-ContentSwitcherDropdown-selectItem", id: "arc-content-switcher-dropdown-trigger-".concat(item.value) },
                         React__default.createElement(ItemText, null, item.label),
-                        React__default.createElement(ItemIndicator, null,
+                        React__default.createElement(ItemIndicator$1, null,
                             React__default.createElement(ThemeIcon, { size: 24, icon: "selectIndicator" })))); })),
                     React__default.createElement(ScrollDownButton, null)))),
         React__default.Children.map(children, function (child) {
@@ -15491,10 +15429,10 @@ var DatePicker = forwardRef(function (_a, ref) {
                 label: ariaLabel,
                 ref: buttonRef,
             }, placeholder: placeHolder, errorMessage: errorMessage, helper: helper, id: id, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, label: label, labelSize: labelSize, maxLength: selectionType === "range" ? 23 : 10, name: name, onBlur: handleBlur, onChange: handleChange, onClickDisclosure: onClickDisclosure, type: "text", value: value, disclosureTitle: disclosureTitle, disclosureText: disclosureText, inputSize: inputSize }, props, filterAttrs(props))),
-        React__default.createElement(Root2$2, __assign({ open: showCalendar, onOpenChange: handleCalendarOpenChange }, filterAttrs(props)),
-            React__default.createElement(Anchor2, null),
-            React__default.createElement(Portal$4, { container: themeElement },
-                React__default.createElement(Content2$2, { align: "start", "aria-modal": "true", "aria-label": "Choose Date", className: "arc-DatePicker-modal", onOpenAutoFocus: handleAutoFocus, onCloseAutoFocus: handleCalendarClose },
+        React__default.createElement(Root2$3, __assign({ open: showCalendar, onOpenChange: handleCalendarOpenChange }, filterAttrs(props)),
+            React__default.createElement(Anchor2$1, null),
+            React__default.createElement(Portal$5, { container: themeElement },
+                React__default.createElement(Content2$4, { align: "start", "aria-modal": "true", "aria-label": "Choose Date", className: "arc-DatePicker-modal", onOpenAutoFocus: handleAutoFocus, onCloseAutoFocus: handleCalendarClose },
                     React__default.createElement(Calendar, { autoFocusOnMount: true, type: type, onCancelClick: onCancelClick, selectionType: selectionType, selectedDate: convertDateStringToDate(value), selectedRange: convertRangeStringToDates(value), disabledDates: disabledDates, minDate: minDate, maxDate: maxDate, onDateSelect: handleDateSelect, onRangeSelect: handleRangeSelect }))))));
 });
 
@@ -15520,6 +15458,35 @@ var Disclosure = function (_a) {
         React__default.createElement("div", { className: "arc-Disclosure-details" }, children)));
 };
 
+var Download = function (_a) {
+    var name = _a.name, onClick = _a.onClick, description = _a.description, href = _a.href, type = _a.type, size = _a.size, _b = _a.icon, icon = _b === void 0 ? "downloadFile" : _b, _c = _a.isCompact, isCompact = _c === void 0 ? false : _c, _d = _a.isFullWidth, isFullWidth = _d === void 0 ? true : _d;
+    var linkProps = href
+        ? {
+            href: href,
+            download: true,
+            target: "_blank",
+            rel: "noreferrer",
+        }
+        : {
+            role: "button",
+        };
+    return (React__default.createElement("a", __assign({}, linkProps, { className: classNames("arc-Download", {
+            "arc-Download--maxContent": !isFullWidth,
+            "arc-Download--compact": isCompact,
+        }), "aria-label": name, onClick: onClick }),
+        React__default.createElement("div", { className: "arc-Download-iconContainer" },
+            React__default.createElement(ThemeIcon, { size: isCompact ? 40 : 64, icon: icon })),
+        React__default.createElement("div", { className: "arc-Download-contentContainer" },
+            React__default.createElement("span", { className: "arc-Download-name" }, name),
+            React__default.createElement(Text, { tone: "muted", size: "xs" },
+                type,
+                "\u00A0",
+                size && "| ".concat(size)),
+            description && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(VerticalSpace, { size: "4" }),
+                React__default.createElement(Text, { tone: "supporting" }, description))))));
+};
+
 const LEFT = "Left";
 const RIGHT = "Right";
 const UP = "Up";
@@ -15824,11 +15791,11 @@ var Dialog = (props) => {
   );
 };
 Dialog.displayName = DIALOG_NAME;
-var TRIGGER_NAME$1 = "DialogTrigger";
+var TRIGGER_NAME$2 = "DialogTrigger";
 var DialogTrigger = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDialog, ...triggerProps } = props;
-    const context = useDialogContext(TRIGGER_NAME$1, __scopeDialog);
+    const context = useDialogContext(TRIGGER_NAME$2, __scopeDialog);
     const composedTriggerRef = useComposedRefs$1(forwardedRef, context.triggerRef);
     return /* @__PURE__ */ jsx(
       Primitive$1.button,
@@ -15845,21 +15812,21 @@ var DialogTrigger = React.forwardRef(
     );
   }
 );
-DialogTrigger.displayName = TRIGGER_NAME$1;
-var PORTAL_NAME$2 = "DialogPortal";
-var [PortalProvider$1, usePortalContext$1] = createDialogContext(PORTAL_NAME$2, {
+DialogTrigger.displayName = TRIGGER_NAME$2;
+var PORTAL_NAME$4 = "DialogPortal";
+var [PortalProvider$2, usePortalContext$2] = createDialogContext(PORTAL_NAME$4, {
   forceMount: void 0
 });
 var DialogPortal = (props) => {
   const { __scopeDialog, forceMount, children, container } = props;
-  const context = useDialogContext(PORTAL_NAME$2, __scopeDialog);
-  return /* @__PURE__ */ jsx(PortalProvider$1, { scope: __scopeDialog, forceMount, children: React.Children.map(children, (child) => /* @__PURE__ */ jsx(Presence$1, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$5, { asChild: true, container, children: child }) })) });
+  const context = useDialogContext(PORTAL_NAME$4, __scopeDialog);
+  return /* @__PURE__ */ jsx(PortalProvider$2, { scope: __scopeDialog, forceMount, children: React.Children.map(children, (child) => /* @__PURE__ */ jsx(Presence$1, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$6, { asChild: true, container, children: child }) })) });
 };
-DialogPortal.displayName = PORTAL_NAME$2;
+DialogPortal.displayName = PORTAL_NAME$4;
 var OVERLAY_NAME = "DialogOverlay";
 var DialogOverlay = React.forwardRef(
   (props, forwardedRef) => {
-    const portalContext = usePortalContext$1(OVERLAY_NAME, props.__scopeDialog);
+    const portalContext = usePortalContext$2(OVERLAY_NAME, props.__scopeDialog);
     const { forceMount = portalContext.forceMount, ...overlayProps } = props;
     const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);
     return context.modal ? /* @__PURE__ */ jsx(Presence$1, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null;
@@ -15885,19 +15852,19 @@ var DialogOverlayImpl = React.forwardRef(
     );
   }
 );
-var CONTENT_NAME$2 = "DialogContent";
+var CONTENT_NAME$4 = "DialogContent";
 var DialogContent = React.forwardRef(
   (props, forwardedRef) => {
-    const portalContext = usePortalContext$1(CONTENT_NAME$2, props.__scopeDialog);
+    const portalContext = usePortalContext$2(CONTENT_NAME$4, props.__scopeDialog);
     const { forceMount = portalContext.forceMount, ...contentProps } = props;
-    const context = useDialogContext(CONTENT_NAME$2, props.__scopeDialog);
+    const context = useDialogContext(CONTENT_NAME$4, props.__scopeDialog);
     return /* @__PURE__ */ jsx(Presence$1, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ jsx(DialogContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
   }
 );
-DialogContent.displayName = CONTENT_NAME$2;
+DialogContent.displayName = CONTENT_NAME$4;
 var DialogContentModal = React.forwardRef(
   (props, forwardedRef) => {
-    const context = useDialogContext(CONTENT_NAME$2, props.__scopeDialog);
+    const context = useDialogContext(CONTENT_NAME$4, props.__scopeDialog);
     const contentRef = React.useRef(null);
     const composedRefs = useComposedRefs$1(forwardedRef, context.contentRef, contentRef);
     React.useEffect(() => {
@@ -15931,7 +15898,7 @@ var DialogContentModal = React.forwardRef(
 );
 var DialogContentNonModal = React.forwardRef(
   (props, forwardedRef) => {
-    const context = useDialogContext(CONTENT_NAME$2, props.__scopeDialog);
+    const context = useDialogContext(CONTENT_NAME$4, props.__scopeDialog);
     const hasInteractedOutsideRef = React.useRef(false);
     const hasPointerDownOutsideRef = React.useRef(false);
     return /* @__PURE__ */ jsx(
@@ -15972,7 +15939,7 @@ var DialogContentNonModal = React.forwardRef(
 var DialogContentImpl = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;
-    const context = useDialogContext(CONTENT_NAME$2, __scopeDialog);
+    const context = useDialogContext(CONTENT_NAME$4, __scopeDialog);
     const contentRef = React.useRef(null);
     const composedRefs = useComposedRefs$1(forwardedRef, contentRef);
     useFocusGuards();
@@ -16047,7 +16014,7 @@ function getState(open) {
 }
 var TITLE_WARNING_NAME = "DialogTitleWarning";
 var [WarningProvider, useWarningContext] = createContext2(TITLE_WARNING_NAME, {
-  contentName: CONTENT_NAME$2,
+  contentName: CONTENT_NAME$4,
   titleName: TITLE_NAME,
   docsSlug: "dialog"
 });
@@ -16079,8 +16046,8 @@ var DescriptionWarning = ({ contentRef, descriptionId }) => {
   }, [MESSAGE, contentRef, descriptionId]);
   return null;
 };
-var Root$2 = Dialog;
-var Portal$2 = DialogPortal;
+var Root$3 = Dialog;
+var Portal$3 = DialogPortal;
 var Overlay = DialogOverlay;
 var Content$1 = DialogContent;
 var Title = DialogTitle;
@@ -16130,8 +16097,8 @@ var Drawer = function (_a) {
         }
         : {};
     return (React__default.createElement("div", { ref: setThemeElement },
-        React__default.createElement(Root$2, { open: isOpen },
-            React__default.createElement(Portal$2, { container: themeElement },
+        React__default.createElement(Root$3, { open: isOpen },
+            React__default.createElement(Portal$3, { container: themeElement },
                 React__default.createElement(Overlay, { style: exitTransitionStyle.overlay, className: classNames("arc-Drawer-overlay", {
                         "arc-Drawer-overlay--visible": isOverlayVisible,
                     }) },
@@ -16155,35 +16122,6 @@ var Drawer = function (_a) {
                             React__default.createElement(VerticalSpace, { size: "32" }))))))));
 };
 
-var Download = function (_a) {
-    var name = _a.name, onClick = _a.onClick, description = _a.description, href = _a.href, type = _a.type, size = _a.size, _b = _a.icon, icon = _b === void 0 ? "downloadFile" : _b, _c = _a.isCompact, isCompact = _c === void 0 ? false : _c, _d = _a.isFullWidth, isFullWidth = _d === void 0 ? true : _d;
-    var linkProps = href
-        ? {
-            href: href,
-            download: true,
-            target: "_blank",
-            rel: "noreferrer",
-        }
-        : {
-            role: "button",
-        };
-    return (React__default.createElement("a", __assign({}, linkProps, { className: classNames("arc-Download", {
-            "arc-Download--maxContent": !isFullWidth,
-            "arc-Download--compact": isCompact,
-        }), "aria-label": name, onClick: onClick }),
-        React__default.createElement("div", { className: "arc-Download-iconContainer" },
-            React__default.createElement(ThemeIcon, { size: isCompact ? 40 : 64, icon: icon })),
-        React__default.createElement("div", { className: "arc-Download-contentContainer" },
-            React__default.createElement("span", { className: "arc-Download-name" }, name),
-            React__default.createElement(Text, { tone: "muted", size: "xs" },
-                type,
-                "\u00A0",
-                size && "| ".concat(size)),
-            description && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(VerticalSpace, { size: "4" }),
-                React__default.createElement(Text, { tone: "supporting" }, description))))));
-};
-
 /**
  * Use `Elevation` to elevate what matters.
  */
@@ -16290,10 +16228,37 @@ var FilterItem = function (_a) {
     return React__default.createElement("div", { className: "arc-FilterItem" }, children);
 };
 
+var GhostedHeroBanner = function (_a) {
+    var heading = _a.heading, headingLevel = _a.headingLevel, label = _a.label, text = _a.text, img = _a.img, children = _a.children, props = __rest(_a, ["heading", "headingLevel", "label", "text", "img", "children"]);
+    return (React__default.createElement("div", __assign({ className: "arc-GhostedHeroBanner" }, filterAttrs(props)),
+        React__default.createElement("div", { className: "arc-GhostedHeroBanner-content" },
+            label && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Heading, { size: "xxs" }, label.toUpperCase()),
+                React__default.createElement(VerticalSpace, { size: "8" }))),
+            React__default.createElement(Heading, { level: headingLevel, size: "xl" }, 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,
+                React__default.createElement(VerticalSpace, { size: "32" }),
+                children))),
+        React__default.createElement("div", { className: "arc-GhostedHeroBanner-image " }, img && React__default.createElement(BannerImage, __assign({ ariaHidden: true }, img)))));
+};
+
+var GradientBackground = function (_a) {
+    var _b;
+    var _c = _a.type, type = _c === void 0 ? "lightOne" : _c, children = _a.children, scrim = _a.scrim, props = __rest(_a, ["type", "children", "scrim"]);
+    return (React__default.createElement("div", __assign({ className: classNames("arc-GradientBackground", "arc-GradientBackground--".concat(type), (_b = {},
+            _b["arc-GradientBackground-scrim--".concat(scrim)] = scrim,
+            _b)) }, filterAttrs(props)),
+        React__default.createElement("div", { className: "arc-GradientBackground-content" },
+            React__default.createElement(Surface, { isTransparent: true, background: type === "lightOne" ? "light-white" : "dark-black" }, children))));
+};
+
 /**
  * Use `Group` to arrange flexible items in a row.
  */
-var Group = function (_a) {
+var Group$1 = function (_a) {
     var _b;
     var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.growEqual, growEqual = _d === void 0 ? false : _d, _e = _a.gutterBorder, gutterBorder = _e === void 0 ? false : _e, _f = _a.noWrap, noWrap = _f === void 0 ? false : _f, _g = _a.isExtended, isExtended = _g === void 0 ? false : _g, props = __rest(_a, ["children", "grow", "growEqual", "gutterBorder", "noWrap", "isExtended"]);
     var surface = useContext(Context$3).surface;
@@ -16328,78 +16293,37 @@ var HeroBanner = function (_a) {
         React__default.createElement(TemplateBanner, __assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: "xl", alignment: "center" }, filterAttrs(props)), children)));
 };
 
-const BtIconArrowAltRight = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M18.85352,11.64648a.49995.49995,0,0,0-.707.707L21.293,15.5H9.5a.5.5,0,0,0,0,1H21.293l-3.14649,3.14648a.49995.49995,0,1,0,.707.707L23.207,16Z",
-      fill: "currentColor",
-    }),
-  );
+/**
+ * Do not edit directly
+ * Generated file
+ */
 
-const BtIconArrowAltDown = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M20.35352,18.14648a.49983.49983,0,0,0-.707,0L16.5,21.293V9.5a.5.5,0,0,0-1,0V21.293l-3.14648-3.14648a.49995.49995,0,1,0-.707.707L16,23.207l4.35352-4.35352A.49982.49982,0,0,0,20.35352,18.14648Z",
-      fill: "currentColor",
-    }),
-  );
+const BtIconArrowAltRight =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M18.854 11.646a.5.5 0 0 0-.707.707l3.146 3.147H9.5a.5.5 0 0 0 0 1h11.793l-3.146 3.146a.5.5 0 1 0 .707.707L23.207 16Z'/%3e%3c/svg%3e";
 
-const ArcIconPlay = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        viewBox: "0 0 56 56",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M36.4683 26.3206L23.9068 19.0686C23.6123 18.8984 23.2783 18.8088 22.9382 18.8086C22.5981 18.8084 22.264 18.8978 21.9694 19.0677C21.6748 19.2376 21.4301 19.4821 21.26 19.7765C21.0898 20.071 21.0001 20.4051 21 20.7451V35.2491C20.9985 35.5899 21.087 35.9251 21.2566 36.2207C21.4263 36.5162 21.671 36.7617 21.9661 36.9323C22.2612 37.1028 22.5961 37.1923 22.9369 37.1918C23.2777 37.1912 23.6123 37.1006 23.9068 36.9291L36.4683 29.6754C36.7626 29.5053 37.007 29.2608 37.1769 28.9664C37.3469 28.6719 37.4363 28.338 37.4363 27.998C37.4363 27.6581 37.3469 27.3241 37.1769 27.0297C37.007 26.7352 36.7626 26.4907 36.4683 26.3206ZM35.5933 28.1599L23.0318 35.4136C23.0035 35.4306 22.9711 35.4396 22.9381 35.4396C22.9052 35.4396 22.8728 35.4306 22.8445 35.4136C22.815 35.3977 22.7906 35.3739 22.7739 35.3448C22.7572 35.3158 22.7489 35.2826 22.75 35.2491V20.7451C22.7494 20.7122 22.7579 20.6797 22.7745 20.6513C22.7912 20.6229 22.8154 20.5996 22.8445 20.5841C22.8727 20.567 22.9051 20.5579 22.9381 20.5579C22.9712 20.5579 23.0036 20.567 23.0318 20.5841L35.5933 27.8344C35.6226 27.8505 35.647 27.8743 35.6637 27.9034C35.6803 27.9324 35.6887 27.9654 35.6878 27.9989C35.6882 28.0318 35.6796 28.0642 35.663 28.0926C35.6463 28.121 35.6222 28.1442 35.5933 28.1599Z",
-      fill: "currentColor",
-    }),
-  );
+/**
+ * Do not edit directly
+ * Generated file
+ */
 
-const ArcIconWarn = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("path", {
-      className: "cls-1",
-      fill: "currentColor",
-      d: "M16 20.99335A1 1 0 1 0 16 22.99335 1 1 0 1 0 16 20.99335z",
-    }),
-    /*#__PURE__*/ React__default.createElement("path", {
-      className: "cls-1",
-      d: "M16.00488,19.00977a.49972.49972,0,0,0,.5-.5L16.50684,9.5a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,19.00977Z",
-      fill: "currentColor",
-    }),
-  );
+const BtIconArrowAltDown =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M20.354 18.146a.5.5 0 0 0-.707 0L16.5 21.293V9.5a.5.5 0 0 0-1 0v11.793l-3.146-3.146a.5.5 0 1 0-.707.707L16 23.207l4.354-4.354a.5.5 0 0 0 0-.707'/%3e%3c/svg%3e";
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const ArcIconPlay =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 56 56'%3e%3cpath fill='currentColor' d='M36.468 26.32 23.907 19.07A1.938 1.938 0 0 0 21 20.745V35.25a1.935 1.935 0 0 0 2.907 1.68l12.561-7.254a1.938 1.938 0 0 0 0-3.354m-.875 1.84-12.561 7.254a.18.18 0 0 1-.187 0 .18.18 0 0 1-.095-.165V20.745a.18.18 0 0 1 .095-.16.18.18 0 0 1 .187 0l12.561 7.25a.18.18 0 0 1 .095.164.18.18 0 0 1-.095.16'/%3e%3c/svg%3e";
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const ArcIconWarn =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M16 20.993a1 1 0 1 0 0 2 1 1 0 1 0 0-2M16.005 19.01a.5.5 0 0 0 .5-.5l.002-9.01a.5.5 0 0 0-1 0l-.002 9.01a.5.5 0 0 0 .5.5'/%3e%3c/svg%3e";
 
 var HeroButton = forwardRef(function (_a, ref) {
     var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, ariaLabel = _a.ariaLabel, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, props = __rest(_a, ["label", "buttonStyle", "icon", "ariaLabel", "isLoading", "onClick", "href", "id", "rel", "target", "type", "form"]);
@@ -16425,7 +16349,7 @@ var HeroButton = forwardRef(function (_a, ref) {
                 isLoading && (React__default.createElement("span", { className: "arc-HeroButton-icon" },
                     React__default.createElement(Spinner, { size: "xxl" }))),
                 icon && !isLoading && (React__default.createElement("span", { className: "arc-HeroButton-icon" },
-                    React__default.createElement(Icon$1, { size: 48, icon: buttonStyle === "warning"
+                    React__default.createElement(Icon$1, { testId: "hero-button-icon", size: 48, icon: buttonStyle === "warning"
                             ? HeroButtonIcons["warning"]
                             : HeroButtonIcons[icon] }))))));
     }
@@ -16433,7 +16357,7 @@ var HeroButton = forwardRef(function (_a, ref) {
         React__default.createElement("span", { className: classNames("arc-HeroButton-inner") },
             label && React__default.createElement("span", { className: "arc-HeroButton-label" }, label),
             icon && !isLoading && (React__default.createElement("span", { className: "arc-HeroButton-icon" },
-                React__default.createElement(Icon$1, { size: 48, icon: buttonStyle === "warning"
+                React__default.createElement(Icon$1, { testId: "hero-button-icon", size: 48, icon: buttonStyle === "warning"
                         ? HeroButtonIcons["warning"]
                         : HeroButtonIcons[icon] }))),
             isLoading && (React__default.createElement("span", { className: "arc-HeroButton-icon" },
@@ -16451,96 +16375,21 @@ var Hidden = function (_a) {
         }) }, filterAttrs(props)), children));
 };
 
-const BtIconArrowRight = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M18.14648,11.64648a.49983.49983,0,0,0,0,.707L21.293,15.5H9.5a.5.5,0,0,0,0,1H21.293l-3.14649,3.14648a.5.5,0,1,0,.707.707L23.207,16l-4.35351-4.35352A.49983.49983,0,0,0,18.14648,11.64648Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconPlay = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M20.83887,15.03955,13.66113,10.896A1.107,1.107,0,0,0,12,11.85449v8.2876a1.10534,1.10534,0,0,0,1.66113.95947L20.83887,16.957a1.10688,1.10688,0,0,0,0-1.91748Zm-.5,1.05176-7.17774,4.14453a.10437.10437,0,0,1-.10742-.00049A.10314.10314,0,0,1,13,20.14209v-8.2876a.10229.10229,0,0,1,.05371-.09277.10284.10284,0,0,1,.10742,0l7.17774,4.14307a.10421.10421,0,0,1,.05371.09375A.10285.10285,0,0,1,20.33887,16.09131Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconArrowRightFill = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M2,16A14,14,0,1,0,16,2,14,14,0,0,0,2,16Zm16.85352-4.35352L23.207,16l-4.35351,4.35352a.5.5,0,0,1-.707-.707L21.293,16.5H9.5a.5.5,0,0,1,0-1H21.293l-3.14649-3.14648a.5.5,0,0,1,.707-.707Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconPlayFill = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M13.16113,11.76172a.10284.10284,0,0,0-.10742,0A.10229.10229,0,0,0,13,11.85449v8.2876a.10314.10314,0,0,0,.05371.09326.10451.10451,0,0,0,.10742.00049l7.17774-4.14453a.10285.10285,0,0,0,.05371-.09277.10421.10421,0,0,0-.05371-.09375Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm4.83887,14.957-7.17774,4.14453A1.10791,1.10791,0,0,1,12,20.14209v-8.2876a1.107,1.107,0,0,1,1.66113-.95849l7.17774,4.14355a1.10688,1.10688,0,0,1,0,1.91748Z",
-      fill: "currentColor",
-    }),
-  );
+var ArrowRight = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M18.146 11.646a.5.5 0 0 0 0 .707l3.147 3.147H9.5a.5.5 0 0 0 0 1h11.793l-3.146 3.146a.5.5 0 1 0 .707.707L23.207 16l-4.354-4.354a.5.5 0 0 0-.707 0'/%3e%3c/svg%3e";
+var ArrowRightFill = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M2 16A14 14 0 1 0 16 2 14 14 0 0 0 2 16m16.854-4.354L23.207 16l-4.354 4.354a.5.5 0 0 1-.707-.707l3.147-3.147H9.5a.5.5 0 0 1 0-1h11.793l-3.146-3.146a.5.5 0 0 1 .707-.707'/%3e%3c/svg%3e";
+var Play = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='m20.839 15.04-7.178-4.144a1.107 1.107 0 0 0-1.661.958v8.288a1.105 1.105 0 0 0 1.661.96l7.178-4.145a1.107 1.107 0 0 0 0-1.917m-.5 1.051-7.178 4.145a.1.1 0 0 1-.107 0 .1.1 0 0 1-.054-.094v-8.288a.1.1 0 0 1 .054-.092.1.1 0 0 1 .107 0l7.178 4.143a.1.1 0 0 1 .054.094.1.1 0 0 1-.054.092'/%3e%3c/svg%3e";
+var PlayFill = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m4.839 14.957-7.178 4.145a1.108 1.108 0 0 1-1.661-.96v-8.288a1.107 1.107 0 0 1 1.661-.958l7.178 4.144a1.107 1.107 0 0 1 0 1.917'/%3e%3c/svg%3e";
 
 var CardFooter = function (_a) {
     var metaText = _a.metaText, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.buttonSize, buttonSize = _c === void 0 ? "m" : _c, _d = _a.isDarkPathway, isDarkPathway = _d === void 0 ? false : _d, _e = _a.showButton, showButton = _e === void 0 ? true : _e, _f = _a.isHovered, isHovered = _f === void 0 ? false : _f;
     var icons = {
         arrow: {
-            regular: BtIconArrowRight,
-            filled: BtIconArrowRightFill,
+            regular: ArrowRight,
+            filled: ArrowRightFill,
         },
         play: {
-            regular: BtIconPlay,
-            filled: BtIconPlayFill,
+            regular: Play,
+            filled: PlayFill,
         },
     };
     return (React__default.createElement("div", { className: classNames("arc-CardFooter", {
@@ -16565,6 +16414,24 @@ var CardHeading = function (_a) {
     return (React__default.createElement(Heading, { level: headingLevel, size: size }, href ? (React__default.createElement("a", __assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterAttrs(linkData)), heading)) : (heading)));
 };
 
+var HorizontalCard = function (_a) {
+    var text = _a.text, heading = _a.heading, headingLevel = _a.headingLevel, img = _a.img, metaText = _a.metaText, url = _a.url, onClick = _a.onClick, props = __rest(_a, ["text", "heading", "headingLevel", "img", "metaText", "url", "onClick"]);
+    var _b = useState(false), showHoverState = _b[0], setShowHoverState = _b[1];
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
+    return (React__default.createElement("div", __assign({ className: classNames("arc-HorizontalCard", {
+            "arc-HorizontalCard--outlined": (url || onclick) && showHoverState,
+        }) }, filterAttrs(props)),
+        (img === null || img === void 0 ? void 0 : img.src) && (React__default.createElement("div", { className: "arc-HorizontalCard-image" },
+            React__default.createElement(Image, __assign({ fit: "cover", anchor: "C" }, img)))),
+        React__default.createElement("div", { className: "arc-HorizontalCard-content" },
+            React__default.createElement(VerticalSpace, { size: "12" }),
+            React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
+            React__default.createElement(VerticalSpace, { size: "12" }),
+            React__default.createElement(Text, null, text),
+            React__default.createElement(VerticalSpace, { size: "24" }),
+            React__default.createElement(CardFooter, { metaText: metaText, buttonIcon: "arrow", isHovered: showHoverState, buttonSize: "s" }))));
+};
+
 /** Use `ImpactCard` for important content that needs additional hierarchy and prominence.  */
 var ImpactCard = function (_a) {
     var url = _a.url, onClick = _a.onClick, heading = _a.heading, img = _a.img, label = _a.label, minHeight = _a.minHeight, _b = _a.headingSize, headingSize = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.pathway, pathway = _d === void 0 ? "light" : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.buttonIcon, buttonIcon = _f === void 0 ? "arrow" : _f, props = __rest(_a, ["url", "onClick", "heading", "img", "label", "minHeight", "headingSize", "linkData", "pathway", "headingLevel", "buttonIcon"]);
@@ -16586,6 +16453,14 @@ var ImpactCard = function (_a) {
         React__default.createElement(CardFooter, { buttonIcon: buttonIcon, showButton: true, isDarkPathway: isDarkPathway, isHovered: showHoverState })));
 };
 
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconArrowRight =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m0 27a13 13 0 1 1 13-13 13.015 13.015 0 0 1-13 13'/%3e%3cpath d='M18.146 11.646a.5.5 0 0 0 0 .707l3.147 3.147H9.5a.5.5 0 0 0 0 1h11.793l-3.146 3.146a.5.5 0 1 0 .707.707L23.207 16l-4.354-4.354a.5.5 0 0 0-.707 0'/%3e%3c/svg%3e";
+
 /**
  * Provides an object of breakpoints for responsive designs.
  *
@@ -16604,181 +16479,1738 @@ var ArcBreakpoints = {
     xs: parseInt(ArcSizeBreakpointsXs, 10),
 };
 
-/** Use `InformationCard` for flexibility and the ability to focus and highlight product specific content. */
-var InformationCard = function (_a) {
-    var cardUrl = _a.cardUrl, onClick = _a.onClick, heading = _a.heading, text = _a.text, label = _a.label, footerLogo = _a.footerLogo, button = _a.button, image = _a.image, badges = _a.badges, icon = _a.icon, minHeight = _a.minHeight, minHeights = _a.minHeights, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "badges", "icon", "minHeight", "minHeights", "headingLevel"]);
-    var surface = useContext(Context$3).surface;
-    var _c = useState(false), showHoverState = _c[0], setShowHoverState = _c[1];
-    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
-    var _d = useState(undefined), minimumHeight = _d[0], setMinimumHeight = _d[1];
-    var checkMinHeight = debounce(function () {
-        for (var _i = 0, _a = Object.entries(ArcBreakpoints); _i < _a.length; _i++) {
-            var _b = _a[_i], key = _b[0], value = _b[1];
-            if (window.innerWidth > value) {
-                setMinimumHeight(minHeights === null || minHeights === void 0 ? void 0 : minHeights[key]);
-                return;
+/** Use `InformationCard` for flexibility and the ability to focus and highlight product specific content. */
+var InformationCard = function (_a) {
+    var cardUrl = _a.cardUrl, onClick = _a.onClick, heading = _a.heading, text = _a.text, label = _a.label, footerLogo = _a.footerLogo, button = _a.button, image = _a.image, badges = _a.badges, icon = _a.icon, minHeight = _a.minHeight, minHeights = _a.minHeights, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "badges", "icon", "minHeight", "minHeights", "headingLevel"]);
+    var surface = useContext(Context$3).surface;
+    var _c = useState(false), showHoverState = _c[0], setShowHoverState = _c[1];
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
+    var _d = useState(undefined), minimumHeight = _d[0], setMinimumHeight = _d[1];
+    var checkMinHeight = debounce(function () {
+        for (var _i = 0, _a = Object.entries(ArcBreakpoints); _i < _a.length; _i++) {
+            var _b = _a[_i], key = _b[0], value = _b[1];
+            if (window.innerWidth > value) {
+                setMinimumHeight(minHeights === null || minHeights === void 0 ? void 0 : minHeights[key]);
+                return;
+            }
+        }
+        setMinimumHeight(undefined);
+    }, 100);
+    useEffect(function () {
+        checkMinHeight();
+        window.addEventListener("resize", checkMinHeight);
+        return function () {
+            window.removeEventListener("resize", checkMinHeight);
+        };
+    }, [minHeights, ArcBreakpoints]);
+    return (React__default.createElement("div", __assign({ style: { minHeight: minHeight ? minHeight : minimumHeight }, className: classNames("arc-InformationCard", {
+            "arc-InformationCard--isALink": cardUrl,
+            "arc-InformationCard--outlined": cardUrl && showHoverState,
+            "arc-InformationCard--onDarkSurface": surface === "dark",
+        }) }, filterAttrs(props)),
+        React__default.createElement(Surface, { growVertically: true, background: "light-white" },
+            React__default.createElement("div", { className: "arc-InformationCard-innerContainer" },
+                image && (React__default.createElement("div", { className: "arc-InformationCard-img" },
+                    React__default.createElement(Image, __assign({ alt: "" }, image)))),
+                icon && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("div", { className: "arc-InformationCard-icon" },
+                        React__default.createElement(Icon$1, { testId: "information-card-icon", icon: icon })))),
+                React__default.createElement("div", { className: "arc-InformationCard-contentContainer" },
+                    label && (React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement("div", { className: "arc-InformationCard-label" }, label.toUpperCase()))),
+                    React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: cardUrl, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
+                    text && React__default.createElement(Text, null, text)),
+                (button || badges || footerLogo) && (React__default.createElement("div", { className: "arc-InformationCard-footer" },
+                    badges && (React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement("div", { className: "arc-InformationCard-badgeContainer" }, badges.map(function (_a, i) {
+                            var text = _a.text, badgeProps = __rest(_a, ["text"]);
+                            return (React__default.createElement("div", { className: "arc-InformationCard-badge", key: "information-card-badge-".concat(i) },
+                                React__default.createElement(Badge, __assign({}, badgeProps), text)));
+                        })))),
+                    React__default.createElement("div", { className: "arc-InformationCard-footerItems" },
+                        button && !cardUrl && (React__default.createElement("div", { className: "arc-InformationCard-footerButtonContainer" },
+                            React__default.createElement(ButtonV2, __assign({}, button, { size: "m", iconPosition: "beforeText", buttonStyle: "compact", icon: BtIconArrowRight })))),
+                        footerLogo && (React__default.createElement("div", { className: "arc-InformationCard-footerLogoContainer" },
+                            React__default.createElement(Image, __assign({}, footerLogo)))))))))));
+};
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconNewWindow =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M24.702 7.018a.5.5 0 0 0-.191-.039h-7.005a.5.5 0 0 0 0 1h5.798l-8.16 8.16a.5.5 0 1 0 .708.707l8.159-8.16v5.774a.5.5 0 1 0 1 0V7.48a.5.5 0 0 0-.31-.462'/%3e%3cpath d='M26.852 3.99H5.184a1.2 1.2 0 0 0-1.2 1.201v21.7a1.104 1.104 0 0 0 1.102 1.103h21.766a1.18 1.18 0 0 0 1.178-1.18V5.17a1.18 1.18 0 0 0-1.178-1.178m.178 22.825a.18.18 0 0 1-.178.179H5.086a.104.104 0 0 1-.103-.103V5.19a.2.2 0 0 1 .2-.2h21.669a.18.18 0 0 1 .178.178Z'/%3e%3c/svg%3e";
+
+/**
+ * Use `Link` to direct users to a new page or piece of information.
+ */
+var Link = function (_a) {
+    var id = _a.id, href = _a.href, title = _a.title, rel = _a.rel, target = _a.target, children = _a.children, onClick = _a.onClick, screenReaderText = _a.screenReaderText, _b = _a.isButton, isButton = _b === void 0 ? false : _b, _c = _a.isImplied, isImplied = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, props = __rest(_a, ["id", "href", "title", "rel", "target", "children", "onClick", "screenReaderText", "isButton", "isImplied", "size"]);
+    var surface = useContext(Context$3).surface;
+    var isExternalLink = target === "_blank";
+    var textArray = children.split(" ");
+    var firstText = textArray.slice(0, -1).join(" ");
+    var lastWord = textArray[textArray.length - 1];
+    var commonProps = {
+        id: id,
+        onClick: onClick,
+        className: classNames("arc-Link", "arc-Link--".concat(size), {
+            "arc-Link--onDarkSurface": surface === "dark",
+            "arc-Link--onLightSurface": surface !== "dark",
+            "arc-Link--isImplied": isImplied,
+        }),
+    };
+    var elementProps = {
+        a: __assign(__assign({}, commonProps), { href: href, title: title, target: target, rel: rel }),
+        button: __assign({}, commonProps),
+        span: __assign({}, commonProps),
+    };
+    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(VisuallyHidden$2, null,
+                screenReaderText || children,
+                isExternalLink && " (Opens in new window)"),
+            firstText && (React__default.createElement("span", { "aria-hidden": true, className: "arc-Link-text" },
+                firstText,
+                "\u00A0")),
+            React__default.createElement("span", { className: "arc-Link-iconWrapper" },
+                React__default.createElement("span", { "aria-hidden": true, className: "arc-Link-text" }, lastWord),
+                isExternalLink && (React__default.createElement(Icon$1, { icon: BtIconNewWindow, size: size === "s" ? 20 : 24 }))))));
+};
+
+/**
+ * Use `Markup` to display HTML-formatted text.
+ */
+var Markup = function (_a) {
+    var children = _a.children, _b = _a.isMeasured, isMeasured = _b === void 0 ? false : _b, props = __rest(_a, ["children", "isMeasured"]);
+    var surface = useContext(Context$3).surface;
+    return (React__default.createElement("div", __assign({ className: classNames({
+            "arc-Markup": true,
+            "arc-Markup--measured": isMeasured,
+            "arc-Markup--onDarkSurface": surface === "dark",
+        }) }, filterAttrs(props)), children));
+};
+
+var VideoPlayer$1 = React__default.lazy(function () {
+    return Promise.resolve().then(function () { return index; }).then(function (_a) {
+        var VideoPlayer = _a.VideoPlayer;
+        return ({
+            default: VideoPlayer,
+        });
+    });
+});
+/**
+ * Use `MediaCard` to contain content and an image about a single subject.
+ */
+var MediaCard = function (_a) {
+    var media = _a.media, url = _a.url, onClick = _a.onClick, heading = _a.heading, label = _a.label, text = _a.text, metaText = _a.metaText, minHeight = _a.minHeight, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isContained, isContained = _c === void 0 ? true : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, props = __rest(_a, ["media", "url", "onClick", "heading", "label", "text", "metaText", "minHeight", "buttonIcon", "isContained", "headingLevel"]);
+    var surface = useContext(Context$3).surface;
+    var _e = useState(false), isClient = _e[0], setIsClient = _e[1];
+    var _f = useState(false), showHoverState = _f[0], setShowHoverState = _f[1];
+    var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
+    var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
+    useEffect(function () {
+        setIsClient(true);
+    }, []);
+    return (React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-MediaCard", {
+            "arc-MediaCard--outlined": url && isContained && showHoverState,
+            "arc-MediaCard--contained": isContained,
+            "arc-MediaCard--onDarkSurface": surface === "dark",
+        }) }, filterAttrs(props)),
+        React__default.createElement(ConditionalWrapper, { condition: isContained, wrapper: function (children) { return (React__default.createElement(Surface, { growVertically: true, background: "light-white" }, children)); } },
+            media.type === "img" && (React__default.createElement("div", { className: "arc-MediaCard-imgContainer" },
+                React__default.createElement(Image, __assign({}, media)))),
+            media.type === "video" && isClient && (React__default.createElement(Suspense, { fallback: null },
+                React__default.createElement(VideoPlayer$1, __assign({ isSupportingTextHidden: true }, media)))),
+            React__default.createElement("div", { className: "arc-MediaCard-content" },
+                label && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(Heading, { size: "xxs" }, label.toUpperCase()),
+                    React__default.createElement(VerticalSpace, { size: headingSpacing }))),
+                React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: media.type !== "video" ? url : undefined, onClick: media.type !== "video" ? onClick : undefined, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
+                React__default.createElement("div", { className: "arc-MediaCard-textContainer" }, text && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(VerticalSpace, { size: headingSpacing }),
+                    React__default.createElement(Text, null, text),
+                    (url || metaText) && React__default.createElement(VerticalSpace, { size: "24" })))),
+                React__default.createElement(CardFooter, { buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url) && media.type !== "video", isHovered: showHoverState })))));
+};
+
+var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
+var EVENT_OPTIONS = { bubbles: false, cancelable: true };
+var GROUP_NAME$2 = "RovingFocusGroup";
+var [Collection$1, useCollection$1, createCollectionScope$1] = createCollection(GROUP_NAME$2);
+var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope$1(
+  GROUP_NAME$2,
+  [createCollectionScope$1]
+);
+var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME$2);
+var RovingFocusGroup = React.forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(Collection$1.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(Collection$1.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
+  }
+);
+RovingFocusGroup.displayName = GROUP_NAME$2;
+var RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
+  const {
+    __scopeRovingFocusGroup,
+    orientation,
+    loop = false,
+    dir,
+    currentTabStopId: currentTabStopIdProp,
+    defaultCurrentTabStopId,
+    onCurrentTabStopIdChange,
+    onEntryFocus,
+    preventScrollOnEntryFocus = false,
+    ...groupProps
+  } = props;
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs$1(forwardedRef, ref);
+  const direction = useDirection(dir);
+  const [currentTabStopId = null, setCurrentTabStopId] = useControllableState({
+    prop: currentTabStopIdProp,
+    defaultProp: defaultCurrentTabStopId,
+    onChange: onCurrentTabStopIdChange
+  });
+  const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);
+  const handleEntryFocus = useCallbackRef$1(onEntryFocus);
+  const getItems = useCollection$1(__scopeRovingFocusGroup);
+  const isClickFocusRef = React.useRef(false);
+  const [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
+      return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
+    }
+  }, [handleEntryFocus]);
+  return /* @__PURE__ */ jsx(
+    RovingFocusProvider,
+    {
+      scope: __scopeRovingFocusGroup,
+      orientation,
+      dir: direction,
+      loop,
+      currentTabStopId,
+      onItemFocus: React.useCallback(
+        (tabStopId) => setCurrentTabStopId(tabStopId),
+        [setCurrentTabStopId]
+      ),
+      onItemShiftTab: React.useCallback(() => setIsTabbingBackOut(true), []),
+      onFocusableItemAdd: React.useCallback(
+        () => setFocusableItemsCount((prevCount) => prevCount + 1),
+        []
+      ),
+      onFocusableItemRemove: React.useCallback(
+        () => setFocusableItemsCount((prevCount) => prevCount - 1),
+        []
+      ),
+      children: /* @__PURE__ */ jsx(
+        Primitive$1.div,
+        {
+          tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
+          "data-orientation": orientation,
+          ...groupProps,
+          ref: composedRefs,
+          style: { outline: "none", ...props.style },
+          onMouseDown: composeEventHandlers$1(props.onMouseDown, () => {
+            isClickFocusRef.current = true;
+          }),
+          onFocus: composeEventHandlers$1(props.onFocus, (event) => {
+            const isKeyboardFocus = !isClickFocusRef.current;
+            if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+              const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+              event.currentTarget.dispatchEvent(entryFocusEvent);
+              if (!entryFocusEvent.defaultPrevented) {
+                const items = getItems().filter((item) => item.focusable);
+                const activeItem = items.find((item) => item.active);
+                const currentItem = items.find((item) => item.id === currentTabStopId);
+                const candidateItems = [activeItem, currentItem, ...items].filter(
+                  Boolean
+                );
+                const candidateNodes = candidateItems.map((item) => item.ref.current);
+                focusFirst$1(candidateNodes, preventScrollOnEntryFocus);
+              }
+            }
+            isClickFocusRef.current = false;
+          }),
+          onBlur: composeEventHandlers$1(props.onBlur, () => setIsTabbingBackOut(false))
+        }
+      )
+    }
+  );
+});
+var ITEM_NAME$2 = "RovingFocusGroupItem";
+var RovingFocusGroupItem = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeRovingFocusGroup,
+      focusable = true,
+      active = false,
+      tabStopId,
+      ...itemProps
+    } = props;
+    const autoId = useId();
+    const id = tabStopId || autoId;
+    const context = useRovingFocusContext(ITEM_NAME$2, __scopeRovingFocusGroup);
+    const isCurrentTabStop = context.currentTabStopId === id;
+    const getItems = useCollection$1(__scopeRovingFocusGroup);
+    const { onFocusableItemAdd, onFocusableItemRemove } = context;
+    React.useEffect(() => {
+      if (focusable) {
+        onFocusableItemAdd();
+        return () => onFocusableItemRemove();
+      }
+    }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
+    return /* @__PURE__ */ jsx(
+      Collection$1.ItemSlot,
+      {
+        scope: __scopeRovingFocusGroup,
+        id,
+        focusable,
+        active,
+        children: /* @__PURE__ */ jsx(
+          Primitive$1.span,
+          {
+            tabIndex: isCurrentTabStop ? 0 : -1,
+            "data-orientation": context.orientation,
+            ...itemProps,
+            ref: forwardedRef,
+            onMouseDown: composeEventHandlers$1(props.onMouseDown, (event) => {
+              if (!focusable) event.preventDefault();
+              else context.onItemFocus(id);
+            }),
+            onFocus: composeEventHandlers$1(props.onFocus, () => context.onItemFocus(id)),
+            onKeyDown: composeEventHandlers$1(props.onKeyDown, (event) => {
+              if (event.key === "Tab" && event.shiftKey) {
+                context.onItemShiftTab();
+                return;
+              }
+              if (event.target !== event.currentTarget) return;
+              const focusIntent = getFocusIntent(event, context.orientation, context.dir);
+              if (focusIntent !== void 0) {
+                if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+                event.preventDefault();
+                const items = getItems().filter((item) => item.focusable);
+                let candidateNodes = items.map((item) => item.ref.current);
+                if (focusIntent === "last") candidateNodes.reverse();
+                else if (focusIntent === "prev" || focusIntent === "next") {
+                  if (focusIntent === "prev") candidateNodes.reverse();
+                  const currentIndex = candidateNodes.indexOf(event.currentTarget);
+                  candidateNodes = context.loop ? wrapArray$1(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
+                }
+                setTimeout(() => focusFirst$1(candidateNodes));
+              }
+            })
+          }
+        )
+      }
+    );
+  }
+);
+RovingFocusGroupItem.displayName = ITEM_NAME$2;
+var MAP_KEY_TO_FOCUS_INTENT = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  PageUp: "first",
+  Home: "first",
+  PageDown: "last",
+  End: "last"
+};
+function getDirectionAwareKey(key, dir) {
+  if (dir !== "rtl") return key;
+  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
+}
+function getFocusIntent(event, orientation, dir) {
+  const key = getDirectionAwareKey(event.key, dir);
+  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
+  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
+  return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+function focusFirst$1(candidates, preventScroll = false) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidate of candidates) {
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus({ preventScroll });
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+function wrapArray$1(array, startIndex) {
+  return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+var Root$2 = RovingFocusGroup;
+var Item = RovingFocusGroupItem;
+
+var SELECTION_KEYS = ["Enter", " "];
+var FIRST_KEYS = ["ArrowDown", "PageUp", "Home"];
+var LAST_KEYS = ["ArrowUp", "PageDown", "End"];
+var FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
+var SUB_OPEN_KEYS = {
+  ltr: [...SELECTION_KEYS, "ArrowRight"],
+  rtl: [...SELECTION_KEYS, "ArrowLeft"]
+};
+var SUB_CLOSE_KEYS = {
+  ltr: ["ArrowLeft"],
+  rtl: ["ArrowRight"]
+};
+var MENU_NAME = "Menu";
+var [Collection, useCollection, createCollectionScope] = createCollection(MENU_NAME);
+var [createMenuContext, createMenuScope] = createContextScope$1(MENU_NAME, [
+  createCollectionScope,
+  createPopperScope$1,
+  createRovingFocusGroupScope
+]);
+var usePopperScope$1 = createPopperScope$1();
+var useRovingFocusGroupScope = createRovingFocusGroupScope();
+var [MenuProvider, useMenuContext] = createMenuContext(MENU_NAME);
+var [MenuRootProvider, useMenuRootContext] = createMenuContext(MENU_NAME);
+var Menu$1 = (props) => {
+  const { __scopeMenu, open = false, children, dir, onOpenChange, modal = true } = props;
+  const popperScope = usePopperScope$1(__scopeMenu);
+  const [content, setContent] = React.useState(null);
+  const isUsingKeyboardRef = React.useRef(false);
+  const handleOpenChange = useCallbackRef$1(onOpenChange);
+  const direction = useDirection(dir);
+  React.useEffect(() => {
+    const handleKeyDown = () => {
+      isUsingKeyboardRef.current = true;
+      document.addEventListener("pointerdown", handlePointer, { capture: true, once: true });
+      document.addEventListener("pointermove", handlePointer, { capture: true, once: true });
+    };
+    const handlePointer = () => isUsingKeyboardRef.current = false;
+    document.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, { capture: true });
+      document.removeEventListener("pointerdown", handlePointer, { capture: true });
+      document.removeEventListener("pointermove", handlePointer, { capture: true });
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(Root2$4, { ...popperScope, children: /* @__PURE__ */ jsx(
+    MenuProvider,
+    {
+      scope: __scopeMenu,
+      open,
+      onOpenChange: handleOpenChange,
+      content,
+      onContentChange: setContent,
+      children: /* @__PURE__ */ jsx(
+        MenuRootProvider,
+        {
+          scope: __scopeMenu,
+          onClose: React.useCallback(() => handleOpenChange(false), [handleOpenChange]),
+          isUsingKeyboardRef,
+          dir: direction,
+          modal,
+          children
+        }
+      )
+    }
+  ) });
+};
+Menu$1.displayName = MENU_NAME;
+var ANCHOR_NAME$1 = "MenuAnchor";
+var MenuAnchor = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeMenu, ...anchorProps } = props;
+    const popperScope = usePopperScope$1(__scopeMenu);
+    return /* @__PURE__ */ jsx(Anchor$1, { ...popperScope, ...anchorProps, ref: forwardedRef });
+  }
+);
+MenuAnchor.displayName = ANCHOR_NAME$1;
+var PORTAL_NAME$3 = "MenuPortal";
+var [PortalProvider$1, usePortalContext$1] = createMenuContext(PORTAL_NAME$3, {
+  forceMount: void 0
+});
+var MenuPortal$1 = (props) => {
+  const { __scopeMenu, forceMount, children, container } = props;
+  const context = useMenuContext(PORTAL_NAME$3, __scopeMenu);
+  return /* @__PURE__ */ jsx(PortalProvider$1, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsx(Presence$1, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$6, { asChild: true, container, children }) }) });
+};
+MenuPortal$1.displayName = PORTAL_NAME$3;
+var CONTENT_NAME$3 = "MenuContent";
+var [MenuContentProvider, useMenuContentContext] = createMenuContext(CONTENT_NAME$3);
+var MenuContent$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const portalContext = usePortalContext$1(CONTENT_NAME$3, props.__scopeMenu);
+    const { forceMount = portalContext.forceMount, ...contentProps } = props;
+    const context = useMenuContext(CONTENT_NAME$3, props.__scopeMenu);
+    const rootContext = useMenuRootContext(CONTENT_NAME$3, props.__scopeMenu);
+    return /* @__PURE__ */ jsx(Collection.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx(Presence$1, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsx(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
+  }
+);
+var MenuRootContentModal = React.forwardRef(
+  (props, forwardedRef) => {
+    const context = useMenuContext(CONTENT_NAME$3, props.__scopeMenu);
+    const ref = React.useRef(null);
+    const composedRefs = useComposedRefs$1(forwardedRef, ref);
+    React.useEffect(() => {
+      const content = ref.current;
+      if (content) return hideOthers(content);
+    }, []);
+    return /* @__PURE__ */ jsx(
+      MenuContentImpl,
+      {
+        ...props,
+        ref: composedRefs,
+        trapFocus: context.open,
+        disableOutsidePointerEvents: context.open,
+        disableOutsideScroll: true,
+        onFocusOutside: composeEventHandlers$1(
+          props.onFocusOutside,
+          (event) => event.preventDefault(),
+          { checkForDefaultPrevented: false }
+        ),
+        onDismiss: () => context.onOpenChange(false)
+      }
+    );
+  }
+);
+var MenuRootContentNonModal = React.forwardRef((props, forwardedRef) => {
+  const context = useMenuContext(CONTENT_NAME$3, props.__scopeMenu);
+  return /* @__PURE__ */ jsx(
+    MenuContentImpl,
+    {
+      ...props,
+      ref: forwardedRef,
+      trapFocus: false,
+      disableOutsidePointerEvents: false,
+      disableOutsideScroll: false,
+      onDismiss: () => context.onOpenChange(false)
+    }
+  );
+});
+var MenuContentImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeMenu,
+      loop = false,
+      trapFocus,
+      onOpenAutoFocus,
+      onCloseAutoFocus,
+      disableOutsidePointerEvents,
+      onEntryFocus,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      onDismiss,
+      disableOutsideScroll,
+      ...contentProps
+    } = props;
+    const context = useMenuContext(CONTENT_NAME$3, __scopeMenu);
+    const rootContext = useMenuRootContext(CONTENT_NAME$3, __scopeMenu);
+    const popperScope = usePopperScope$1(__scopeMenu);
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
+    const getItems = useCollection(__scopeMenu);
+    const [currentItemId, setCurrentItemId] = React.useState(null);
+    const contentRef = React.useRef(null);
+    const composedRefs = useComposedRefs$1(forwardedRef, contentRef, context.onContentChange);
+    const timerRef = React.useRef(0);
+    const searchRef = React.useRef("");
+    const pointerGraceTimerRef = React.useRef(0);
+    const pointerGraceIntentRef = React.useRef(null);
+    const pointerDirRef = React.useRef("right");
+    const lastPointerXRef = React.useRef(0);
+    const ScrollLockWrapper = disableOutsideScroll ? ReactRemoveScroll : React.Fragment;
+    const scrollLockWrapperProps = disableOutsideScroll ? { as: Slot$1, allowPinchZoom: true } : void 0;
+    const handleTypeaheadSearch = (key) => {
+      const search = searchRef.current + key;
+      const items = getItems().filter((item) => !item.disabled);
+      const currentItem = document.activeElement;
+      const currentMatch = items.find((item) => item.ref.current === currentItem)?.textValue;
+      const values = items.map((item) => item.textValue);
+      const nextMatch = getNextMatch(values, search, currentMatch);
+      const newItem = items.find((item) => item.textValue === nextMatch)?.ref.current;
+      (function updateSearch(value) {
+        searchRef.current = value;
+        window.clearTimeout(timerRef.current);
+        if (value !== "") timerRef.current = window.setTimeout(() => updateSearch(""), 1e3);
+      })(search);
+      if (newItem) {
+        setTimeout(() => newItem.focus());
+      }
+    };
+    React.useEffect(() => {
+      return () => window.clearTimeout(timerRef.current);
+    }, []);
+    useFocusGuards();
+    const isPointerMovingToSubmenu = React.useCallback((event) => {
+      const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;
+      return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
+    }, []);
+    return /* @__PURE__ */ jsx(
+      MenuContentProvider,
+      {
+        scope: __scopeMenu,
+        searchRef,
+        onItemEnter: React.useCallback(
+          (event) => {
+            if (isPointerMovingToSubmenu(event)) event.preventDefault();
+          },
+          [isPointerMovingToSubmenu]
+        ),
+        onItemLeave: React.useCallback(
+          (event) => {
+            if (isPointerMovingToSubmenu(event)) return;
+            contentRef.current?.focus();
+            setCurrentItemId(null);
+          },
+          [isPointerMovingToSubmenu]
+        ),
+        onTriggerLeave: React.useCallback(
+          (event) => {
+            if (isPointerMovingToSubmenu(event)) event.preventDefault();
+          },
+          [isPointerMovingToSubmenu]
+        ),
+        pointerGraceTimerRef,
+        onPointerGraceIntentChange: React.useCallback((intent) => {
+          pointerGraceIntentRef.current = intent;
+        }, []),
+        children: /* @__PURE__ */ jsx(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsx(
+          FocusScope,
+          {
+            asChild: true,
+            trapped: trapFocus,
+            onMountAutoFocus: composeEventHandlers$1(onOpenAutoFocus, (event) => {
+              event.preventDefault();
+              contentRef.current?.focus({ preventScroll: true });
+            }),
+            onUnmountAutoFocus: onCloseAutoFocus,
+            children: /* @__PURE__ */ jsx(
+              DismissableLayer$1,
+              {
+                asChild: true,
+                disableOutsidePointerEvents,
+                onEscapeKeyDown,
+                onPointerDownOutside,
+                onFocusOutside,
+                onInteractOutside,
+                onDismiss,
+                children: /* @__PURE__ */ jsx(
+                  Root$2,
+                  {
+                    asChild: true,
+                    ...rovingFocusGroupScope,
+                    dir: rootContext.dir,
+                    orientation: "vertical",
+                    loop,
+                    currentTabStopId: currentItemId,
+                    onCurrentTabStopIdChange: setCurrentItemId,
+                    onEntryFocus: composeEventHandlers$1(onEntryFocus, (event) => {
+                      if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
+                    }),
+                    preventScrollOnEntryFocus: true,
+                    children: /* @__PURE__ */ jsx(
+                      Content$2,
+                      {
+                        role: "menu",
+                        "aria-orientation": "vertical",
+                        "data-state": getOpenState(context.open),
+                        "data-radix-menu-content": "",
+                        dir: rootContext.dir,
+                        ...popperScope,
+                        ...contentProps,
+                        ref: composedRefs,
+                        style: { outline: "none", ...contentProps.style },
+                        onKeyDown: composeEventHandlers$1(contentProps.onKeyDown, (event) => {
+                          const target = event.target;
+                          const isKeyDownInside = target.closest("[data-radix-menu-content]") === event.currentTarget;
+                          const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+                          const isCharacterKey = event.key.length === 1;
+                          if (isKeyDownInside) {
+                            if (event.key === "Tab") event.preventDefault();
+                            if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);
+                          }
+                          const content = contentRef.current;
+                          if (event.target !== content) return;
+                          if (!FIRST_LAST_KEYS.includes(event.key)) return;
+                          event.preventDefault();
+                          const items = getItems().filter((item) => !item.disabled);
+                          const candidateNodes = items.map((item) => item.ref.current);
+                          if (LAST_KEYS.includes(event.key)) candidateNodes.reverse();
+                          focusFirst(candidateNodes);
+                        }),
+                        onBlur: composeEventHandlers$1(props.onBlur, (event) => {
+                          if (!event.currentTarget.contains(event.target)) {
+                            window.clearTimeout(timerRef.current);
+                            searchRef.current = "";
+                          }
+                        }),
+                        onPointerMove: composeEventHandlers$1(
+                          props.onPointerMove,
+                          whenMouse((event) => {
+                            const target = event.target;
+                            const pointerXHasChanged = lastPointerXRef.current !== event.clientX;
+                            if (event.currentTarget.contains(target) && pointerXHasChanged) {
+                              const newDir = event.clientX > lastPointerXRef.current ? "right" : "left";
+                              pointerDirRef.current = newDir;
+                              lastPointerXRef.current = event.clientX;
+                            }
+                          })
+                        )
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          }
+        ) })
+      }
+    );
+  }
+);
+MenuContent$1.displayName = CONTENT_NAME$3;
+var GROUP_NAME$1 = "MenuGroup";
+var MenuGroup$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeMenu, ...groupProps } = props;
+    return /* @__PURE__ */ jsx(Primitive$1.div, { role: "group", ...groupProps, ref: forwardedRef });
+  }
+);
+MenuGroup$1.displayName = GROUP_NAME$1;
+var LABEL_NAME$1 = "MenuLabel";
+var MenuLabel$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeMenu, ...labelProps } = props;
+    return /* @__PURE__ */ jsx(Primitive$1.div, { ...labelProps, ref: forwardedRef });
+  }
+);
+MenuLabel$1.displayName = LABEL_NAME$1;
+var ITEM_NAME$1 = "MenuItem";
+var ITEM_SELECT = "menu.itemSelect";
+var MenuItem$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const { disabled = false, onSelect, ...itemProps } = props;
+    const ref = React.useRef(null);
+    const rootContext = useMenuRootContext(ITEM_NAME$1, props.__scopeMenu);
+    const contentContext = useMenuContentContext(ITEM_NAME$1, props.__scopeMenu);
+    const composedRefs = useComposedRefs$1(forwardedRef, ref);
+    const isPointerDownRef = React.useRef(false);
+    const handleSelect = () => {
+      const menuItem = ref.current;
+      if (!disabled && menuItem) {
+        const itemSelectEvent = new CustomEvent(ITEM_SELECT, { bubbles: true, cancelable: true });
+        menuItem.addEventListener(ITEM_SELECT, (event) => onSelect?.(event), { once: true });
+        dispatchDiscreteCustomEvent$1(menuItem, itemSelectEvent);
+        if (itemSelectEvent.defaultPrevented) {
+          isPointerDownRef.current = false;
+        } else {
+          rootContext.onClose();
+        }
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      MenuItemImpl,
+      {
+        ...itemProps,
+        ref: composedRefs,
+        disabled,
+        onClick: composeEventHandlers$1(props.onClick, handleSelect),
+        onPointerDown: (event) => {
+          props.onPointerDown?.(event);
+          isPointerDownRef.current = true;
+        },
+        onPointerUp: composeEventHandlers$1(props.onPointerUp, (event) => {
+          if (!isPointerDownRef.current) event.currentTarget?.click();
+        }),
+        onKeyDown: composeEventHandlers$1(props.onKeyDown, (event) => {
+          const isTypingAhead = contentContext.searchRef.current !== "";
+          if (disabled || isTypingAhead && event.key === " ") return;
+          if (SELECTION_KEYS.includes(event.key)) {
+            event.currentTarget.click();
+            event.preventDefault();
+          }
+        })
+      }
+    );
+  }
+);
+MenuItem$1.displayName = ITEM_NAME$1;
+var MenuItemImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeMenu, disabled = false, textValue, ...itemProps } = props;
+    const contentContext = useMenuContentContext(ITEM_NAME$1, __scopeMenu);
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
+    const ref = React.useRef(null);
+    const composedRefs = useComposedRefs$1(forwardedRef, ref);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [textContent, setTextContent] = React.useState("");
+    React.useEffect(() => {
+      const menuItem = ref.current;
+      if (menuItem) {
+        setTextContent((menuItem.textContent ?? "").trim());
+      }
+    }, [itemProps.children]);
+    return /* @__PURE__ */ jsx(
+      Collection.ItemSlot,
+      {
+        scope: __scopeMenu,
+        disabled,
+        textValue: textValue ?? textContent,
+        children: /* @__PURE__ */ jsx(Item, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsx(
+          Primitive$1.div,
+          {
+            role: "menuitem",
+            "data-highlighted": isFocused ? "" : void 0,
+            "aria-disabled": disabled || void 0,
+            "data-disabled": disabled ? "" : void 0,
+            ...itemProps,
+            ref: composedRefs,
+            onPointerMove: composeEventHandlers$1(
+              props.onPointerMove,
+              whenMouse((event) => {
+                if (disabled) {
+                  contentContext.onItemLeave(event);
+                } else {
+                  contentContext.onItemEnter(event);
+                  if (!event.defaultPrevented) {
+                    const item = event.currentTarget;
+                    item.focus({ preventScroll: true });
+                  }
+                }
+              })
+            ),
+            onPointerLeave: composeEventHandlers$1(
+              props.onPointerLeave,
+              whenMouse((event) => contentContext.onItemLeave(event))
+            ),
+            onFocus: composeEventHandlers$1(props.onFocus, () => setIsFocused(true)),
+            onBlur: composeEventHandlers$1(props.onBlur, () => setIsFocused(false))
+          }
+        ) })
+      }
+    );
+  }
+);
+var CHECKBOX_ITEM_NAME$1 = "MenuCheckboxItem";
+var MenuCheckboxItem$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const { checked = false, onCheckedChange, ...checkboxItemProps } = props;
+    return /* @__PURE__ */ jsx(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx(
+      MenuItem$1,
+      {
+        role: "menuitemcheckbox",
+        "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
+        ...checkboxItemProps,
+        ref: forwardedRef,
+        "data-state": getCheckedState(checked),
+        onSelect: composeEventHandlers$1(
+          checkboxItemProps.onSelect,
+          () => onCheckedChange?.(isIndeterminate(checked) ? true : !checked),
+          { checkForDefaultPrevented: false }
+        )
+      }
+    ) });
+  }
+);
+MenuCheckboxItem$1.displayName = CHECKBOX_ITEM_NAME$1;
+var RADIO_GROUP_NAME$1 = "MenuRadioGroup";
+var [RadioGroupProvider, useRadioGroupContext] = createMenuContext(
+  RADIO_GROUP_NAME$1,
+  { value: void 0, onValueChange: () => {
+  } }
+);
+var MenuRadioGroup$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const { value, onValueChange, ...groupProps } = props;
+    const handleValueChange = useCallbackRef$1(onValueChange);
+    return /* @__PURE__ */ jsx(RadioGroupProvider, { scope: props.__scopeMenu, value, onValueChange: handleValueChange, children: /* @__PURE__ */ jsx(MenuGroup$1, { ...groupProps, ref: forwardedRef }) });
+  }
+);
+MenuRadioGroup$1.displayName = RADIO_GROUP_NAME$1;
+var RADIO_ITEM_NAME$1 = "MenuRadioItem";
+var MenuRadioItem$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const { value, ...radioItemProps } = props;
+    const context = useRadioGroupContext(RADIO_ITEM_NAME$1, props.__scopeMenu);
+    const checked = value === context.value;
+    return /* @__PURE__ */ jsx(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx(
+      MenuItem$1,
+      {
+        role: "menuitemradio",
+        "aria-checked": checked,
+        ...radioItemProps,
+        ref: forwardedRef,
+        "data-state": getCheckedState(checked),
+        onSelect: composeEventHandlers$1(
+          radioItemProps.onSelect,
+          () => context.onValueChange?.(value),
+          { checkForDefaultPrevented: false }
+        )
+      }
+    ) });
+  }
+);
+MenuRadioItem$1.displayName = RADIO_ITEM_NAME$1;
+var ITEM_INDICATOR_NAME = "MenuItemIndicator";
+var [ItemIndicatorProvider, useItemIndicatorContext] = createMenuContext(
+  ITEM_INDICATOR_NAME,
+  { checked: false }
+);
+var MenuItemIndicator = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeMenu, forceMount, ...itemIndicatorProps } = props;
+    const indicatorContext = useItemIndicatorContext(ITEM_INDICATOR_NAME, __scopeMenu);
+    return /* @__PURE__ */ jsx(
+      Presence$1,
+      {
+        present: forceMount || isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true,
+        children: /* @__PURE__ */ jsx(
+          Primitive$1.span,
+          {
+            ...itemIndicatorProps,
+            ref: forwardedRef,
+            "data-state": getCheckedState(indicatorContext.checked)
+          }
+        )
+      }
+    );
+  }
+);
+MenuItemIndicator.displayName = ITEM_INDICATOR_NAME;
+var SEPARATOR_NAME$1 = "MenuSeparator";
+var MenuSeparator$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeMenu, ...separatorProps } = props;
+    return /* @__PURE__ */ jsx(
+      Primitive$1.div,
+      {
+        role: "separator",
+        "aria-orientation": "horizontal",
+        ...separatorProps,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+MenuSeparator$1.displayName = SEPARATOR_NAME$1;
+var ARROW_NAME$3 = "MenuArrow";
+var MenuArrow = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeMenu, ...arrowProps } = props;
+    const popperScope = usePopperScope$1(__scopeMenu);
+    return /* @__PURE__ */ jsx(Arrow$2, { ...popperScope, ...arrowProps, ref: forwardedRef });
+  }
+);
+MenuArrow.displayName = ARROW_NAME$3;
+var SUB_NAME = "MenuSub";
+var [MenuSubProvider, useMenuSubContext] = createMenuContext(SUB_NAME);
+var MenuSub$1 = (props) => {
+  const { __scopeMenu, children, open = false, onOpenChange } = props;
+  const parentMenuContext = useMenuContext(SUB_NAME, __scopeMenu);
+  const popperScope = usePopperScope$1(__scopeMenu);
+  const [trigger, setTrigger] = React.useState(null);
+  const [content, setContent] = React.useState(null);
+  const handleOpenChange = useCallbackRef$1(onOpenChange);
+  React.useEffect(() => {
+    if (parentMenuContext.open === false) handleOpenChange(false);
+    return () => handleOpenChange(false);
+  }, [parentMenuContext.open, handleOpenChange]);
+  return /* @__PURE__ */ jsx(Root2$4, { ...popperScope, children: /* @__PURE__ */ jsx(
+    MenuProvider,
+    {
+      scope: __scopeMenu,
+      open,
+      onOpenChange: handleOpenChange,
+      content,
+      onContentChange: setContent,
+      children: /* @__PURE__ */ jsx(
+        MenuSubProvider,
+        {
+          scope: __scopeMenu,
+          contentId: useId(),
+          triggerId: useId(),
+          trigger,
+          onTriggerChange: setTrigger,
+          children
+        }
+      )
+    }
+  ) });
+};
+MenuSub$1.displayName = SUB_NAME;
+var SUB_TRIGGER_NAME$1 = "MenuSubTrigger";
+var MenuSubTrigger$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const context = useMenuContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
+    const rootContext = useMenuRootContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
+    const subContext = useMenuSubContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
+    const contentContext = useMenuContentContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
+    const openTimerRef = React.useRef(null);
+    const { pointerGraceTimerRef, onPointerGraceIntentChange } = contentContext;
+    const scope = { __scopeMenu: props.__scopeMenu };
+    const clearOpenTimer = React.useCallback(() => {
+      if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }, []);
+    React.useEffect(() => clearOpenTimer, [clearOpenTimer]);
+    React.useEffect(() => {
+      const pointerGraceTimer = pointerGraceTimerRef.current;
+      return () => {
+        window.clearTimeout(pointerGraceTimer);
+        onPointerGraceIntentChange(null);
+      };
+    }, [pointerGraceTimerRef, onPointerGraceIntentChange]);
+    return /* @__PURE__ */ jsx(MenuAnchor, { asChild: true, ...scope, children: /* @__PURE__ */ jsx(
+      MenuItemImpl,
+      {
+        id: subContext.triggerId,
+        "aria-haspopup": "menu",
+        "aria-expanded": context.open,
+        "aria-controls": subContext.contentId,
+        "data-state": getOpenState(context.open),
+        ...props,
+        ref: composeRefs$1(forwardedRef, subContext.onTriggerChange),
+        onClick: (event) => {
+          props.onClick?.(event);
+          if (props.disabled || event.defaultPrevented) return;
+          event.currentTarget.focus();
+          if (!context.open) context.onOpenChange(true);
+        },
+        onPointerMove: composeEventHandlers$1(
+          props.onPointerMove,
+          whenMouse((event) => {
+            contentContext.onItemEnter(event);
+            if (event.defaultPrevented) return;
+            if (!props.disabled && !context.open && !openTimerRef.current) {
+              contentContext.onPointerGraceIntentChange(null);
+              openTimerRef.current = window.setTimeout(() => {
+                context.onOpenChange(true);
+                clearOpenTimer();
+              }, 100);
+            }
+          })
+        ),
+        onPointerLeave: composeEventHandlers$1(
+          props.onPointerLeave,
+          whenMouse((event) => {
+            clearOpenTimer();
+            const contentRect = context.content?.getBoundingClientRect();
+            if (contentRect) {
+              const side = context.content?.dataset.side;
+              const rightSide = side === "right";
+              const bleed = rightSide ? -5 : 5;
+              const contentNearEdge = contentRect[rightSide ? "left" : "right"];
+              const contentFarEdge = contentRect[rightSide ? "right" : "left"];
+              contentContext.onPointerGraceIntentChange({
+                area: [
+                  // Apply a bleed on clientX to ensure that our exit point is
+                  // consistently within polygon bounds
+                  { x: event.clientX + bleed, y: event.clientY },
+                  { x: contentNearEdge, y: contentRect.top },
+                  { x: contentFarEdge, y: contentRect.top },
+                  { x: contentFarEdge, y: contentRect.bottom },
+                  { x: contentNearEdge, y: contentRect.bottom }
+                ],
+                side
+              });
+              window.clearTimeout(pointerGraceTimerRef.current);
+              pointerGraceTimerRef.current = window.setTimeout(
+                () => contentContext.onPointerGraceIntentChange(null),
+                300
+              );
+            } else {
+              contentContext.onTriggerLeave(event);
+              if (event.defaultPrevented) return;
+              contentContext.onPointerGraceIntentChange(null);
+            }
+          })
+        ),
+        onKeyDown: composeEventHandlers$1(props.onKeyDown, (event) => {
+          const isTypingAhead = contentContext.searchRef.current !== "";
+          if (props.disabled || isTypingAhead && event.key === " ") return;
+          if (SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) {
+            context.onOpenChange(true);
+            context.content?.focus();
+            event.preventDefault();
+          }
+        })
+      }
+    ) });
+  }
+);
+MenuSubTrigger$1.displayName = SUB_TRIGGER_NAME$1;
+var SUB_CONTENT_NAME$1 = "MenuSubContent";
+var MenuSubContent$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const portalContext = usePortalContext$1(CONTENT_NAME$3, props.__scopeMenu);
+    const { forceMount = portalContext.forceMount, ...subContentProps } = props;
+    const context = useMenuContext(CONTENT_NAME$3, props.__scopeMenu);
+    const rootContext = useMenuRootContext(CONTENT_NAME$3, props.__scopeMenu);
+    const subContext = useMenuSubContext(SUB_CONTENT_NAME$1, props.__scopeMenu);
+    const ref = React.useRef(null);
+    const composedRefs = useComposedRefs$1(forwardedRef, ref);
+    return /* @__PURE__ */ jsx(Collection.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx(Presence$1, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx(
+      MenuContentImpl,
+      {
+        id: subContext.contentId,
+        "aria-labelledby": subContext.triggerId,
+        ...subContentProps,
+        ref: composedRefs,
+        align: "start",
+        side: rootContext.dir === "rtl" ? "left" : "right",
+        disableOutsidePointerEvents: false,
+        disableOutsideScroll: false,
+        trapFocus: false,
+        onOpenAutoFocus: (event) => {
+          if (rootContext.isUsingKeyboardRef.current) ref.current?.focus();
+          event.preventDefault();
+        },
+        onCloseAutoFocus: (event) => event.preventDefault(),
+        onFocusOutside: composeEventHandlers$1(props.onFocusOutside, (event) => {
+          if (event.target !== subContext.trigger) context.onOpenChange(false);
+        }),
+        onEscapeKeyDown: composeEventHandlers$1(props.onEscapeKeyDown, (event) => {
+          rootContext.onClose();
+          event.preventDefault();
+        }),
+        onKeyDown: composeEventHandlers$1(props.onKeyDown, (event) => {
+          const isKeyDownInside = event.currentTarget.contains(event.target);
+          const isCloseKey = SUB_CLOSE_KEYS[rootContext.dir].includes(event.key);
+          if (isKeyDownInside && isCloseKey) {
+            context.onOpenChange(false);
+            subContext.trigger?.focus();
+            event.preventDefault();
+          }
+        })
+      }
+    ) }) }) });
+  }
+);
+MenuSubContent$1.displayName = SUB_CONTENT_NAME$1;
+function getOpenState(open) {
+  return open ? "open" : "closed";
+}
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getCheckedState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+function focusFirst(candidates) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidate of candidates) {
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus();
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+function wrapArray(array, startIndex) {
+  return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+function getNextMatch(values, search, currentMatch) {
+  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
+  const normalizedSearch = isRepeated ? search[0] : search;
+  const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+  let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
+  const excludeCurrentMatch = normalizedSearch.length === 1;
+  if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
+  const nextMatch = wrappedValues.find(
+    (value) => value.toLowerCase().startsWith(normalizedSearch.toLowerCase())
+  );
+  return nextMatch !== currentMatch ? nextMatch : void 0;
+}
+function isPointInPolygon$1(point, polygon) {
+  const { x, y } = point;
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const xi = polygon[i].x;
+    const yi = polygon[i].y;
+    const xj = polygon[j].x;
+    const yj = polygon[j].y;
+    const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+    if (intersect) inside = !inside;
+  }
+  return inside;
+}
+function isPointerInGraceArea(event, area) {
+  if (!area) return false;
+  const cursorPos = { x: event.clientX, y: event.clientY };
+  return isPointInPolygon$1(cursorPos, area);
+}
+function whenMouse(handler) {
+  return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
+}
+var Root3$1 = Menu$1;
+var Anchor2 = MenuAnchor;
+var Portal$2 = MenuPortal$1;
+var Content2$2 = MenuContent$1;
+var Group = MenuGroup$1;
+var Label = MenuLabel$1;
+var Item2$1 = MenuItem$1;
+var CheckboxItem = MenuCheckboxItem$1;
+var RadioGroup$1 = MenuRadioGroup$1;
+var RadioItem = MenuRadioItem$1;
+var ItemIndicator = MenuItemIndicator;
+var Separator = MenuSeparator$1;
+var Arrow2$1 = MenuArrow;
+var Sub = MenuSub$1;
+var SubTrigger = MenuSubTrigger$1;
+var SubContent = MenuSubContent$1;
+
+var DROPDOWN_MENU_NAME = "DropdownMenu";
+var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope$1(
+  DROPDOWN_MENU_NAME,
+  [createMenuScope]
+);
+var useMenuScope = createMenuScope();
+var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
+var DropdownMenu = (props) => {
+  const {
+    __scopeDropdownMenu,
+    children,
+    dir,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    modal = true
+  } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const triggerRef = React.useRef(null);
+  const [open = false, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ jsx(
+    DropdownMenuProvider,
+    {
+      scope: __scopeDropdownMenu,
+      triggerId: useId(),
+      triggerRef,
+      contentId: useId(),
+      open,
+      onOpenChange: setOpen,
+      onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
+      modal,
+      children: /* @__PURE__ */ jsx(Root3$1, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
+    }
+  );
+};
+DropdownMenu.displayName = DROPDOWN_MENU_NAME;
+var TRIGGER_NAME$1 = "DropdownMenuTrigger";
+var DropdownMenuTrigger = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
+    const context = useDropdownMenuContext(TRIGGER_NAME$1, __scopeDropdownMenu);
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ jsx(Anchor2, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsx(
+      Primitive$1.button,
+      {
+        type: "button",
+        id: context.triggerId,
+        "aria-haspopup": "menu",
+        "aria-expanded": context.open,
+        "aria-controls": context.open ? context.contentId : void 0,
+        "data-state": context.open ? "open" : "closed",
+        "data-disabled": disabled ? "" : void 0,
+        disabled,
+        ...triggerProps,
+        ref: composeRefs$1(forwardedRef, context.triggerRef),
+        onPointerDown: composeEventHandlers$1(props.onPointerDown, (event) => {
+          if (!disabled && event.button === 0 && event.ctrlKey === false) {
+            context.onOpenToggle();
+            if (!context.open) event.preventDefault();
+          }
+        }),
+        onKeyDown: composeEventHandlers$1(props.onKeyDown, (event) => {
+          if (disabled) return;
+          if (["Enter", " "].includes(event.key)) context.onOpenToggle();
+          if (event.key === "ArrowDown") context.onOpenChange(true);
+          if (["Enter", " ", "ArrowDown"].includes(event.key)) event.preventDefault();
+        })
+      }
+    ) });
+  }
+);
+DropdownMenuTrigger.displayName = TRIGGER_NAME$1;
+var PORTAL_NAME$2 = "DropdownMenuPortal";
+var DropdownMenuPortal = (props) => {
+  const { __scopeDropdownMenu, ...portalProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ jsx(Portal$2, { ...menuScope, ...portalProps });
+};
+DropdownMenuPortal.displayName = PORTAL_NAME$2;
+var CONTENT_NAME$2 = "DropdownMenuContent";
+var DropdownMenuContent = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDropdownMenu, ...contentProps } = props;
+    const context = useDropdownMenuContext(CONTENT_NAME$2, __scopeDropdownMenu);
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    const hasInteractedOutsideRef = React.useRef(false);
+    return /* @__PURE__ */ jsx(
+      Content2$2,
+      {
+        id: context.contentId,
+        "aria-labelledby": context.triggerId,
+        ...menuScope,
+        ...contentProps,
+        ref: forwardedRef,
+        onCloseAutoFocus: composeEventHandlers$1(props.onCloseAutoFocus, (event) => {
+          if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
+          hasInteractedOutsideRef.current = false;
+          event.preventDefault();
+        }),
+        onInteractOutside: composeEventHandlers$1(props.onInteractOutside, (event) => {
+          const originalEvent = event.detail.originalEvent;
+          const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+          const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+          if (!context.modal || isRightClick) hasInteractedOutsideRef.current = true;
+        }),
+        style: {
+          ...props.style,
+          // re-namespace exposed content custom properties
+          ...{
+            "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
+            "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
+            "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
+            "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
+            "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
+          }
+        }
+      }
+    );
+  }
+);
+DropdownMenuContent.displayName = CONTENT_NAME$2;
+var GROUP_NAME = "DropdownMenuGroup";
+var DropdownMenuGroup = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDropdownMenu, ...groupProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ jsx(Group, { ...menuScope, ...groupProps, ref: forwardedRef });
+  }
+);
+DropdownMenuGroup.displayName = GROUP_NAME;
+var LABEL_NAME = "DropdownMenuLabel";
+var DropdownMenuLabel = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDropdownMenu, ...labelProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ jsx(Label, { ...menuScope, ...labelProps, ref: forwardedRef });
+  }
+);
+DropdownMenuLabel.displayName = LABEL_NAME;
+var ITEM_NAME = "DropdownMenuItem";
+var DropdownMenuItem = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDropdownMenu, ...itemProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ jsx(Item2$1, { ...menuScope, ...itemProps, ref: forwardedRef });
+  }
+);
+DropdownMenuItem.displayName = ITEM_NAME;
+var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
+var DropdownMenuCheckboxItem = React.forwardRef((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...checkboxItemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ jsx(CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
+});
+DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
+var DropdownMenuRadioGroup = React.forwardRef((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...radioGroupProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ jsx(RadioGroup$1, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
+});
+DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
+var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
+var DropdownMenuRadioItem = React.forwardRef((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...radioItemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ jsx(RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
+});
+DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
+var INDICATOR_NAME = "DropdownMenuItemIndicator";
+var DropdownMenuItemIndicator = React.forwardRef((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ jsx(ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
+});
+DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
+var SEPARATOR_NAME = "DropdownMenuSeparator";
+var DropdownMenuSeparator = React.forwardRef((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...separatorProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ jsx(Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
+});
+DropdownMenuSeparator.displayName = SEPARATOR_NAME;
+var ARROW_NAME$2 = "DropdownMenuArrow";
+var DropdownMenuArrow = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDropdownMenu, ...arrowProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return /* @__PURE__ */ jsx(Arrow2$1, { ...menuScope, ...arrowProps, ref: forwardedRef });
+  }
+);
+DropdownMenuArrow.displayName = ARROW_NAME$2;
+var DropdownMenuSub = (props) => {
+  const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const [open = false, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ jsx(Sub, { ...menuScope, open, onOpenChange: setOpen, children });
+};
+var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
+var DropdownMenuSubTrigger = React.forwardRef((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...subTriggerProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ jsx(SubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
+});
+DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+var SUB_CONTENT_NAME = "DropdownMenuSubContent";
+var DropdownMenuSubContent = React.forwardRef((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...subContentProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ jsx(
+    SubContent,
+    {
+      ...menuScope,
+      ...subContentProps,
+      ref: forwardedRef,
+      style: {
+        ...props.style,
+        // re-namespace exposed content custom properties
+        ...{
+          "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
+          "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
+          "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
+          "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
+          "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
+        }
+      }
+    }
+  );
+});
+DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;
+var Root2$1 = DropdownMenu;
+var Trigger$1 = DropdownMenuTrigger;
+var Portal2 = DropdownMenuPortal;
+var Content2$1 = DropdownMenuContent;
+var Group2 = DropdownMenuGroup;
+var Label2 = DropdownMenuLabel;
+var Item2 = DropdownMenuItem;
+var CheckboxItem2 = DropdownMenuCheckboxItem;
+var RadioGroup2 = DropdownMenuRadioGroup;
+var RadioItem2 = DropdownMenuRadioItem;
+var Separator2 = DropdownMenuSeparator;
+var Sub2 = DropdownMenuSub;
+var SubTrigger2 = DropdownMenuSubTrigger;
+var SubContent2 = DropdownMenuSubContent;
+
+/**
+ * Contains all the parts of a dropdown menu.
+ */
+var Menu = function (_a) {
+    var defaultOpen = _a.defaultOpen, open = _a.open, onOpenChange = _a.onOpenChange, _b = _a.modal, modal = _b === void 0 ? false : _b, children = _a.children, props = __rest(_a, ["defaultOpen", "open", "onOpenChange", "modal", "children"]);
+    return (React__default.createElement(Root2$1, __assign({ defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, modal: modal }, filterAttrs(props)), children));
+};
+
+var MenuItemContentTemplate = function (_a) {
+    var leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, trailingIcon = _a.trailingIcon, children = _a.children;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: "arc-MenuItem-content" },
+            leadingIcon && (React__default.createElement("div", { className: "arc-MenuItem-leadingIcon" },
+                React__default.createElement(Icon$1, { icon: leadingIcon, size: 24 }))),
+            React__default.createElement("div", { className: "arc-MenuItem-text" },
+                React__default.createElement(Text, { size: "m" }, children),
+                supportingText && React__default.createElement(Text, { size: "xs" }, supportingText))),
+        keyCommands || trailingIcon ? (React__default.createElement("div", { className: "arc-MenuItem-actions" },
+            keyCommands && (React__default.createElement("div", { className: "arc-MenuItem-keyCommands" }, keyCommands)),
+            trailingIcon && (React__default.createElement("div", { className: "arc-MenuItem-trailingIcon" },
+                React__default.createElement(Icon$1, { icon: trailingIcon, size: 24 }))))) : null));
+};
+
+var MenuCheckboxItem = function (_a) {
+    var children = _a.children, checked = _a.checked, onCheckedChange = _a.onCheckedChange, isDisabled = _a.isDisabled, onSelect = _a.onSelect, id = _a.id, _b = _a.shouldKeepOpen, shouldKeepOpen = _b === void 0 ? true : _b, props = __rest(_a, ["children", "checked", "onCheckedChange", "isDisabled", "onSelect", "id", "shouldKeepOpen"]);
+    return (React__default.createElement(CheckboxItem2, __assign({ className: "arc-MenuItem arc-MenuCheckboxItem", checked: checked, onCheckedChange: onCheckedChange, disabled: isDisabled, onSelect: function (event) {
+            if (shouldKeepOpen) {
+                event.preventDefault();
+                onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(!checked);
+            }
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(event);
+        }, id: id }, filterAttrs(props)),
+        React__default.createElement("div", { className: classNames("arc-MenuCheckboxItem-box", {
+                "arc-MenuCheckboxItem-box--checked": checked,
+            }) }, checked && (React__default.createElement("svg", { style: { width: 14, height: 11 }, viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React__default.createElement("path", { d: "M5.99459 14L0.350576 8.23277C0.126079 8.00285 0 7.69132 0 7.36653C0 7.04173 0.126079 6.7302 0.350576 6.50028C0.578979 6.27752 0.88258 6.15324 1.19832 6.15324C1.51405 6.15324 1.81765 6.27752 2.04606 6.50028L5.99459 10.535L15.9385 0.374054C16.0491 0.25703 16.1814 0.163688 16.3277 0.0994738C16.474 0.0352599 16.6313 0.00145997 16.7905 4.626e-05C16.9497 -0.00136745 17.1076 0.0296342 17.255 0.0912406C17.4023 0.152847 17.5362 0.243825 17.6488 0.358867C17.7614 0.473908 17.8504 0.610709 17.9107 0.761287C17.971 0.911865 18.0013 1.0732 18 1.23589C17.9986 1.39858 17.9655 1.55936 17.9026 1.70884C17.8398 1.85833 17.7485 1.99352 17.6339 2.10655L5.99459 14Z", fill: "currentColor" })))),
+        React__default.createElement(MenuItemContentTemplate, null, children)));
+};
+
+/**
+ * The component that pops out when the dropdown menu is open.
+ */
+var MenuContent = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, _b = _a.align, align = _b === void 0 ? "start" : _b, alignOffset = _a.alignOffset, side = _a.side, props = __rest(_a, ["children", "width", "minWidth", "maxWidth", "align", "alignOffset", "side"]);
+    return (React__default.createElement(Content2$1, __assign({ ref: ref, style: { width: width, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent", sideOffset: 12, loop: true, collisionPadding: 12, forceMount: true, align: align, alignOffset: alignOffset, side: side }, filterAttrs(props)), children));
+});
+
+/**
+ * Use `Rule` to display a horizontal or vertical rule.
+ */
+var Rule = function (_a, props) {
+    var _b;
+    var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
+    var surface = useContext(Context$3).surface;
+    return (React__default.createElement("hr", __assign({ className: classNames((_b = {
+                "arc-Rule": true
+            },
+            _b["arc-Rule--".concat(orientation)] = true,
+            _b["arc-Rule--onDarkSurface"] = surface === "dark",
+            _b)) }, filterAttrs(props))));
+};
+
+/**
+ * Displays footer content at the bottom of the menu.
+ */
+var MenuFooter = function (_a) {
+    var leadingIcon = _a.leadingIcon, trailingIcon = _a.trailingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, children = _a.children, onClick = _a.onClick, isDisabled = _a.isDisabled, ariaLabel = _a.ariaLabel;
+    return (React__default.createElement("div", { className: "arc-MenuFooter", style: {
+            position: "relative",
+        } },
+        React__default.createElement("div", { style: {
+                height: "12px",
+                background: "linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
+                position: "absolute",
+                width: "100%",
+                zIndex: 3,
+                top: -12,
+            } }),
+        React__default.createElement("div", { className: "arc-MenuSeparator", style: { paddingTop: 0 } },
+            React__default.createElement(Rule, null)),
+        React__default.createElement(Item2, { className: "arc-MenuItem", "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled },
+            React__default.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: trailingIcon, supportingText: supportingText, keyCommands: keyCommands }, children))));
+};
+
+/**
+ * Groups related menu items together within a dropdown menu.
+ */
+var MenuGroup = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React__default.createElement(Group2, __assign({ className: "arc-MenuGroup" }, filterAttrs(props)), children));
+};
+
+/**
+ * Displays a header within the dropdown menu.
+ */
+var MenuHeader = function (_a) {
+    var leadingIcon = _a.leadingIcon, trailingIcon = _a.trailingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, children = _a.children, onClick = _a.onClick, isDisabled = _a.isDisabled, ariaLabel = _a.ariaLabel;
+    return (React__default.createElement("div", { className: "arc-MenuHeader" },
+        React__default.createElement(Item2, { className: "arc-MenuItem ", style: { marginBottom: 0 }, "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled },
+            React__default.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: trailingIcon, supportingText: supportingText, keyCommands: keyCommands }, children)),
+        React__default.createElement("div", { className: "arc-MenuSeparator", style: {
+                paddingBottom: 0,
+            } },
+            React__default.createElement(Rule, null),
+            React__default.createElement("div", { style: {
+                    height: "12px",
+                    background: "linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
+                    position: "absolute",
+                    width: "100%",
+                    zIndex: 3,
+                } }))));
+};
+
+/**
+ * Renders a menu item, optionally as a link if `href` is provided.
+ */
+var MenuItem = function (_a) {
+    var leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, trailingIcon = _a.trailingIcon, children = _a.children, onClick = _a.onClick, _b = _a.shouldKeepOpen, shouldKeepOpen = _b === void 0 ? true : _b, isDisabled = _a.isDisabled, href = _a.href, ariaLabel = _a.ariaLabel, props = __rest(_a, ["leadingIcon", "supportingText", "keyCommands", "trailingIcon", "children", "onClick", "shouldKeepOpen", "isDisabled", "href", "ariaLabel"]);
+    var Component = href ? "a" : "div";
+    return (React__default.createElement(Item2, __assign({ className: "arc-MenuItem", asChild: true, "aria-label": ariaLabel, onClick: onClick, onSelect: function (event) {
+            if (shouldKeepOpen) {
+                event.preventDefault();
+            }
+        }, disabled: isDisabled }, filterAttrs(props)),
+        React__default.createElement(Component, __assign({ className: href && "arc-MenuItem--link", href: href }, props),
+            React__default.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, trailingIcon: trailingIcon, supportingText: supportingText, keyCommands: keyCommands }, children))));
+};
+
+/**
+ * Provides a label to group related menu items.
+ */
+var MenuLabel = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React__default.createElement(Label2, __assign({ className: "arc-MenuLabel" }, filterAttrs(props)), children));
+};
+
+/**
+ * When used, portals the content part into the body. By default it's arc's theme element
+ */
+var MenuPortal = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var _b = useThemeElement(), themeElement = _b[0], setThemeElement = _b[1];
+    return (React__default.createElement("span", { ref: setThemeElement, style: { display: "none" } },
+        React__default.createElement(Portal2, __assign({ container: themeElement }, filterAttrs(props)), children)));
+};
+
+/**
+ * Groups menu items allowing single selection from multiple options.
+ */
+var MenuRadioGroup = function (_a) {
+    var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, props = __rest(_a, ["children", "value", "onValueChange"]);
+    return (React__default.createElement(RadioGroup2, __assign({ className: "arc-MenuRadioGroup", value: value, onValueChange: onValueChange }, filterAttrs(props)), children));
+};
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconArrowAltUp =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M20.354 13.146 16 8.793l-4.354 4.354a.5.5 0 0 0 .707.707l3.147-3.147V22.5a.5.5 0 0 0 1 0V10.707l3.146 3.146a.5.5 0 0 0 .707-.707'/%3e%3c/svg%3e";
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconCross =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m0 27a13 13 0 1 1 13-13 13.015 13.015 0 0 1-13 13'/%3e%3cpath d='M20.854 11.146a.5.5 0 0 0-.707 0L16 15.293l-4.146-4.146a.5.5 0 0 0-.707.707L15.293 16l-4.146 4.146a.5.5 0 1 0 .707.707L16 16.707l4.146 4.146a.5.5 0 0 0 .707-.707L16.707 16l4.146-4.146a.5.5 0 0 0 0-.708'/%3e%3c/svg%3e";
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconCrossFill =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m4.854 18.146a.5.5 0 1 1-.707.707L16 16.707l-4.146 4.146a.5.5 0 0 1-.707-.707L15.293 16l-4.146-4.146a.5.5 0 0 1 .707-.707L16 15.293l4.146-4.146a.5.5 0 0 1 .707.707L16.707 16Z'/%3e%3c/svg%3e";
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconFirstMid =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' fill-rule='evenodd' d='M4.675 4.005c.373 0 .675.303.675.675v6.64a.675.675 0 1 1-1.35 0V4.68c0-.372.302-.675.675-.675M7.973 8l2.848 2.852a.673.673 0 0 1-.731 1.097.7.7 0 0 1-.218-.145L6.548 8.476a.673.673 0 0 1 0-.951l3.324-3.328a.671.671 0 1 1 .95.951z' clip-rule='evenodd'/%3e%3c/svg%3e";
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconLastMid =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' fill-rule='evenodd' d='M10.34 11.995a.675.675 0 0 1-.674-.675V4.68a.675.675 0 1 1 1.35 0v6.64a.675.675 0 0 1-.675.675M7.043 8 4.194 5.148a.673.673 0 0 1 .732-1.097.7.7 0 0 1 .218.146l3.324 3.328a.673.673 0 0 1 0 .95l-3.324 3.329a.671.671 0 1 1-.95-.952z' clip-rule='evenodd'/%3e%3c/svg%3e";
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconPlayFill =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M13.161 11.762a.1.1 0 0 0-.107 0 .1.1 0 0 0-.054.092v8.288a.1.1 0 0 0 .054.093.1.1 0 0 0 .107 0l7.178-4.144a.1.1 0 0 0 .054-.092.1.1 0 0 0-.054-.094Z'/%3e%3cpath d='M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m4.839 14.957-7.178 4.145a1.108 1.108 0 0 1-1.661-.96v-8.288a1.107 1.107 0 0 1 1.661-.958l7.178 4.144a1.107 1.107 0 0 1 0 1.917'/%3e%3c/svg%3e";
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconTickAlt2Px =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m13.5 21.914-4.707-4.707a1 1 0 0 1 0-1.414 1.024 1.024 0 0 1 1.414 0l3.293 3.293 8.293-8.293a1 1 0 1 1 1.414 1.414Z'/%3e%3c/svg%3e";
+
+/**
+ * A selectable menu item used within a radio group.
+ */
+var MenuRadioItem = function (_a) {
+    var children = _a.children, value = _a.value, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onSelect = _a.onSelect, leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, _c = _a.shouldKeepOpen, shouldKeepOpen = _c === void 0 ? true : _c, props = __rest(_a, ["children", "value", "disabled", "onSelect", "leadingIcon", "supportingText", "shouldKeepOpen"]);
+    return (React__default.createElement(RadioItem2, __assign({ className: "arc-MenuItem arc-MenuRadioItem", value: value, disabled: disabled, onSelect: function (event) {
+            if (shouldKeepOpen) {
+                event.preventDefault();
             }
-        }
-        setMinimumHeight(undefined);
-    }, 100);
-    useEffect(function () {
-        checkMinHeight();
-        window.addEventListener("resize", checkMinHeight);
-        return function () {
-            window.removeEventListener("resize", checkMinHeight);
-        };
-    }, [minHeights, ArcBreakpoints]);
-    return (React__default.createElement("div", __assign({ style: { minHeight: minHeight ? minHeight : minimumHeight }, className: classNames("arc-InformationCard", {
-            "arc-InformationCard--isALink": cardUrl,
-            "arc-InformationCard--outlined": cardUrl && showHoverState,
-            "arc-InformationCard--onDarkSurface": surface === "dark",
-        }) }, filterAttrs(props)),
-        React__default.createElement(Surface, { growVertically: true, background: "light-white" },
-            React__default.createElement("div", { className: "arc-InformationCard-innerContainer" },
-                image && (React__default.createElement("div", { className: "arc-InformationCard-img" },
-                    React__default.createElement(Image, __assign({ alt: "" }, image)))),
-                icon && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement("div", { className: "arc-InformationCard-icon" },
-                        React__default.createElement(Icon$1, { testId: "information-card-icon", icon: icon })))),
-                React__default.createElement("div", { className: "arc-InformationCard-contentContainer" },
-                    label && (React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("div", { className: "arc-InformationCard-label" }, label.toUpperCase()))),
-                    React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: cardUrl, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
-                    text && React__default.createElement(Text, null, text)),
-                (button || badges || footerLogo) && (React__default.createElement("div", { className: "arc-InformationCard-footer" },
-                    badges && (React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("div", { className: "arc-InformationCard-badgeContainer" }, badges.map(function (_a, i) {
-                            var text = _a.text, badgeProps = __rest(_a, ["text"]);
-                            return (React__default.createElement("div", { className: "arc-InformationCard-badge", key: "information-card-badge-".concat(i) },
-                                React__default.createElement(Badge, __assign({}, badgeProps), text)));
-                        })))),
-                    React__default.createElement("div", { className: "arc-InformationCard-footerItems" },
-                        button && !cardUrl && (React__default.createElement("div", { className: "arc-InformationCard-footerButtonContainer" },
-                            React__default.createElement(ButtonV2, __assign({}, button, { size: "m", iconPosition: "beforeText", buttonStyle: "compact", icon: BtIconArrowRight })))),
-                        footerLogo && (React__default.createElement("div", { className: "arc-InformationCard-footerLogoContainer" },
-                            React__default.createElement(Image, __assign({}, footerLogo)))))))))));
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+        } }, filterAttrs(props)),
+        React__default.createElement(MenuItemContentTemplate, { leadingIcon: leadingIcon, supportingText: supportingText, trailingIcon: BtIconTickAlt2Px }, children)));
 };
 
-const BtIconNewWindow = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M24.70166,7.01794a.49968.49968,0,0,0-.19092-.03845H17.50586a.5.5,0,0,0,0,1h5.79785l-8.15918,8.15918a.49995.49995,0,1,0,.707.707l8.15918-8.15918v5.77393a.5.5,0,1,0,1,0v-6.981a.50171.50171,0,0,0-.30908-.46155Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M26.85156,3.99072H5.18359A1.20156,1.20156,0,0,0,3.9834,5.19141V26.89062a1.10362,1.10362,0,0,0,1.10254,1.103H26.85156a1.17979,1.17979,0,0,0,1.17871-1.17871V5.16943A1.17979,1.17979,0,0,0,26.85156,3.99072Zm.17871,22.82422a.17891.17891,0,0,1-.17871.17871H5.08594a.10419.10419,0,0,1-.10254-.103V5.19141a.20069.20069,0,0,1,.20019-.20069h21.668a.17888.17888,0,0,1,.17871.17871Z",
-      fill: "currentColor",
-    }),
-  );
-
 /**
- * Use `Link` to direct users to a new page or piece of information.
+ * Scrollable container that adjusts height based on surrounding menu content.
  */
-var Link = function (_a) {
-    var id = _a.id, href = _a.href, title = _a.title, rel = _a.rel, target = _a.target, children = _a.children, onClick = _a.onClick, screenReaderText = _a.screenReaderText, _b = _a.isButton, isButton = _b === void 0 ? false : _b, _c = _a.isImplied, isImplied = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, props = __rest(_a, ["id", "href", "title", "rel", "target", "children", "onClick", "screenReaderText", "isButton", "isImplied", "size"]);
-    var surface = useContext(Context$3).surface;
-    var isExternalLink = target === "_blank";
-    var textArray = children.split(" ");
-    var firstText = textArray.slice(0, -1).join(" ");
-    var lastWord = textArray[textArray.length - 1];
-    var commonProps = {
-        id: id,
-        onClick: onClick,
-        className: classNames("arc-Link", "arc-Link--".concat(size), {
-            "arc-Link--onDarkSurface": surface === "dark",
-            "arc-Link--onLightSurface": surface !== "dark",
-            "arc-Link--isImplied": isImplied,
-        }),
-    };
-    var elementProps = {
-        a: __assign(__assign({}, commonProps), { href: href, title: title, target: target, rel: rel }),
-        button: __assign({}, commonProps),
-        span: __assign({}, commonProps),
+var MenuScrollable = function (_a) {
+    var children = _a.children;
+    var scrollableRefFunc = function (el) {
+        var totalSiblingHeight = 0;
+        // get the closest Menu.Content element this will always exist within the menu component
+        var contentContainer = el === null || el === void 0 ? void 0 : el.closest(".arc-MenuContent");
+        if (!contentContainer || !el)
+            return;
+        // loop over all children in Menu.Content children to get height of each non scrollable element (excluding the scroll element itself)
+        Array.from(contentContainer.children).forEach(function (child) {
+            if (child !== el) {
+                totalSiblingHeight += child.offsetHeight + 6;
+            }
+        });
+        var availableHeight = "calc(var(--radix-dropdown-menu-content-available-height) - ".concat(totalSiblingHeight, "px - 25px)");
+        el.style.height = "".concat(el.scrollHeight, "px");
+        el.style.maxHeight = availableHeight;
     };
-    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(VisuallyHidden$2, null,
-                screenReaderText || children,
-                isExternalLink && " (Opens in new window)"),
-            firstText && (React__default.createElement("span", { "aria-hidden": true, className: "arc-Link-text" },
-                firstText,
-                "\u00A0")),
-            React__default.createElement("span", { className: "arc-Link-iconWrapper" },
-                React__default.createElement("span", { "aria-hidden": true, className: "arc-Link-text" }, lastWord),
-                isExternalLink && (React__default.createElement(Icon$1, { isPresentationIcon: true, icon: BtIconNewWindow, size: size === "s" ? 20 : 24 }))))));
+    return (React__default.createElement("div", { ref: scrollableRefFunc, className: "arc-MenuScrollable" }, children));
 };
 
 /**
- * Use `Markup` to display HTML-formatted text.
+ * Visual separator used to divide groups of menu items.
  */
-var Markup = function (_a) {
-    var children = _a.children, _b = _a.isMeasured, isMeasured = _b === void 0 ? false : _b, props = __rest(_a, ["children", "isMeasured"]);
-    var surface = useContext(Context$3).surface;
-    return (React__default.createElement("div", __assign({ className: classNames({
-            "arc-Markup": true,
-            "arc-Markup--measured": isMeasured,
-            "arc-Markup--onDarkSurface": surface === "dark",
-        }) }, filterAttrs(props)), children));
+var MenuSeparator = function (props) {
+    return (React__default.createElement(Separator2, __assign({ className: "arc-MenuSeparator" }, filterAttrs(props)),
+        React__default.createElement(Rule, null)));
 };
 
-var VideoPlayer$1 = React__default.lazy(function () {
-    return Promise.resolve().then(function () { return index; }).then(function (_a) {
-        var VideoPlayer = _a.VideoPlayer;
-        return ({
-            default: VideoPlayer,
-        });
-    });
+/**
+ * Container for submenu content within a dropdown menu.
+ */
+var MenuSub = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return React__default.createElement(Sub2, __assign({}, filterAttrs(props)),
+        " ",
+        children);
+};
+
+/**
+ * The submenu content that pops out when a menu item with children is hovered or clicked.
+ */
+var MenuSubContent = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, alignOffset = _a.alignOffset, props = __rest(_a, ["children", "width", "minWidth", "maxWidth", "alignOffset"]);
+    return (React__default.createElement(SubContent2, __assign({ ref: ref, style: { width: width, minWidth: minWidth, maxWidth: maxWidth }, className: "arc-MenuContent arc-MenuSubContent", sideOffset: 24, collisionPadding: 12, avoidCollisions: true, alignOffset: alignOffset }, filterAttrs(props)), children));
 });
+
 /**
- * Use `MediaCard` to contain content and an image about a single subject.
+ * Trigger element that opens a submenu when selected.
  */
-var MediaCard = function (_a) {
-    var media = _a.media, url = _a.url, onClick = _a.onClick, heading = _a.heading, label = _a.label, text = _a.text, metaText = _a.metaText, minHeight = _a.minHeight, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isContained, isContained = _c === void 0 ? true : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, props = __rest(_a, ["media", "url", "onClick", "heading", "label", "text", "metaText", "minHeight", "buttonIcon", "isContained", "headingLevel"]);
-    var surface = useContext(Context$3).surface;
-    var _e = useState(false), isClient = _e[0], setIsClient = _e[1];
-    var _f = useState(false), showHoverState = _f[0], setShowHoverState = _f[1];
-    var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
-    var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
-    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
-    useEffect(function () {
-        setIsClient(true);
-    }, []);
-    return (React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-MediaCard", {
-            "arc-MediaCard--outlined": url && isContained && showHoverState,
-            "arc-MediaCard--contained": isContained,
-            "arc-MediaCard--onDarkSurface": surface === "dark",
-        }) }, filterAttrs(props)),
-        React__default.createElement(ConditionalWrapper, { condition: isContained, wrapper: function (children) { return (React__default.createElement(Surface, { growVertically: true, background: "light-white" }, children)); } },
-            media.type === "img" && (React__default.createElement("div", { className: "arc-MediaCard-imgContainer" },
-                React__default.createElement(Image, __assign({}, media)))),
-            media.type === "video" && isClient && (React__default.createElement(Suspense, { fallback: null },
-                React__default.createElement(VideoPlayer$1, __assign({ isSupportingTextHidden: true }, media)))),
-            React__default.createElement("div", { className: "arc-MediaCard-content" },
-                label && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(Heading, { size: "xxs" }, label.toUpperCase()),
-                    React__default.createElement(VerticalSpace, { size: headingSpacing }))),
-                React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: media.type !== "video" ? url : undefined, onClick: media.type !== "video" ? onClick : undefined, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
-                React__default.createElement("div", { className: "arc-MediaCard-textContainer" }, text && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(VerticalSpace, { size: headingSpacing }),
-                    React__default.createElement(Text, null, text),
-                    (url || metaText) && React__default.createElement(VerticalSpace, { size: "24" })))),
-                React__default.createElement(CardFooter, { buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url) && media.type !== "video", isHovered: showHoverState })))));
+var MenuSubTrigger = function (_a) {
+    var children = _a.children, isDisabled = _a.isDisabled, leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, ariaLabel = _a.ariaLabel, props = __rest(_a, ["children", "isDisabled", "leadingIcon", "supportingText", "keyCommands", "ariaLabel"]);
+    return (React__default.createElement(SubTrigger2, __assign({ className: "arc-MenuItem arc-MenuItem--trigger", disabled: isDisabled, "aria-label": ariaLabel }, filterAttrs(props)),
+        React__default.createElement("div", { className: "arc-MenuItem-content" },
+            leadingIcon && (React__default.createElement("div", { className: "arc-MenuItem-leadingIcon" },
+                React__default.createElement(Icon$1, { icon: leadingIcon, size: 24 }))),
+            React__default.createElement("div", { className: "arc-MenuItem-text" },
+                React__default.createElement(Text, { size: "m" }, children),
+                supportingText && React__default.createElement(Text, { size: "xs" }, supportingText))),
+        React__default.createElement("div", { className: "arc-MenuItem-actions" },
+            keyCommands && (React__default.createElement("div", { className: "arc-MenuItem-keyCommands" }, keyCommands)),
+            React__default.createElement("div", { className: "arc-MenuItem-trailingIcon" },
+                React__default.createElement(Icon$1, { icon: BtIconChevronRightMid, size: 24 })))));
+};
+
+/**
+ * The element that toggles the menu.
+ */
+var MenuTrigger = function (_a) {
+    var children = _a.children, asChild = _a.asChild, props = __rest(_a, ["children", "asChild"]);
+    return (React__default.createElement(Trigger$1, __assign({ className: ".arc-MenuItem arc-MenuTrigger", asChild: asChild }, filterAttrs(props)), children));
 };
 
 /** Use `Modal` to display information that needs immediate action from a user. */
 var Modal = function (_a) {
-    var title = _a.title, description = _a.description, ariaDescribedBy = _a.ariaDescribedBy, isOpen = _a.isOpen, actions = _a.actions, onRequestClose = _a.onRequestClose, children = _a.children, _b = _a.role, role = _b === void 0 ? "dialog" : _b, _c = _a.shouldReturnFocus, shouldReturnFocus = _c === void 0 ? true : _c, _d = _a.isContentScrollable, isContentScrollable = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "l" : _e, _f = _a.fullBleed, fullBleed = _f === void 0 ? false : _f, customWidth = _a.customWidth, props = __rest(_a, ["title", "description", "ariaDescribedBy", "isOpen", "actions", "onRequestClose", "children", "role", "shouldReturnFocus", "isContentScrollable", "size", "fullBleed", "customWidth"]);
-    var _g = useThemeElement(), themeElement = _g[0], setThemeElement = _g[1];
+    var _b;
+    var title = _a.title, description = _a.description, ariaDescribedBy = _a.ariaDescribedBy, isOpen = _a.isOpen, actions = _a.actions, onRequestClose = _a.onRequestClose, children = _a.children, _c = _a.role, role = _c === void 0 ? "dialog" : _c, _d = _a.shouldReturnFocus, shouldReturnFocus = _d === void 0 ? true : _d, _e = _a.isContentScrollable, isContentScrollable = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "l" : _f, _g = _a.fullBleed, fullBleed = _g === void 0 ? false : _g, customWidths = _a.customWidths, props = __rest(_a, ["title", "description", "ariaDescribedBy", "isOpen", "actions", "onRequestClose", "children", "role", "shouldReturnFocus", "isContentScrollable", "size", "fullBleed", "customWidths"]);
+    var _h = useThemeElement(), themeElement = _h[0], setThemeElement = _h[1];
     var triggerRef = useRef(null);
     var setTriggerElement = function () {
         return shouldReturnFocus &&
@@ -16797,13 +18229,18 @@ var Modal = function (_a) {
         }
     };
     return (React__default.createElement("div", { ref: setThemeElement },
-        React__default.createElement(Root$2, { open: isOpen },
-            React__default.createElement(Portal$2, { container: themeElement },
+        React__default.createElement(Root$3, { open: isOpen },
+            React__default.createElement(Portal$3, { container: themeElement },
                 React__default.createElement(Overlay, { className: "arc-Modal-overlay" },
-                    React__default.createElement(Content$1, __assign({}, ariaProps, { role: role, onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: closeModal, onInteractOutside: closeModal, "aria-modal": "true", className: classNames("arc-Modal-dialog", "arc-Modal-dialog--".concat(size), {
-                            "arc-Modal-dialog--maxHeightWindow": isContentScrollable,
-                            "arc-Modal-dialog--fullBleed": fullBleed,
-                        }) }, filterAttrs(props), { style: { maxWidth: customWidth } }),
+                    React__default.createElement(Content$1, __assign({}, ariaProps, { role: role, onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: closeModal, onInteractOutside: closeModal, "aria-modal": "true", className: classNames("arc-Modal-dialog", (_b = {},
+                            _b["arc-Modal-dialog--".concat(size)] = !customWidths,
+                            _b["arc-Modal-dialog--xs-span-".concat(customWidths === null || customWidths === void 0 ? void 0 : customWidths.xs)] = customWidths === null || customWidths === void 0 ? void 0 : customWidths.xs,
+                            _b["arc-Modal-dialog--s-span-".concat(customWidths === null || customWidths === void 0 ? void 0 : customWidths.s)] = customWidths === null || customWidths === void 0 ? void 0 : customWidths.s,
+                            _b["arc-Modal-dialog--m-span-".concat(customWidths === null || customWidths === void 0 ? void 0 : customWidths.m)] = customWidths === null || customWidths === void 0 ? void 0 : customWidths.m,
+                            _b["arc-Modal-dialog--l-span-".concat(customWidths === null || customWidths === void 0 ? void 0 : customWidths.l)] = customWidths === null || customWidths === void 0 ? void 0 : customWidths.l,
+                            _b["arc-Modal-dialog--maxHeightWindow"] = isContentScrollable,
+                            _b["arc-Modal-dialog--fullBleed"] = fullBleed,
+                            _b)) }, filterAttrs(props)),
                         React__default.createElement(React__default.Fragment, null,
                             title && (React__default.createElement(React__default.Fragment, null,
                                 React__default.createElement("div", { className: "arc-Modal-section" },
@@ -16866,56 +18303,6 @@ var Pagination = function (_a) {
                 React__default.createElement(ThemeIcon, { size: 32, icon: "paginationNext" })))));
 };
 
-const BtIconFirstMid = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        viewBox: "0 0 16 16",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M4.675 4.00537C5.04779 4.00537 5.35 4.30758 5.35 4.68037V11.3204C5.35 11.6932 5.04779 11.9954 4.675 11.9954C4.30221 11.9954 4 11.6932 4 11.3204V4.68037C4 4.30758 4.30221 4.00537 4.675 4.00537Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M7.97265 8.0002L10.8213 10.8522C10.9473 10.9785 11.0181 11.1495 11.0181 11.3279C11.0181 11.5063 10.9473 11.6773 10.8213 11.8036C10.759 11.866 10.6851 11.9155 10.6036 11.9493C10.5222 11.983 10.4349 12.0004 10.3467 12.0004C10.2585 12.0004 10.1712 11.983 10.0897 11.9493C10.0083 11.9155 9.93428 11.866 9.87199 11.8036L6.54799 8.47553C6.42219 8.34932 6.35156 8.17839 6.35156 8.0002C6.35156 7.822 6.42219 7.65107 6.54799 7.52486L9.87199 4.19686C9.93428 4.13446 10.0083 4.08495 10.0897 4.05117C10.1712 4.01738 10.2585 4 10.3467 4C10.4348 4 10.5222 4.01738 10.6036 4.05117C10.6851 4.08495 10.759 4.13446 10.8213 4.19686C10.9473 4.3231 11.0181 4.49417 11.0181 4.67253C11.0181 4.85089 10.9473 5.02196 10.8213 5.1482L7.97265 8.0002Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconLastMid = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        viewBox: "0 0 16 16",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M10.3406 11.9951C9.96783 11.9951 9.66562 11.6929 9.66562 11.3201V4.68012C9.66562 4.30732 9.96783 4.00512 10.3406 4.00512C10.7134 4.00512 11.0156 4.30732 11.0156 4.68012L11.0156 11.3201C11.0156 11.6929 10.7134 11.9951 10.3406 11.9951Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M7.04297 8.00029L4.19434 5.14832C4.06834 5.02202 3.99754 4.85102 3.99754 4.67262C3.99754 4.49422 4.06834 4.32322 4.19434 4.19692C4.25664 4.13452 4.33054 4.08502 4.41204 4.05122C4.49344 4.01752 4.58074 4.00012 4.66897 4.00012C4.75714 4.00012 4.84445 4.01752 4.9259 4.05122C5.00735 4.08502 5.08134 4.13452 5.14363 4.19692L8.46763 7.52496C8.59343 7.65117 8.66406 7.8221 8.66406 8.00029C8.66406 8.17849 8.59343 8.34942 8.46763 8.47563L5.14363 11.8036C5.08134 11.866 5.00735 11.9155 4.9259 11.9493C4.84445 11.9831 4.75714 12.0005 4.66897 12.0005C4.58084 12.0005 4.49344 11.9831 4.41204 11.9493C4.33054 11.9155 4.25664 11.866 4.19434 11.8036C4.06834 11.6774 3.99754 11.5063 3.99754 11.328C3.99754 11.1496 4.06834 10.9785 4.19434 10.8523L7.04297 8.00029Z",
-      fill: "currentColor",
-    }),
-  );
-
 /**
  * TODO! Revise method of aligning svg's
  */
@@ -16965,18 +18352,18 @@ var Popover = function (_a) {
     var align = _a.align, _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, props = __rest(_a, ["align", "arrow", "background", "children", "content", "asChild", "maxWidth", "onCloseAutoFocus", "onEscapeKeyDown", "onFocusOutside", "onInteractOutside", "onOpenAutoFocus", "onPointerDownOutside", "onOpenChange", "open", "side", "sideOffset", "zIndex"]);
     var _h = useThemeElement(), themeElement = _h[0], setThemeElement = _h[1];
     return (React__default.createElement("div", __assign({ className: "arc-Popover" }, filterAttrs(props)),
-        React__default.createElement(Root2$2, { open: open, onOpenChange: onOpenChange },
-            React__default.createElement(Trigger$2, { asChild: asChild, className: "arc-Popover-trigger" }, children),
+        React__default.createElement(Root2$3, { open: open, onOpenChange: onOpenChange },
+            React__default.createElement(Trigger$3, { asChild: asChild, className: "arc-Popover-trigger" }, children),
             React__default.createElement("div", { ref: setThemeElement },
-                React__default.createElement(Portal$4, { container: themeElement },
+                React__default.createElement(Portal$5, { container: themeElement },
                     React__default.createElement("div", { "data-cy": "z-index", style: { position: "absolute", zIndex: zIndex } },
-                        React__default.createElement(Content2$2, { asChild: true, side: side, sideOffset: sideOffset, align: align, alignOffset: align === "start" ? -16 : align === "end" ? -16 : undefined, onOpenAutoFocus: onOpenAutoFocus, onCloseAutoFocus: onCloseAutoFocus, onEscapeKeyDown: onEscapeKeyDown, onPointerDownOutside: onPointerDownOutside, onFocusOutside: onFocusOutside, onInteractOutside: onInteractOutside },
+                        React__default.createElement(Content2$4, { side: side, sideOffset: sideOffset, align: align, alignOffset: align === "start" ? -16 : align === "end" ? -16 : undefined, onOpenAutoFocus: onOpenAutoFocus, onCloseAutoFocus: onCloseAutoFocus, onEscapeKeyDown: onEscapeKeyDown, onPointerDownOutside: onPointerDownOutside, onFocusOutside: onFocusOutside, onInteractOutside: onInteractOutside },
                             React__default.createElement(Surface, { isTransparent: true, background: background === "light" ? "light-white" : "dark-black" },
                                 React__default.createElement("div", { className: classNames("arc-Popover-content", {
                                         "arc-Popover-content--dark": background === "dark",
                                         "arc-Popover-content--brand": background === "brand",
-                                    }), style: { maxWidth: maxWidth } },
-                                    content && (React__default.createElement("div", { className: "arc-Popover-contentNodeItem" }, content)),
+                                    }), style: { maxWidth: maxWidth }, "aria-labelledby": "popover-content" },
+                                    content && (React__default.createElement("div", { className: "arc-Popover-contentNodeItem", id: "popover-content" }, content)),
                                     arrow && (React__default.createElement(PopoverArrow, { className: "arc-Popover-arrow" })))))))))));
 };
 
@@ -17061,36 +18448,151 @@ var ProgressBar = function (_a) {
                             React__default.createElement(ThemeIcon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))))))))));
 };
 
+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);
+
 // src/capitalise-first-letter/capitalise-first-letter.ts
 var capitaliseFirstLetter = (word) => {
   return word.charAt(0).toUpperCase() + word.slice(1);
 };
 
-var Error$1 = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
-    React__default.createElement("g", { clipPath: "url(#a)" },
-        React__default.createElement("path", { 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", fill: "currentColor" })),
-    React__default.createElement("defs", null,
-        React__default.createElement("clipPath", { id: "a" },
-            React__default.createElement("rect", { width: "24", height: "24", rx: "12" }))))); };
+var Error$1 = "\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  ";
 
-var Warning = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
-    React__default.createElement("path", { d: "M12 15.747a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm.004-1.487a.375.375 0 0 0 .375-.375l.001-6.757a.375.375 0 1 0-.75 0l-.001 6.757a.375.375 0 0 0 .375.375Z", fill: "currentColor", stroke: "currentColor", strokeWidth: ".3" }))); };
+var Warning = "\n  <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <path\n      d=\"M12 15.747a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm.004-1.487a.375.375 0 0 0 .375-.375l.001-6.757a.375.375 0 1 0-.75 0l-.001 6.757a.375.375 0 0 0 .375.375Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n      strokeWidth=\".3\"\n    />\n  </svg>\n";
 
-var Complete = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
-    React__default.createElement("g", { clipPath: "url(#a)" },
-        React__default.createElement("path", { d: "m10.125 16.435-3.53-3.53a.75.75 0 0 1 0-1.06.768.768 0 0 1 1.06 0l2.47 2.47 6.22-6.22a.75.75 0 1 1 1.06 1.06l-7.28 7.28Z", fill: "currentColor" })),
-    React__default.createElement("defs", null,
-        React__default.createElement("clipPath", null,
-            React__default.createElement("rect", { width: "24", height: "24", rx: "12" }))))); };
+var Complete = "\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=\"m10.125 16.435-3.53-3.53a.75.75 0 0 1 0-1.06.768.768 0 0 1 1.06 0l2.47 2.47 6.22-6.22a.75.75 0 1 1 1.06 1.06l-7.28 7.28Z\"\n        fill=\"currentColor\"\n      />\n    </g>\n    <defs>\n      <clipPath>\n        <rect width=\"24\" height=\"24\" rx=\"12\" />\n      </clipPath>\n    </defs>\n  </svg>\n  ";
 
-var Current = function () { return (React__default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    React__default.createElement("circle", { cx: "12", cy: "12", r: "7", fill: "currentColor" }),
-    React__default.createElement("defs", null,
-        React__default.createElement("linearGradient", { id: "paint0_linear_1_1050", x1: "36.6036", y1: "-4.31391e-07", x2: "-12.6036", y2: "24", gradientUnits: "userSpaceOnUse" },
-            React__default.createElement("stop", { stopColor: "#F200F5" }),
-            React__default.createElement("stop", { offset: "1", stopColor: "#1EC8E6" }))))); };
+var Current = "\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"12\" cy=\"12\" r=\"7\" fill=\"currentColor\" />\n    <defs>\n      <linearGradient\n        id=\"paint0_linear_1_1050\"\n        x1=\"36.6036\"\n        y1=\"-4.31391e-07\"\n        x2=\"-12.6036\"\n        y2=\"24\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stopColor=\"#F200F5\" />\n        <stop offset=\"1\" stopColor=\"#1EC8E6\" />\n      </linearGradient>\n    </defs>\n  </svg>\n  ";
 
-// export current step as an icon
 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 = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "invertLabelPosition", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden"]);
@@ -17105,6 +18607,7 @@ var ProgressStepperItem = function (_a) {
         event.preventDefault();
         onClick && onClick();
     };
+    var statusIcon = statusIcons[status];
     return (React__default.createElement("div", __assign({ className: classNames("arc-ProgressStepperItem", "arc-ProgressStepperItem--".concat(status), "arc-ProgressStepperItem--".concat(size), (_b = {
                 "arc-ProgressStepperItem--vertical": direction === "vertical",
                 "arc-ProgressStepperItem--isFluid": isFluid && direction !== "vertical",
@@ -17117,7 +18620,7 @@ var ProgressStepperItem = function (_a) {
             React__default.createElement("div", { className: "arc-ProgressStepperItem-iconWrapper", "data-testid": "arc-ProgressStepperItem-iconWrapper" },
                 React__default.createElement("span", { className: classNames("arc-ProgressStepperItem-statusIcon", {
                         "arc-ProgressStepperItem-statusIcon--small": size === "small",
-                    }) }, status === "todo" ? null : status === "current" ? (React__default.createElement("div", { className: "arc-ProgressStepperItem-statusIconInner" })) : (React__default.createElement(Icon$1, { icon: statusIcons[status] }))))),
+                    }) }, status === "todo" ? null : status === "current" ? (React__default.createElement("div", { className: "arc-ProgressStepperItem-statusIconInner" })) : (React__default.createElement(Icon$1, { icon: statusIcon && svgToMiniDataURI(statusIcon) }))))),
         React__default.createElement("div", { className: "arc-ProgressStepperItem-textSection" },
             titleHref || onClick ? (React__default.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler },
                 title,
@@ -17271,38 +18774,6 @@ var RadioGroupInput = forwardRef(function (_a, ref) {
     return (React__default.createElement(RadioGroupButton, __assign({ withMargin: true, ref: ref, id: id, name: name, helper: helper, isDisabled: isDisabled || groupDisabled, labelSize: labelSize, size: size, radioButtonAlignment: radioButtonAlignment, label: label, defaultChecked: defaultChecked, checked: checked, changeEvent: changeEvent, blurEvent: blurEvent, value: value }, props)));
 });
 
-/**
- * Use `Rule` to display a horizontal or vertical rule.
- */
-var Rule = function (_a, props) {
-    var _b;
-    var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
-    var surface = useContext(Context$3).surface;
-    return (React__default.createElement("hr", __assign({ className: classNames((_b = {
-                "arc-Rule": true
-            },
-            _b["arc-Rule--".concat(orientation)] = true,
-            _b["arc-Rule--onDarkSurface"] = surface === "dark",
-            _b)) }, filterAttrs(props))));
-};
-
-const BtIconArrowAltUp = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M20.35352,13.14648,16,8.793l-4.35352,4.35352a.49995.49995,0,0,0,.707.707L15.5,10.707V22.5a.5.5,0,0,0,1,0V10.707l3.14648,3.14648a.49995.49995,0,0,0,.707-.707Z",
-      fill: "currentColor",
-    }),
-  );
-
 /**
  * Use `ScrollToTop` to allow the user to scroll to the top of the page by clicking a button.
  */
@@ -17379,9 +18850,9 @@ var Select = function (_a) {
         }
     };
     return (React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", isDisabled: isDisabled, disclosureText: disclosureText, disclosureTitle: disclosureTitle, onClickDisclosure: onClickDisclosure },
-        React__default.createElement(Root2$1, { name: name, required: isRequired, disabled: isDisabled, defaultOpen: isDefaultOpen, value: selectValue, open: open, onOpenChange: onOpenChange, onValueChange: function (value) { return onValueChange(value); } },
+        React__default.createElement(Root2$2, { name: name, required: isRequired, disabled: isDisabled, defaultOpen: isDefaultOpen, value: selectValue, open: open, onOpenChange: onOpenChange, onValueChange: function (value) { return onValueChange(value); } },
             React__default.createElement("div", { ref: setThemeElement, className: "arc-Select-wrapper" },
-                React__default.createElement(Trigger$1, __assign({ id: id, name: name, onBlur: onBlur, onFocus: onFocus, "aria-label": ariaLabel, style: { width: width, marginTop: hideLabel ? 0 : undefined }, className: classNames("arc-Select-trigger", (_b = {
+                React__default.createElement(Trigger$2, __assign({ id: id, name: name, onBlur: onBlur, onFocus: onFocus, "aria-label": ariaLabel, style: { width: width, marginTop: hideLabel ? 0 : undefined }, className: classNames("arc-Select-trigger", (_b = {
                             "arc-Select-trigger--constrained": !isFluid,
                             "arc-Select-trigger--onDarkSurface": surface === "dark",
                             "arc-Select-trigger--invalid": errorMessage
@@ -17391,19 +18862,19 @@ var Select = function (_a) {
                     React__default.createElement(Value, { className: "arc-Select-triggerText", placeholder: placeholder, "aria-label": getSelectedValueName(uncontrolledValue) }),
                     React__default.createElement(Icon, { className: "arc-Select-triggerIcon" },
                         React__default.createElement(ThemeIcon, { size: getIconSize(selectSize), icon: "selectTrigger" }))),
-                React__default.createElement(Portal$3, { container: themeElement },
-                    React__default.createElement(Content2$1, { sideOffset: 5, position: "popper", className: classNames("arc-Select-content", {
+                React__default.createElement(Portal$4, { container: themeElement },
+                    React__default.createElement(Content2$3, { sideOffset: 5, position: "popper", className: classNames("arc-Select-content", {
                             "arc-Select-content--onDarkSurface": surface === "dark",
                         }) },
                         React__default.createElement(ScrollUpButton, { className: "arc-Select-scrollButton" },
                             React__default.createElement(ThemeIcon, { size: 16, icon: "selectScrollUp" })),
                         React__default.createElement(Viewport, null, options.map(function (_a, i) {
                             var name = _a.name, value = _a.value;
-                            return (React__default.createElement(Item, { className: "arc-Select-item", key: "select-item-".concat(i), value: value },
+                            return (React__default.createElement(Item$1, { className: "arc-Select-item", key: "select-item-".concat(i), value: value },
                                 React__default.createElement("div", { className: "arc-Select-itemTextWrapper" },
                                     React__default.createElement(ItemText, { asChild: true },
                                         React__default.createElement("span", { className: "arc-Select-itemText" }, name))),
-                                React__default.createElement(ItemIndicator, null,
+                                React__default.createElement(ItemIndicator$1, null,
                                     React__default.createElement(ThemeIcon, { size: 20, icon: "selectIndicator" }))));
                         })),
                         React__default.createElement(ScrollDownButton, { className: "arc-Select-scrollButton" },
@@ -17438,13 +18909,95 @@ var SiteFooterItemGroup = function (_a) {
         React__default.createElement("summary", { className: "arc-SiteFooter-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
             React__default.createElement("span", { className: "arc-SiteFooter-icon" },
                 React__default.createElement(ThemeIcon, { icon: "siteFooterExpand" })),
-            React__default.createElement("h2", { className: "arc-SiteFooter-title" }, title)),
-        React__default.createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
+            React__default.createElement("h2", { className: "arc-SiteFooter-title" }, title)),
+        React__default.createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
+};
+var SiteFooterItem = function (_a) {
+    var children = _a.children, href = _a.href, onClick = _a.onClick, props = __rest(_a, ["children", "href", "onClick"]);
+    return (React__default.createElement("li", __assign({ className: "arc-SiteFooter-item" }, filterAttrs(props)),
+        React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteFooter-link", href: href }, children)));
+};
+
+/**
+ * Use `SiteFooterV2` to display information at the bottom of a page.
+ */
+var SiteFooterV2 = function (_a) {
+    var children = _a.children, slogan = _a.slogan, _b = _a.hideTopBorder, hideTopBorder = _b === void 0 ? false : _b, props = __rest(_a, ["children", "slogan", "hideTopBorder"]);
+    var surface = useContext(Context$3).surface;
+    return (React__default.createElement("footer", __assign({ className: classNames("arc-SiteFooterV2", {
+            "arc-SiteFooterV2--onDarkSurface": surface === "dark",
+        }) }, filterAttrs(props)),
+        !hideTopBorder && React__default.createElement(Rule, null),
+        React__default.createElement(VerticalSpace, { size: "24" }),
+        React__default.createElement(Section, null,
+            slogan && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("h2", { className: "arc-SiteFooterV2-slogan" }, slogan),
+                React__default.createElement(VerticalSpace, { size: "32" }))),
+            React__default.createElement("div", { className: "arc-SiteFooterV2-main-utility" }, children)),
+        React__default.createElement(VerticalSpace, { size: "24" }),
+        " "));
+};
+
+/**
+ * Do not edit directly
+ * Generated on Mon, 19 May 2025 14:54:16 GMT
+ */
+var SemSizeBreakpointsM = "768px"; // Medium (MD) - 768px to 991px: This is commonly used for larger tablets and smaller desktop screens.
+
+var SiteFooterV2Main = function (_a) {
+    var children = _a.children, _b = _a.columns, columns = _b === void 0 ? 4 : _b, props = __rest(_a, ["children", "columns"]);
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
+    return (React__default.createElement("nav", __assign({ className: "arc-SiteFooterV2-main ".concat(isMinWidthArcBreakpointL &&
+            columns === 3 &&
+            "arc-SiteFooterV2-main-3Columns"), "aria-label": "Footer navigation links" }, filterAttrs(props)), children));
+};
+var SiteFooterV2ItemGroup = function (_a) {
+    var children = _a.children, title = _a.title, _b = _a.hideDisclosure, hideDisclosure = _b === void 0 ? false : _b, props = __rest(_a, ["children", "title", "hideDisclosure"]);
+    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsM, ")"));
+    return (React__default.createElement("details", __assign({ open: isMinWidthArcBreakpointM, className: classNames("arc-SiteFooterV2-disclosure", {
+            "arc-SiteFooterV2-disclosure--hidden": !isMinWidthArcBreakpointM && hideDisclosure,
+        }), "aria-label": title }, filterAttrs(props)),
+        React__default.createElement("summary", { className: "arc-SiteFooterV2-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
+            React__default.createElement("span", { className: "arc-SiteFooterV2-icon" },
+                React__default.createElement(ThemeIcon, { icon: "siteFooterExpand" })),
+            React__default.createElement("h2", { className: "arc-SiteFooterV2-itemGroupTitle" }, title)),
+        React__default.createElement("ul", { className: "arc-SiteFooterV2-itemGroup" }, children)));
 };
-var SiteFooterItem = function (_a) {
+var SiteFooterV2Item = function (_a) {
     var children = _a.children, href = _a.href, onClick = _a.onClick, props = __rest(_a, ["children", "href", "onClick"]);
-    return (React__default.createElement("li", __assign({ className: "arc-SiteFooter-item" }, filterAttrs(props)),
-        React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteFooter-link", href: href }, children)));
+    return (React__default.createElement("li", __assign({ className: "arc-SiteFooterV2-item" }, filterAttrs(props)),
+        React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteFooterV2-link", href: href }, children)));
+};
+
+/**
+ * Use `SiteFooterV2.Utility` to display information at the bottom of a page.
+ */
+var SiteFooterV2Utility = function (_a) {
+    var copyrightYear = _a.copyrightYear, children = _a.children, socialLinks = _a.socialLinks, _b = _a.brand, brand = _b === void 0 ? {
+        logoLabel: "BT",
+    } : _b, contentSlot = _a.contentSlot, props = __rest(_a, ["copyrightYear", "children", "socialLinks", "brand", "contentSlot"]);
+    return (React__default.createElement("div", __assign({ className: "arc-SiteFooterV2-utility", "aria-label": "Footer utility bar" }, filterAttrs(props)),
+        React__default.createElement("div", { className: "arc-SiteFooterV2-brand" },
+            !contentSlot && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("a", { className: "arc-SiteFooterV2-brandLogo", onClick: handleLinkClick({ handler: brand.onClick }) },
+                    React__default.createElement(BrandLogo, { label: brand.logoLabel, "aria-label": brand.logoLabel, color: "brand", subBrand: brand.subBrand })),
+                React__default.createElement("div", { className: "arc-SiteFooterV2-copyright" },
+                    React__default.createElement("span", { className: "arc-SiteFooterV2-copyrightSymbol" }, "\u00A9"),
+                    " ",
+                    brand.logoLabel,
+                    " ",
+                    isDate(copyrightYear) ? (React__default.createElement("time", { dateTime: format(copyrightYear, "yyyy") }, format(copyrightYear, "yyyy"))) : (React__default.createElement("span", null, copyrightYear)),
+                    !copyrightYear && "".concat(new Date().getFullYear())))),
+            contentSlot && (React__default.createElement("div", { className: "arc-SiteFooterV2-contentSlot" }, contentSlot))),
+        children && (React__default.createElement("nav", { "aria-label": "Footer utility links" },
+            React__default.createElement("ul", { className: "arc-SiteFooterV2-utilityItems" }, children))),
+        socialLinks && (React__default.createElement("ul", { className: "arc-SiteFooterV2-utilitySocials", "aria-label": "Footer social media links" }, socialLinks.map(function (_a, index) {
+            var href = _a.href, icon = _a.icon, ariaLabel = _a.ariaLabel;
+            return (React__default.createElement("li", { key: index, tabIndex: 0, className: "arc-SiteFooterV2-utilitySocialsLink", "aria-label": ariaLabel },
+                React__default.createElement("a", { className: "arc-SiteFooterV2-link", href: href, tabIndex: -1 },
+                    React__default.createElement(Icon$1, { icon: icon, size: 16 }),
+                    " ")));
+        })))));
 };
 
 var SiteHeaderV2MenuButton = function (_a) {
@@ -17538,11 +19091,11 @@ var SiteHeaderV2 = function (_a) {
                                 React__default.createElement("button", { className: "arc-SiteHeaderV2-mobileLogin", onClick: loginOnClick },
                                     loginTitle,
                                     React__default.createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
-                                        React__default.createElement(BtIconChevronRight2Px, null))))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2-mobileButtonContainer" },
+                                        React__default.createElement(Icon$1, { icon: BtIconChevronRight2Px }))))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2-mobileButtonContainer" },
                                 React__default.createElement("a", { className: "arc-SiteHeaderV2-mobileLogin", href: loginHref },
                                     loginTitle,
                                     React__default.createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
-                                        React__default.createElement(BtIconChevronRight2Px, null)))))))))),
+                                        React__default.createElement(Icon$1, { icon: BtIconChevronRight2Px })))))))))),
                     (basket || hasLogin || search) && (React__default.createElement("div", { className: "arc-SiteHeaderV2-secondary" },
                         search ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-search" }, search)) : null,
                         basket ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-basket" }, basket)) : null,
@@ -17568,7 +19121,7 @@ var SiteHeaderV2Item = function (_a) {
         React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderV2Item-link", href: href, role: "menuitem" },
             children,
             React__default.createElement("span", { className: "arc-SiteHeaderV2Item-linkIcon" },
-                React__default.createElement(BtIconChevronRightMid, null)))));
+                React__default.createElement(Icon$1, { icon: BtIconChevronRightMid })))));
 };
 
 var SiteHeaderV2ItemGroup = function (_a) {
@@ -17583,7 +19136,7 @@ var SiteHeaderV2ItemGroup = function (_a) {
                                 handler: onClick,
                             }), className: "arc-SiteHeaderV2ItemGroup-title", href: href }, children)); }, fallback: function (children) { return (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, children)); } }, title),
                     React__default.createElement("span", { className: "arc-SiteHeaderV2ItemGroup-titleIcon" },
-                        React__default.createElement(BtIconChevronRightMid, null)))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
+                        React__default.createElement(Icon$1, { icon: BtIconChevronRightMid })))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
                 React__default.createElement("span", { className: "arc-SiteHeaderV2ItemGroup-subtitle" }, subtitle))) : null,
             React__default.createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items", role: "menubar" },
                 children,
@@ -17600,7 +19153,7 @@ var SiteHeaderV2BackButton = function (_a) {
             setOpenPanelOnFirstClick(false);
         } },
         React__default.createElement("span", { className: "arc-SiteHeaderV2BackButton-icon" },
-            React__default.createElement(BtIconChevronLeft2Px, null)),
+            React__default.createElement(Icon$1, { icon: BtIconChevronLeft2Px })),
         React__default.createElement("span", { className: "arc-SiteHeaderV2BackButton-text" }, "Back")));
 };
 
@@ -17788,7 +19341,7 @@ var SiteHeaderV2NavItem = function (_a) {
                         _d["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
                         _d)) }, title),
                 React__default.createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
-                    React__default.createElement(BtIconChevronRight2Px, null)),
+                    React__default.createElement(Icon$1, { icon: BtIconChevronRight2Px })),
                 subTitle && !isPrimary && isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: classNames((_e = {},
                         _e["arc-SiteHeaderV2NavItemWithSubNav-text"] = !isPrimary,
                         _e["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
@@ -17932,7 +19485,7 @@ var SiteHeaderV2NavItemWithSubNav = function (_a) {
                             _d["arc-SiteHeaderV2NavItem-link--itemHasChildren-primary"] = isPrimary,
                             _d)) }, title),
                     React__default.createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
-                        React__default.createElement(BtIconChevronRight2Px, null)),
+                        React__default.createElement(Icon$1, { icon: BtIconChevronRight2Px })),
                     subTitle && !isPrimary && isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: classNames((_e = {},
                             _e["arc-SiteHeaderV2NavItemWithSubNav-text"] = !isPrimary,
                             _e["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
@@ -17989,9 +19542,9 @@ var SiteHeaderV2SubNavItem = function (_a) {
     var linkTitle = (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("span", { className: "arc-SiteHeaderV2SubNavItem-linkTitle" }, title),
         children && panelOpen && (React__default.createElement("span", { className: "arc-SiteHeaderV2SubNavItem-linkIcon" },
-            React__default.createElement(BtIconChevronRight2Px, null))),
+            React__default.createElement(Icon$1, { icon: BtIconChevronRight2Px }))),
         children && !isMinWidthArcBreakpointL && (React__default.createElement("span", { className: "arc-SiteHeaderV2SubNavItem-linkIcon" },
-            React__default.createElement(BtIconChevronRight2Px, null))),
+            React__default.createElement(Icon$1, { icon: BtIconChevronRight2Px }))),
         subTitle ? (React__default.createElement("span", { className: "arc-SiteHeaderV2SubNavItem-linkSubTitle" }, subTitle)) : null));
     return (React__default.createElement("li", __assign({ className: classNames((_b = {},
             _b["arc-SiteHeaderV2SubNavItem"] = true,
@@ -18224,7 +19777,7 @@ const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07b
 
 /** Use `Switch` to allow users to immediately toggle between two states. */
 var Switch = function (_a) {
-    var defaultChecked = _a.defaultChecked; _a.onCheckedChange; var label = _a.label, _b = _a.labelPosition, labelPosition = _b === void 0 ? "top" : _b, name = _a.name, onBlur = _a.onBlur, value = _a.value, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, errorMessage = _a.errorMessage, id = _a.id, _d = _a.labelSize, labelSize = _d === void 0 ? "s" : _d, onStatusText = _a.onStatusText, offStatusText = _a.offStatusText, _e = _a.hideLabel, hideLabel = _e === void 0 ? false : _e, ariaLabel = _a.ariaLabel, props = __rest(_a, ["defaultChecked", "onCheckedChange", "label", "labelPosition", "name", "onBlur", "value", "isDisabled", "errorMessage", "id", "labelSize", "onStatusText", "offStatusText", "hideLabel", "ariaLabel"]);
+    var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, _b = _a.labelPosition, labelPosition = _b === void 0 ? "top" : _b, name = _a.name, onBlur = _a.onBlur, value = _a.value, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, errorMessage = _a.errorMessage, id = _a.id, _d = _a.labelSize, labelSize = _d === void 0 ? "s" : _d, onStatusText = _a.onStatusText, offStatusText = _a.offStatusText, _e = _a.hideLabel, hideLabel = _e === void 0 ? false : _e, ariaLabel = _a.ariaLabel, props = __rest(_a, ["defaultChecked", "onCheckedChange", "label", "labelPosition", "name", "onBlur", "value", "isDisabled", "errorMessage", "id", "labelSize", "onStatusText", "offStatusText", "hideLabel", "ariaLabel"]);
     var _f = useState(defaultChecked), switchState = _f[0], setSwitchState = _f[1];
     var surface = useContext(Context$3).surface;
     if (!onStatusText) {
@@ -18233,8 +19786,9 @@ var Switch = function (_a) {
     if (!offStatusText) {
         offStatusText = onStatusText;
     }
-    var onCheckedHandler = function () {
+    var onCheckedHandler = function (checked) {
         setSwitchState(function (previous) { return !previous; });
+        onCheckedChange && onCheckedChange(checked);
     };
     return (React__default.createElement(FormControl, { errorMessage: errorMessage, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, labelPosition: labelPosition, requirementStatus: "not-applicable" },
         !hideLabel && React__default.createElement(VerticalSpace, { size: "8" }),
@@ -18256,6 +19810,39 @@ var Switch = function (_a) {
                     React__default.createElement(Text, { size: labelSize, "aria-hidden": true }, switchState ? onStatusText : offStatusText))))));
 };
 
+var TabbedBanner = function (_a) {
+    var _b;
+    var tabs = _a.tabs, defaultValue = _a.defaultValue, minHeight = _a.minHeight, minHeightM = _a.minHeightM;
+    var initialTab = defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_b = tabs[0]) === null || _b === void 0 ? void 0 : _b.value;
+    var _c = useState(initialTab), selectedTab = _c[0], setSelectedTab = _c[1];
+    var _d = useState(window.innerWidth < parseInt(ArcSizeBreakpointsM)), isBelowArcSizeBreakpointsM = _d[0], SetIsBelowArcSizeBreakpointsM = _d[1];
+    var handleResize = debounce(function () {
+        SetIsBelowArcSizeBreakpointsM(window.innerWidth < parseInt(ArcSizeBreakpointsM));
+    }, 100);
+    useEffect(function () {
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return function () { return window.removeEventListener("resize", handleResize); };
+    }, [isBelowArcSizeBreakpointsM]);
+    return (React__default.createElement("div", { className: "arc-TabbedBanner" }, !isBelowArcSizeBreakpointsM ? (React__default.createElement("div", null,
+        React__default.createElement(ContentSwitcher, { value: selectedTab, onValueChange: function (value) { return setSelectedTab(value); } },
+            React__default.createElement(ContentSwitcherList, { isInset: true }, tabs.map(function (_a, index) {
+                var label = _a.label, value = _a.value;
+                return (React__default.createElement(ContentSwitcherTab, { label: label, value: value, key: "".concat(index, "-").concat(value) }));
+            })),
+            tabs.map(function (_a, index) {
+                var value = _a.value, content = _a.content;
+                return (React__default.createElement(ContentSwitcherContent, { value: value, key: index },
+                    React__default.createElement(TemplateBanner, __assign({ alignment: "start", headingSize: "m", additionalTopMargin: true, minHeight: minHeight }, content))));
+            })))) : (React__default.createElement("div", null,
+        React__default.createElement(ContentSwitcherDropdown, { value: selectedTab, tabs: tabs, isInset: true, isFluid: true, onValueChange: function (value) { return setSelectedTab(value); } }, tabs.map(function (_a, index) {
+            var value = _a.value, content = _a.content;
+            return (React__default.createElement(ContentSwitcherDropdownContent, { value: value, key: "".concat(index, "-").concat(value) },
+                React__default.createElement(TemplateBanner, __assign({ alignment: "start", headingSize: "m", additionalTopMargin: !(window.innerHeight < parseInt(ArcSizeBreakpointsM) &&
+                        content.type === "contained"), minHeight: minHeightM }, content))));
+        }))))));
+};
+
 /** Use `Tabs` to allow users to navigate between different sections of relevant content. */
 var Tabs = function (_a) {
     var children = _a.children, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, activationMode = _a.activationMode, props = __rest(_a, ["children", "defaultValue", "onValueChange", "activationMode"]);
@@ -18329,77 +19916,6 @@ var TabsList = function (_a) {
             }), ref: tabsRef, "aria-label": ariaLabel }, filterAttrs(props)), children)));
 };
 
-var TabbedBanner = function (_a) {
-    var _b;
-    var tabs = _a.tabs, defaultValue = _a.defaultValue, minHeight = _a.minHeight, minHeightM = _a.minHeightM;
-    var initialTab = defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_b = tabs[0]) === null || _b === void 0 ? void 0 : _b.value;
-    var _c = useState(initialTab), selectedTab = _c[0], setSelectedTab = _c[1];
-    var _d = useState(window.innerWidth < parseInt(ArcSizeBreakpointsM)), isBelowArcSizeBreakpointsM = _d[0], SetIsBelowArcSizeBreakpointsM = _d[1];
-    var handleResize = debounce(function () {
-        SetIsBelowArcSizeBreakpointsM(window.innerWidth < parseInt(ArcSizeBreakpointsM));
-    }, 100);
-    useEffect(function () {
-        handleResize();
-        window.addEventListener("resize", handleResize);
-        return function () { return window.removeEventListener("resize", handleResize); };
-    }, [isBelowArcSizeBreakpointsM]);
-    return (React__default.createElement("div", { className: "arc-TabbedBanner" }, !isBelowArcSizeBreakpointsM ? (React__default.createElement("div", null,
-        React__default.createElement(ContentSwitcher, { value: selectedTab, onValueChange: function (value) { return setSelectedTab(value); } },
-            React__default.createElement(ContentSwitcherList, { isInset: true }, tabs.map(function (_a, index) {
-                var label = _a.label, value = _a.value;
-                return (React__default.createElement(ContentSwitcherTab, { label: label, value: value, key: "".concat(index, "-").concat(value) }));
-            })),
-            tabs.map(function (_a, index) {
-                var value = _a.value, content = _a.content;
-                return (React__default.createElement(ContentSwitcherContent, { value: value, key: index },
-                    React__default.createElement(TemplateBanner, __assign({ alignment: "start", headingSize: "m", additionalTopMargin: true, minHeight: minHeight }, content))));
-            })))) : (React__default.createElement("div", null,
-        React__default.createElement(ContentSwitcherDropdown, { value: selectedTab, tabs: tabs, isInset: true, isFluid: true, onValueChange: function (value) { return setSelectedTab(value); } }, tabs.map(function (_a, index) {
-            var value = _a.value, content = _a.content;
-            return (React__default.createElement(ContentSwitcherDropdownContent, { value: value, key: "".concat(index, "-").concat(value) },
-                React__default.createElement(TemplateBanner, __assign({ alignment: "start", headingSize: "m", additionalTopMargin: !(window.innerHeight < parseInt(ArcSizeBreakpointsM) &&
-                        content.type === "contained"), minHeight: minHeightM }, content))));
-        }))))));
-};
-
-const BtIconCross = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M20.85352,11.14648a.49983.49983,0,0,0-.707,0L16,15.293l-4.14648-4.14649a.5.5,0,0,0-.707.707L15.293,16l-4.14649,4.14648a.5.5,0,1,0,.707.707L16,16.707l4.14648,4.14649a.5.5,0,0,0,.707-.707L16.707,16l4.14649-4.14648A.49983.49983,0,0,0,20.85352,11.14648Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconCrossFill = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm4.85352,18.14648a.5.5,0,1,1-.707.707L16,16.707l-4.14648,4.14649a.5.5,0,0,1-.707-.707L15.293,16l-4.14649-4.14648a.5.5,0,0,1,.707-.707L16,15.293l4.14648-4.14649a.5.5,0,0,1,.707.707L16.707,16Z",
-      fill: "currentColor",
-    }),
-  );
-
 /**
  * Use `Tag` to promote features and manage filtering.
  */
@@ -18456,6 +19972,13 @@ var TextArea = forwardRef(function (_a, ref) {
         onChange && onChange(e);
         setCharacterCount(e.target.value.length);
     };
+    // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
+    var ariaDescribedby = useAriaDescribedby({
+        errorMessage: errorMessage,
+        id: id,
+        helper: helper,
+        disclosureText: disclosureText,
+    }).ariaDescribedby;
     return (React__default.createElement(FormControl, __assign({ errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure, supplementaryInfo: maxLength &&
             showCharacterCount && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Text, { tone: isDisabled ? "muted" : "default" },
@@ -18465,7 +19988,7 @@ var TextArea = forwardRef(function (_a, ref) {
                     maxLength,
                     " characters",
                     characterCount === maxLength && (React__default.createElement(VisuallyHidden$2, null, "Maximum characters reached")))))) }, filterAttrs(props)),
-        React__default.createElement("textarea", __assign({ id: id, className: classNames("arc-TextArea", {
+        React__default.createElement("textarea", { id: id, className: classNames("arc-TextArea", {
                 "arc-TextArea--noResize": resize !== "manual",
                 "arc-TextArea--onDarkSurface": surface === "dark",
                 "arc-TextArea--invalid": errorMessage,
@@ -18474,14 +19997,14 @@ var TextArea = forwardRef(function (_a, ref) {
                 maxHeight: maxHeight,
                 minHeight: minHeight,
                 marginTop: hideLabel ? 0 : undefined,
-            }, "aria-describedby": "".concat(id, "-helper"), autoComplete: autoComplete }, (helper && { "aria-describedby": "".concat(id, "-helper") })))));
+            }, "aria-describedby": ariaDescribedby, autoComplete: autoComplete })));
 });
 
 // package.json
 var package_default = {
   name: "@arc-ui/helpers",
   private: true,
-  version: "12.0.0-beta.16",
+  version: "12.0.0-beta.18",
   type: "module",
   homepage: "https://ui.digital-ent-int.bt.com",
   author: "BT Enterprise Digital UI Team <ui-digital-ent-int@bt.com>",
@@ -18544,6 +20067,19 @@ var Theme = function (_a) {
 };
 var themes = ["bt-enterprise", "bt-business", "ee"];
 
+var ThumbnailSignpost = function (_a) {
+    var text = _a.text, title = _a.title, img = _a.img, button = _a.button, props = __rest(_a, ["text", "title", "img", "button"]);
+    var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
+    return (React__default.createElement("div", __assign({ className: "arc-ThumbnailSignpost" }, filterAttrs(props)),
+        (img === null || img === void 0 ? void 0 : img.src) && (React__default.createElement("div", { className: "arc-ThumbnailSignpost-image" },
+            React__default.createElement(Image, __assign({}, img)))),
+        React__default.createElement("div", { className: "arc-ThumbnailSignpost-content" },
+            React__default.createElement(Heading, { size: isMinWidthArcBreakpointS ? "s" : "xs" }, title),
+            React__default.createElement(VerticalSpace, { size: "8" }),
+            text,
+            React__default.createElement(ButtonV2, __assign({ buttonStyle: "compact", icon: BtIconArrowRight }, button)))));
+};
+
 /**
  * Listens for when the escape key is down
  */ function $addc16e1bbe58fd0$export$3a72a57244d6e765(onEscapeKeyDownProp, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
@@ -24050,7 +25586,7 @@ var VideoPlayer = function (_a) {
         onError: onError,
         onEnded: onEnded,
         playIcon: (React__default.createElement("div", { className: "arc-VideoPlayer-icon" },
-            React__default.createElement(Icon$1, { isPresentationIcon: true, icon: BtIconPlayFill }))),
+            React__default.createElement(Icon$1, { icon: BtIconPlayFill }))),
         playing: Boolean(light),
         controls: true,
         className: "arc-VideoPlayer",
@@ -24104,119 +25640,6 @@ var Visible = function (_a) {
         }) }, filterAttrs(props)), children));
 };
 
-var ThumbnailSignpost = function (_a) {
-    var text = _a.text, title = _a.title, img = _a.img, button = _a.button, props = __rest(_a, ["text", "title", "img", "button"]);
-    var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
-    return (React__default.createElement("div", __assign({ className: "arc-ThumbnailSignpost" }, filterAttrs(props)),
-        (img === null || img === void 0 ? void 0 : img.src) && (React__default.createElement("div", { className: "arc-ThumbnailSignpost-image" },
-            React__default.createElement(Image, __assign({}, img)))),
-        React__default.createElement("div", { className: "arc-ThumbnailSignpost-content" },
-            React__default.createElement(Heading, { size: isMinWidthArcBreakpointS ? "s" : "xs" }, title),
-            React__default.createElement(VerticalSpace, { size: "8" }),
-            text,
-            React__default.createElement(ButtonV2, __assign({ buttonStyle: "compact", icon: BtIconArrowRight }, button)))));
-};
-
-var HorizontalCard = function (_a) {
-    var text = _a.text, heading = _a.heading, headingLevel = _a.headingLevel, img = _a.img, metaText = _a.metaText, url = _a.url, onClick = _a.onClick, props = __rest(_a, ["text", "heading", "headingLevel", "img", "metaText", "url", "onClick"]);
-    var _b = useState(false), showHoverState = _b[0], setShowHoverState = _b[1];
-    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
-    return (React__default.createElement("div", __assign({ className: classNames("arc-HorizontalCard", {
-            "arc-HorizontalCard--outlined": (url || onclick) && showHoverState,
-        }) }, filterAttrs(props)),
-        (img === null || img === void 0 ? void 0 : img.src) && (React__default.createElement("div", { className: "arc-HorizontalCard-image" },
-            React__default.createElement(Image, __assign({ fit: "cover", anchor: "C" }, img)))),
-        React__default.createElement("div", { className: "arc-HorizontalCard-content" },
-            React__default.createElement(VerticalSpace, { size: "12" }),
-            React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
-            React__default.createElement(VerticalSpace, { size: "12" }),
-            React__default.createElement(Text, null, text),
-            React__default.createElement(VerticalSpace, { size: "24" }),
-            React__default.createElement(CardFooter, { metaText: metaText, buttonIcon: "arrow", isHovered: showHoverState, buttonSize: "s" }))));
-};
-
-/**
- * Use `SiteFooterV2` to display information at the bottom of a page.
- */
-var SiteFooterV2 = function (_a) {
-    var children = _a.children, slogan = _a.slogan, props = __rest(_a, ["children", "slogan"]);
-    var surface = useContext(Context$3).surface;
-    return (React__default.createElement("footer", __assign({ className: classNames("arc-SiteFooterV2", {
-            "arc-SiteFooterV2--onDarkSurface": surface === "dark",
-        }) }, filterAttrs(props)),
-        React__default.createElement(Rule, null),
-        React__default.createElement(VerticalSpace, { size: "24" }),
-        React__default.createElement(Section, null,
-            slogan && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("h2", { className: "arc-SiteFooterV2-slogan" }, slogan),
-                React__default.createElement(VerticalSpace, { size: "32" }))),
-            React__default.createElement("div", { className: "arc-SiteFooterV2-main-utility" }, children)),
-        React__default.createElement(VerticalSpace, { size: "24" }),
-        " "));
-};
-
-/**
- * Do not edit directly
- * Generated on Thu, 06 Mar 2025 14:17:53 GMT
- */
-var SemSizeBreakpointsM = "768px"; // Medium (MD) - 768px to 991px: This is commonly used for larger tablets and smaller desktop screens.
-
-var SiteFooterV2Main = function (_a) {
-    var children = _a.children, _b = _a.columns, columns = _b === void 0 ? 4 : _b, props = __rest(_a, ["children", "columns"]);
-    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
-    return (React__default.createElement("nav", __assign({ className: "arc-SiteFooterV2-main ".concat(isMinWidthArcBreakpointL &&
-            columns === 3 &&
-            "arc-SiteFooterV2-main-3Columns"), "aria-label": "Footer navigation links" }, filterAttrs(props)), children));
-};
-var SiteFooterV2ItemGroup = function (_a) {
-    var children = _a.children, title = _a.title, _b = _a.hideDisclosure, hideDisclosure = _b === void 0 ? false : _b, props = __rest(_a, ["children", "title", "hideDisclosure"]);
-    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsM, ")"));
-    return (React__default.createElement("details", __assign({ open: isMinWidthArcBreakpointM, className: classNames("arc-SiteFooterV2-disclosure", {
-            "arc-SiteFooterV2-disclosure--hidden": !isMinWidthArcBreakpointM && hideDisclosure,
-        }), "aria-label": title }, filterAttrs(props)),
-        React__default.createElement("summary", { className: "arc-SiteFooterV2-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
-            React__default.createElement("span", { className: "arc-SiteFooterV2-icon" },
-                React__default.createElement(ThemeIcon, { icon: "siteFooterExpand" })),
-            React__default.createElement("h2", { className: "arc-SiteFooterV2-itemGroupTitle" }, title)),
-        React__default.createElement("ul", { className: "arc-SiteFooterV2-itemGroup" }, children)));
-};
-var SiteFooterV2Item = function (_a) {
-    var children = _a.children, href = _a.href, onClick = _a.onClick, props = __rest(_a, ["children", "href", "onClick"]);
-    return (React__default.createElement("li", __assign({ className: "arc-SiteFooterV2-item" }, filterAttrs(props)),
-        React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteFooterV2-link", href: href }, children)));
-};
-
-/**
- * Use `SiteFooterV2.Utility` to display information at the bottom of a page.
- */
-var SiteFooterV2Utility = function (_a) {
-    var copyrightYear = _a.copyrightYear, children = _a.children, socialLinks = _a.socialLinks, _b = _a.brand, brand = _b === void 0 ? {
-        logoLabel: "BT",
-    } : _b, contentSlot = _a.contentSlot, props = __rest(_a, ["copyrightYear", "children", "socialLinks", "brand", "contentSlot"]);
-    return (React__default.createElement("div", __assign({ className: "arc-SiteFooterV2-utility", "aria-label": "Footer utility bar" }, filterAttrs(props)),
-        React__default.createElement("div", { className: "arc-SiteFooterV2-brand" },
-            !contentSlot && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("a", { className: "arc-SiteFooterV2-brandLogo", onClick: handleLinkClick({ handler: brand.onClick }) },
-                    React__default.createElement(BrandLogo, { label: brand.logoLabel, "aria-label": brand.logoLabel, color: "brand", subBrand: brand.subBrand })),
-                React__default.createElement("div", { className: "arc-SiteFooterV2-copyright" },
-                    React__default.createElement("span", { className: "arc-SiteFooterV2-copyrightSymbol" }, "\u00A9"),
-                    " ",
-                    brand.logoLabel,
-                    " ",
-                    isDate(copyrightYear) ? (React__default.createElement("time", { dateTime: format(copyrightYear, "yyyy") }, format(copyrightYear, "yyyy"))) : (React__default.createElement("span", null, copyrightYear)),
-                    !copyrightYear && "".concat(new Date().getFullYear())))),
-            contentSlot && (React__default.createElement("div", { className: "arc-SiteFooterV2-contentSlot" }, contentSlot))),
-        children && (React__default.createElement("nav", { "aria-label": "Footer utility links" },
-            React__default.createElement("ul", { className: "arc-SiteFooterV2-utilityItems" }, children))),
-        socialLinks && (React__default.createElement("ul", { className: "arc-SiteFooterV2-utilitySocials", "aria-label": "Footer social media links" }, socialLinks.map(function (_a, index) {
-            var href = _a.href, icon = _a.icon, ariaLabel = _a.ariaLabel;
-            return (React__default.createElement("li", { key: index, tabIndex: 0, className: "arc-SiteFooterV2-utilitySocialsLink", "aria-label": ariaLabel },
-                React__default.createElement("a", { className: "arc-SiteFooterV2-link", href: href, tabIndex: -1 },
-                    React__default.createElement(Icon$1, { icon: icon, size: 16 }),
-                    " ")));
-        })))));
-};
-
 var Preview_1;
 var hasRequiredPreview;
 
@@ -24371,5 +25794,5 @@ var Preview$1 = /*#__PURE__*/_mergeNamespaces({
     default: Preview
 }, [PreviewExports]);
 
-export { Alert, Align, AppButton, Avatar, AvatarGroup, Badge, Banner, Box, BrandLogo, colors as BrandLogoColors, Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, Button, ButtonGroup, ButtonV2, Calendar, Carousel, Checkbox, Columns, ColumnsCol, ComboBox, ContentSwitcher, ContentSwitcherContent, ContentSwitcherDropdown, ContentSwitcherDropdownContent, ContentSwitcherList, ContentSwitcherTab, DATE_FORMAT, DatePicker, Disclosure, DisclosureMini, Download, Drawer, Elevation, Filter, FilterControl, FilterControls, FilterItem, FilterItems, FormControl, Context$2 as FormControlContext, Grid, GridCol, GridRow, Group, GroupItem, Heading, HeroBanner, HeroButton, Hidden, HorizontalCard, Icon$1 as Icon, colors$1 as IconColors, Image, fitOptions as ImageFitOptions, overlayOptions as ImageOverlayOptions, ImageSource, ImpactCard, InformationCard, Link, Markup, MediaCard, Modal, Pagination, PaginationSimple, Popover, Poster, PosterImage, PosterVideo, ProgressBar, ProgressStepper, ProgressStepperItem, RadioCardGroup, RadioCardGroupInput, RadioGroup, RadioGroupButton, RadioGroupInput, Rule, ScrollToTop, Section, Select, SiteFooter, SiteFooterItem, SiteFooterItemGroup, SiteFooterV2, SiteFooterV2Item, SiteFooterV2ItemGroup, SiteFooterV2Main, SiteFooterV2Utility, SiteHeaderV2, SiteHeaderV2Column, SiteHeaderV2Item, SiteHeaderV2ItemGroup, SiteHeaderV2NavItem, SiteHeaderV2NavItemWithSubNav, SiteHeaderV2NodeItem, SiteHeaderV2SubNavItem, SiteHeaderV2VerticalDivider, Skeleton, SkipLink, SkipLinkItem, Spinner, Surface, Context$3 as SurfaceContext, Switch, TabbedBanner, Tabs, TabsContent, TabsItem, TabsList, Tag, TemplateBanner, Text, TextArea, TextInput, Theme, ThemeIcon, ThumbnailSignpost, Toast, ToastNotification, Tooltip, Truncate, TypographyCard, UniversalHeader, UniversalHeaderItem, VerticalSpace, VideoPlayer, Visible, VisuallyHidden$2 as VisuallyHidden, backgrounds, backgroundsBT, isDateValid, isRangeValid, loadingOptions, parseDateString, parseRangeString, themes, useMediaQuery };
+export { Alert, Align, AppButton, Avatar, AvatarGroup, Badge, Banner, Box, BrandLogo, colors as BrandLogoColors, Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, Button, ButtonGroup, ButtonV2, Calendar, Carousel, Checkbox, Columns, ColumnsCol, ComboBox, ContentSwitcher, ContentSwitcherContent, ContentSwitcherDropdown, ContentSwitcherDropdownContent, ContentSwitcherList, ContentSwitcherTab, DATE_FORMAT, DatePicker, Disclosure, DisclosureMini, Download, Drawer, Elevation, Filter, FilterControl, FilterControls, FilterItem, FilterItems, FormControl, Context$2 as FormControlContext, GhostedHeroBanner, GradientBackground, Grid, GridCol, GridRow, Group$1 as Group, GroupItem, Heading, HeroBanner, HeroButton, Hidden, HorizontalCard, Icon$1 as Icon, colors$1 as IconColors, Image, fitOptions as ImageFitOptions, overlayOptions as ImageOverlayOptions, ImageSource, ImpactCard, InformationCard, Link, Markup, MediaCard, Menu, MenuCheckboxItem, MenuContent, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemContentTemplate, MenuLabel, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuScrollable, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, Pagination, PaginationSimple, Popover, Poster, PosterImage, PosterVideo, ProgressBar, ProgressStepper, ProgressStepperItem, RadioCardGroup, RadioCardGroupInput, RadioGroup, RadioGroupButton, RadioGroupInput, Rule, ScrollToTop, Section, Select, SiteFooter, SiteFooterItem, SiteFooterItemGroup, SiteFooterV2, SiteFooterV2Item, SiteFooterV2ItemGroup, SiteFooterV2Main, SiteFooterV2Utility, SiteHeaderV2, SiteHeaderV2Column, SiteHeaderV2Item, SiteHeaderV2ItemGroup, SiteHeaderV2NavItem, SiteHeaderV2NavItemWithSubNav, SiteHeaderV2NodeItem, SiteHeaderV2SubNavItem, SiteHeaderV2VerticalDivider, Skeleton, SkipLink, SkipLinkItem, Spinner, Surface, Context$3 as SurfaceContext, Switch, TabbedBanner, Tabs, TabsContent, TabsItem, TabsList, Tag, TemplateBanner, Text, TextArea, TextInput, Theme, ThemeIcon, ThumbnailSignpost, Toast, ToastNotification, Tooltip, Truncate, TypographyCard, UniversalHeader, UniversalHeaderItem, VerticalSpace, VideoPlayer, Visible, VisuallyHidden$2 as VisuallyHidden, backgrounds, backgroundsBT, isDateValid, isRangeValid, loadingOptions, parseDateString, parseRangeString, themes, useMediaQuery };
 //# sourceMappingURL=index.mjs.map