@arc-ui/components 11.8.0 → 11.9.0

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import * as React$c from 'react';
-import React__default, { createContext, useContext, useRef, useState, useEffect, forwardRef, useCallback, useMemo, createElement, useLayoutEffect, Children, isValidElement, cloneElement, Fragment, useReducer, useId } from 'react';
+import * as React$m from 'react';
+import React__default, { createContext, useContext, useState, useRef, useEffect, forwardRef, useCallback, useMemo, createElement, useLayoutEffect, Children, isValidElement, cloneElement, Fragment, useReducer, useId } from 'react';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -303,6 +303,328 @@ var AlignItem = function (_a) {
     return React__default.createElement("div", { className: "arc-Align-item" }, children);
 };
 
+var defaultContext$3 = { surface: "light" };
+var Context$3 = createContext(defaultContext$3);
+var Provider$4 = Context$3.Provider;
+/**
+ * Use `Surface` to compose content using the Arc system.
+ */
+var Surface = function (_a) {
+    var _b;
+    var background = _a.background, children = _a.children, _c = _a.growVertically, growVertically = _c === void 0 ? false : _c, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, props = __rest$2(_a, ["background", "children", "growVertically", "padding", "paddingHorizontal", "paddingVertical"]);
+    var surface = "light";
+    if (background === "black" ||
+        background === "brand" ||
+        background === "brand-flat" ||
+        background === "dark" ||
+        background === "darker") {
+        surface = "dark";
+    }
+    return (React__default.createElement(Provider$4, { value: { surface: surface } },
+        React__default.createElement("div", __assign$2({ "data-testid": "arc-surface", className: classNames((_b = {
+                    "arc-Surface": true
+                },
+                _b["arc-Surface--".concat(background &&
+                    camelCase$1(background), "Background")] = background,
+                _b["arc-Surface--growVertically"] = growVertically,
+                _b["arc-Surface--padding".concat(padding)] = padding,
+                _b["arc-Surface--paddingHorizontal".concat(paddingHorizontal)] = paddingHorizontal,
+                _b["arc-Surface--paddingVertical".concat(paddingVertical)] = paddingVertical,
+                _b)) }, filterDataAttrs(props)), children)));
+};
+var backgroundsShared = [
+    "black",
+    "brand",
+    "brand-flat",
+    "dark",
+    "darker",
+    "coral",
+    "turquoise",
+    "light",
+    "lighter",
+    "white"
+];
+__spreadArray$1([], backgroundsShared, true);
+__spreadArray$1([], backgroundsShared, true);
+
+const React$l = React__default;
+const ArcIconArc = props =>
+  /*#__PURE__*/ React$l.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$l.createElement("path", {
+      fill: "none",
+      d: "M3.472 11.69a6.5 6.5 0 012.321-6.839A6.5 6.5 0 0113 4.38",
+      stroke: "currentColor"
+    })
+  );
+var ArcIconArc_2 = ArcIconArc;
+
+/**
+ * Use `Icon` to display brand iconography.
+ */
+var Icon = function (_a) {
+    var _b;
+    var testId = _a.testId, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.icon, icon = _d === void 0 ? ArcIconArc_2 : _d, _e = _a.isInline, isInline = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = __rest$2(_a, ["testId", "color", "icon", "isInline", "label", "size"]);
+    var surface = useContext(Context$3).surface;
+    var Icon = icon;
+    return (React__default.createElement("span", __assign$2({ "data-testid": testId, "aria-label": label, className: classNames((_b = {},
+            _b["arc-Icon"] = true,
+            _b[suffixModifier("arc-Icon--color", color)] = color !== "auto",
+            _b["arc-Icon--inline"] = isInline,
+            _b["arc-Icon--onDarkSurface"] = surface === "dark",
+            _b)), role: label ? "img" : undefined, style: {
+            height: size,
+            width: size
+        } }, filterDataAttrs(props)),
+        React__default.createElement(Icon, null)));
+};
+
+/**
+ * Use `Heading` to display heading text.
+ */
+var Heading = function (_a) {
+    var _b;
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, _d = _a.casing, casing = _d === void 0 ? "auto" : _d, children = _a.children, _e = _a.color, color = _e === void 0 ? "auto" : _e, level = _a.level, size = _a.size, id = _a.id, props = __rest$2(_a, ["align", "casing", "children", "color", "level", "size", "id"]);
+    var surface = useContext(Context$3).surface;
+    var Element = "span";
+    if (level) {
+        Element = "h".concat(level);
+    }
+    return (React__default.createElement(Element, __assign$2({ id: id, className: classNames((_b = {
+                "arc-Heading": true
+            },
+            _b[suffixModifier("arc-Heading--align", align)] = align && align !== "left",
+            _b["arc-Heading--size".concat(size && size.toUpperCase())] = size,
+            _b["arc-Heading--casingNone"] = casing === "none",
+            _b["arc-Heading--colorBrand"] = color === "brand",
+            _b["arc-Heading--onDarkSurface"] = surface === "dark",
+            _b)) }, filterDataAttrs(props)), children));
+};
+var HeadingProposition = function (_a) {
+    var children = _a.children;
+    return React__default.createElement("span", { className: "arc-Heading-proposition" }, children);
+};
+HeadingProposition.displayName = "Heading.Proposition";
+Heading.Proposition = HeadingProposition;
+
+/**
+ * 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, props = __rest$2(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone"]);
+    var surface = useContext(Context$3).surface;
+    return (React__default.createElement("span", __assign$2({ 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)) }, filterDataAttrs(props)), children));
+};
+
+const React$k = React__default;
+const BtIconCrossAlt2Px = props =>
+  /*#__PURE__*/ React$k.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$k.createElement("defs", null),
+    /*#__PURE__*/ React$k.createElement("path", {
+      d:
+        "M17.41406,16l3.793-3.793A.99989.99989,0,0,0,19.793,10.793L16,14.58594l-3.793-3.793A.99989.99989,0,0,0,10.793,12.207L14.58594,16l-3.793,3.793A.99989.99989,0,1,0,12.207,21.207L16,17.41406l3.793,3.793A.99989.99989,0,0,0,21.207,19.793Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCrossAlt2Px_2 = BtIconCrossAlt2Px;
+
+const React$j = React__default;
+const BtIconNotification = props =>
+  /*#__PURE__*/ React$j.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$j.createElement("defs", null),
+    /*#__PURE__*/ React$j.createElement("path", {
+      d:
+        "M24.50977,21.98867,24,21.99014,23.99414,13.975a7.98466,7.98466,0,0,0-6.66046-7.86011,1.46733,1.46733,0,0,0,.15655-.65063,1.48633,1.48633,0,1,0-2.97265,0,1.46732,1.46732,0,0,0,.15826.65369,7.9849,7.9849,0,0,0-6.63971,7.857v8.0166l-.50781-.00293a1.50464,1.50464,0,1,0,0,3.00928h3.45679a1.997,1.997,0,0,0,3.99365,0h9.532a1.50464,1.50464,0,1,0-.001-3.00928ZM16.00391,4.97793a.48633.48633,0,1,1-.48633.48633A.48668.48668,0,0,1,16.00391,4.97793ZM12.98242,25.97158a.998.998,0,0,1-.99469-.97363h1.98841A.99785.99785,0,0,1,12.98242,25.97158ZM24.51074,23.998H7.52832a.50465.50465,0,0,1-.00488-1.00928l1.51269.00293V13.975a6.979,6.979,0,0,1,13.958.00049L23,22.99209l1.51074-.00342a.50464.50464,0,1,1,0,1.00928Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconNotification_2 = BtIconNotification;
+
+const React$i = React__default;
+const BtIconAlertTriangle = props =>
+  /*#__PURE__*/ React$i.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$i.createElement("defs", null),
+    /*#__PURE__*/ React$i.createElement("path", {
+      fill: "currentColor",
+      d: "M16 21.99335A1 1 0 1 0 16 23.99335 1 1 0 1 0 16 21.99335z"
+    }),
+    /*#__PURE__*/ React$i.createElement("path", {
+      d:
+        "M16.00488,20.00977a.49972.49972,0,0,0,.5-.5l.002-9.00977a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,20.00977Z",
+      fill: "currentColor"
+    }),
+    /*#__PURE__*/ React$i.createElement("path", {
+      d:
+        "M29.83691,26.21,17.041,4.5332A1.15617,1.15617,0,0,0,16.03711,3.959h-.001a1.159,1.159,0,0,0-1.00586.57373L2.23535,26.21045a1.16676,1.16676,0,0,0,1.00488,1.76074H28.83105A1.16843,1.16843,0,0,0,29.83691,26.21Zm-.86035.67725a.164.164,0,0,1-.14551.084H3.24023a.16737.16737,0,0,1-.14355-.25244L15.8916,5.0415a.167.167,0,0,1,.28809,0l12.7959,21.67627A.16531.16531,0,0,1,28.97656,26.88721Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconAlertTriangle_2 = BtIconAlertTriangle;
+
+const React$h = React__default;
+const BtIconAlert = props =>
+  /*#__PURE__*/ React$h.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$h.createElement("defs", null),
+    /*#__PURE__*/ React$h.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$h.createElement("path", {
+      fill: "currentColor",
+      d: "M16 20.99335A1 1 0 1 0 16 22.99335 1 1 0 1 0 16 20.99335z"
+    }),
+    /*#__PURE__*/ React$h.createElement("path", {
+      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"
+    })
+  );
+var BtIconAlert_2 = BtIconAlert;
+
+const React$g = React__default;
+const BtIconTick = props =>
+  /*#__PURE__*/ React$g.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$g.createElement("defs", null),
+    /*#__PURE__*/ React$g.createElement(
+      "g",
+      {
+        "data-name": "Icons"
+      },
+      /*#__PURE__*/ React$g.createElement("path", {
+        d:
+          "M16,3A13,13,0,1,1,3,16,12.9741,12.9741,0,0,1,16,3m0-1A14,14,0,1,0,30,16,14.04116,14.04116,0,0,0,16,2Z",
+        fill: "currentColor"
+      }),
+      /*#__PURE__*/ React$g.createElement("path", {
+        d:
+          "M13.5,21.2,9.1,16.8a.495.495,0,1,1,.7-.7l3.6,3.6L22,11.1a.495.495,0,1,1,.7.7Z",
+        fill: "currentColor"
+      })
+    )
+  );
+var BtIconTick_2 = BtIconTick;
+
+/** use `Alert` to display persistent messages, either permanent or dismissible. */
+var Alert = function (_a) {
+    var _b;
+    var heading = _a.heading, description = _a.description, link = _a.link, linkText = _a.linkText, linkAriaLabel = _a.linkAriaLabel, type = _a.type, _c = _a.status, status = _c === void 0 ? "general" : _c, isDismissable = _a.isDismissable, headingLevel = _a.headingLevel, onDismiss = _a.onDismiss, onLinkClick = _a.onLinkClick, icon = _a.icon, props = __rest$2(_a, ["heading", "description", "link", "linkText", "linkAriaLabel", "type", "status", "isDismissable", "headingLevel", "onDismiss", "onLinkClick", "icon"]);
+    var surface = useContext(Context$3).surface;
+    var _d = useState(false), isDismissed = _d[0], setIsDismissed = _d[1];
+    var onDismissHandler = function () {
+        setIsDismissed(true);
+        onDismiss && onDismiss();
+    };
+    var statusIcons = {
+        general: BtIconNotification_2,
+        error: BtIconAlert_2,
+        warning: BtIconAlertTriangle_2,
+        success: BtIconTick_2
+    };
+    var handleLinkClick = function (event) {
+        event.preventDefault();
+        onLinkClick && onLinkClick();
+    };
+    if (isDismissed) {
+        return null;
+    }
+    return (React__default.createElement("div", __assign$2({ className: classNames("arc-Alert", (_b = {
+                "arc-Alert--onDarkSurface": surface === "dark",
+                "arc-Alert--secondary": type === "secondary"
+            },
+            _b["arc-Alert--".concat(status)] = status !== "general",
+            _b)), role: "alert" }, (status === "warning" && { "aria-live": "assertive" }), filterDataAttrs(props)),
+        React__default.createElement("div", { className: "arc-Alert-icon" }, icon ? (React__default.createElement(Icon, { size: 24, icon: icon })) : (React__default.createElement(Icon, { size: 24, icon: statusIcons[status] }))),
+        React__default.createElement("div", { className: "arc-Alert-content" },
+            React__default.createElement("div", { className: "arc-Alert-heading" },
+                React__default.createElement(Heading, { size: "xs", level: headingLevel }, heading)),
+            description && React__default.createElement(Text, { size: "s" }, description),
+            link && (React__default.createElement("div", { className: "arc-Alert-link" },
+                React__default.createElement(Text, { size: "s" },
+                    React__default.createElement("a", __assign$2({ href: link, "aria-label": linkAriaLabel }, (onLinkClick && { onClick: handleLinkClick })), linkText))))),
+        isDismissable && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("button", { "aria-label": "dismiss alert", className: "arc-Alert-dismiss", onClick: onDismissHandler },
+                React__default.createElement(Icon, { icon: BtIconCrossAlt2Px_2, size: 24 }))))));
+};
+
+/** Use `Badge` component to visually display a small amount of information, such as notification counts or status indicators. */
+var Badge = function (_a) {
+    var _b, _c;
+    var children = _a.children, _d = _a.state, state = _d === void 0 ? "default" : _d, _e = _a.size, size = _e === void 0 ? "default" : _e, _f = _a.fill, fill = _f === void 0 ? "solid" : _f, ariaLabel = _a.ariaLabel, ariaRole = _a.ariaRole, props = __rest$2(_a, ["children", "state", "size", "fill", "ariaLabel", "ariaRole"]);
+    var surface = useContext(Context$3).surface;
+    return (React__default.createElement("div", __assign$2({ className: classNames((_b = {
+                "arc-Badge": true,
+                "arc-Badge--onDarkSurface": surface === "dark",
+                "arc-Badge--large": size === "large",
+                "arc-Badge--outline": fill === "outlined"
+            },
+            _b[suffixModifier("arc-Badge--state", state)] = state !== "default",
+            _b)) }, (ariaLabel && { "aria-label": ariaLabel }), (ariaRole && { role: ariaRole }), filterDataAttrs(props)),
+        React__default.createElement("div", { className: classNames((_c = {
+                    "arc-Badge-text": true
+                },
+                _c[suffixModifier("arc-Badge--text", state)] = state !== "default",
+                _c)) },
+            React__default.createElement(Text, { size: size === "default" ? "xs" : "m" }, children))));
+};
+
 var ArcRootElementContext = createContext(null);
 /**
  * Use `Base` as the root component of the arc system.
@@ -314,6 +636,42 @@ var Base = function (_a) {
         React__default.createElement(ArcRootElementContext.Provider, { value: arcRoot }, children)));
 };
 
+// Do equal height boxes story
+/**
+ * Use `Box` as a simple way to group bespoke content and interactive elements together.
+ */
+var Box = function (_a) {
+    var _b;
+    var children = _a.children, borderWidth = _a.borderWidth, elevationLevel = _a.elevationLevel, padding = _a.padding, _c = _a.isFullHeight, isFullHeight = _c === void 0 ? false : _c, _d = _a.isBorderRadius, isBorderRadius = _d === void 0 ? false : _d, _e = _a.surface, surface = _e === void 0 ? "white" : _e, props = __rest$2(_a, ["children", "borderWidth", "elevationLevel", "padding", "isFullHeight", "isBorderRadius", "surface"]);
+    return (React__default.createElement("div", __assign$2({ className: classNames("arc-Box", (_b = {},
+            _b["arc-Box--fullHeight"] = isFullHeight,
+            _b["arc-Box--borderRadius"] = isBorderRadius,
+            _b["arc-Box--borderThin"] = borderWidth === "thin",
+            _b["arc-Box--borderMedium"] = borderWidth === "medium",
+            _b["arc-Box--elevation1"] = elevationLevel === "1",
+            _b["arc-Box--elevation2"] = elevationLevel === "2",
+            _b)) }, filterDataAttrs(props)),
+        React__default.createElement(Surface, { padding: padding, background: surface }, children)));
+};
+
+/**
+ * Use `BrandLogo` to display the brand logo.
+ */
+var BrandLogo = function (_a) {
+    var _b;
+    var _c = _a.color, color = _c === void 0 ? "auto" : _c, label = _a.label, _d = _a.size, size = _d === void 0 ? 34 : _d, subBrand = _a.subBrand, props = __rest$2(_a, ["color", "label", "size", "subBrand"]);
+    var surface = useContext(Context$3).surface;
+    return (React__default.createElement("div", __assign$2({ className: classNames((_b = {
+                "arc-BrandLogo": true,
+                "arc-BrandLogo--colorBrand": color === "brand",
+                "arc-BrandLogo--onDarkSurface": surface === "dark"
+            },
+            _b[suffixModifier("arc-BrandLogo--subBrand", subBrand || "")] = subBrand,
+            _b)), style: {
+            width: size !== 34 ? size : undefined
+        } }, filterDataAttrs(props)), label ? React__default.createElement("span", { className: "arc-BrandLogo-text" }, label) : null));
+};
+
 /**
  * Checks if `value` is the
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
@@ -853,9 +1211,9 @@ function debounce(func, wait, options) {
 
 var debounce_1 = debounce;
 
-const React$b = React__default;
+const React$f = React__default;
 const BtIconChevronLeft2Px = props =>
-  /*#__PURE__*/ React$b.createElement(
+  /*#__PURE__*/ React$f.createElement(
     "svg",
     Object.assign(
       {
@@ -864,8 +1222,8 @@ const BtIconChevronLeft2Px = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$b.createElement("defs", null),
-    /*#__PURE__*/ React$b.createElement("path", {
+    /*#__PURE__*/ React$f.createElement("defs", null),
+    /*#__PURE__*/ React$f.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"
@@ -873,9 +1231,9 @@ const BtIconChevronLeft2Px = props =>
   );
 var BtIconChevronLeft2Px_2 = BtIconChevronLeft2Px;
 
-const React$a = React__default;
+const React$e = React__default;
 const BtIconChevronRight2Px = props =>
-  /*#__PURE__*/ React$a.createElement(
+  /*#__PURE__*/ React$e.createElement(
     "svg",
     Object.assign(
       {
@@ -884,8 +1242,8 @@ const BtIconChevronRight2Px = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$a.createElement("defs", null),
-    /*#__PURE__*/ React$a.createElement("path", {
+    /*#__PURE__*/ React$e.createElement("defs", null),
+    /*#__PURE__*/ React$e.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"
@@ -893,89 +1251,6 @@ const BtIconChevronRight2Px = props =>
   );
 var BtIconChevronRight2Px_2 = BtIconChevronRight2Px;
 
-const React$9 = React__default;
-const ArcIconArc = props =>
-  /*#__PURE__*/ React$9.createElement(
-    "svg",
-    Object.assign(
-      {
-        viewBox: "0 0 16 16",
-        xmlns: "http://www.w3.org/2000/svg"
-      },
-      props
-    ),
-    /*#__PURE__*/ React$9.createElement("path", {
-      fill: "none",
-      d: "M3.472 11.69a6.5 6.5 0 012.321-6.839A6.5 6.5 0 0113 4.38",
-      stroke: "currentColor"
-    })
-  );
-var ArcIconArc_2 = ArcIconArc;
-
-var defaultContext$3 = { surface: "light" };
-var Context$3 = createContext(defaultContext$3);
-var Provider$4 = Context$3.Provider;
-/**
- * Use `Surface` to compose content using the Arc system.
- */
-var Surface = function (_a) {
-    var _b;
-    var background = _a.background, children = _a.children, _c = _a.growVertically, growVertically = _c === void 0 ? false : _c, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, props = __rest$2(_a, ["background", "children", "growVertically", "padding", "paddingHorizontal", "paddingVertical"]);
-    var surface = "light";
-    if (background === "black" ||
-        background === "brand" ||
-        background === "brand-flat" ||
-        background === "dark" ||
-        background === "darker") {
-        surface = "dark";
-    }
-    return (React__default.createElement(Provider$4, { value: { surface: surface } },
-        React__default.createElement("div", __assign$2({ "data-testid": "arc-surface", className: classNames((_b = {
-                    "arc-Surface": true
-                },
-                _b["arc-Surface--".concat(background &&
-                    camelCase$1(background), "Background")] = background,
-                _b["arc-Surface--growVertically"] = growVertically,
-                _b["arc-Surface--padding".concat(padding)] = padding,
-                _b["arc-Surface--paddingHorizontal".concat(paddingHorizontal)] = paddingHorizontal,
-                _b["arc-Surface--paddingVertical".concat(paddingVertical)] = paddingVertical,
-                _b)) }, filterDataAttrs(props)), children)));
-};
-var backgroundsShared = [
-    "black",
-    "brand",
-    "brand-flat",
-    "dark",
-    "darker",
-    "coral",
-    "turquoise",
-    "light",
-    "lighter",
-    "white"
-];
-__spreadArray$1([], backgroundsShared, true);
-__spreadArray$1([], backgroundsShared, true);
-
-/**
- * Use `Icon` to display brand iconography.
- */
-var Icon = function (_a) {
-    var _b;
-    var testId = _a.testId, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.icon, icon = _d === void 0 ? ArcIconArc_2 : _d, _e = _a.isInline, isInline = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = __rest$2(_a, ["testId", "color", "icon", "isInline", "label", "size"]);
-    var surface = useContext(Context$3).surface;
-    var Icon = icon;
-    return (React__default.createElement("span", __assign$2({ "data-testid": testId, "aria-label": label, className: classNames((_b = {},
-            _b["arc-Icon"] = true,
-            _b[suffixModifier("arc-Icon--color", color)] = color !== "auto",
-            _b["arc-Icon--inline"] = isInline,
-            _b["arc-Icon--onDarkSurface"] = surface === "dark",
-            _b)), role: label ? "img" : undefined, style: {
-            height: size,
-            width: size
-        } }, filterDataAttrs(props)),
-        React__default.createElement(Icon, null)));
-};
-
 var BreadcrumbsItem = function (_a) {
     var spacerIconAfter = _a.spacerIconAfter, spacerIconBefore = _a.spacerIconBefore, children = _a.children, props = __rest$2(_a, ["spacerIconAfter", "spacerIconBefore", "children"]);
     return (React__default.createElement("li", __assign$2({ className: "arc-Breadcrumbs-item" }, filterDataAttrs(props)),
@@ -1079,27 +1354,9 @@ BreadcrumbsLink.displayName = "Breadcrumbs.Link";
 Breadcrumbs.Item = BreadcrumbsItem;
 Breadcrumbs.Link = BreadcrumbsLink;
 
-/**
- * Use `BrandLogo` to display the brand logo.
- */
-var BrandLogo = function (_a) {
-    var _b;
-    var _c = _a.color, color = _c === void 0 ? "auto" : _c, label = _a.label, _d = _a.size, size = _d === void 0 ? 34 : _d, subBrand = _a.subBrand, props = __rest$2(_a, ["color", "label", "size", "subBrand"]);
-    var surface = useContext(Context$3).surface;
-    return (React__default.createElement("div", __assign$2({ className: classNames((_b = {
-                "arc-BrandLogo": true,
-                "arc-BrandLogo--colorBrand": color === "brand",
-                "arc-BrandLogo--onDarkSurface": surface === "dark"
-            },
-            _b[suffixModifier("arc-BrandLogo--subBrand", subBrand || "")] = subBrand,
-            _b)), style: {
-            width: size !== 34 ? size : undefined
-        } }, filterDataAttrs(props)), label ? React__default.createElement("span", { className: "arc-BrandLogo-text" }, label) : null));
-};
-
-const React$8 = React__default;
+const React$d = React__default;
 const BtIconChevronLeftMid = props =>
-  /*#__PURE__*/ React$8.createElement(
+  /*#__PURE__*/ React$d.createElement(
     "svg",
     Object.assign(
       {
@@ -1109,7 +1366,7 @@ const BtIconChevronLeftMid = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$8.createElement("path", {
+    /*#__PURE__*/ React$d.createElement("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d:
@@ -1119,9 +1376,9 @@ const BtIconChevronLeftMid = props =>
   );
 var BtIconChevronLeftMid_2 = BtIconChevronLeftMid;
 
-const React$7 = React__default;
+const React$c = React__default;
 const BtIconChevronRightMid = props =>
-  /*#__PURE__*/ React$7.createElement(
+  /*#__PURE__*/ React$c.createElement(
     "svg",
     Object.assign(
       {
@@ -1131,7 +1388,7 @@ const BtIconChevronRightMid = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$7.createElement("path", {
+    /*#__PURE__*/ React$c.createElement("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d:
@@ -1214,34 +1471,6 @@ var ImageSource = function (_a) {
 ImageSource.displayName = "Image.Source";
 Image.Source = ImageSource;
 
-/**
- * Use `Heading` to display heading text.
- */
-var Heading = function (_a) {
-    var _b;
-    var _c = _a.align, align = _c === void 0 ? "left" : _c, _d = _a.casing, casing = _d === void 0 ? "auto" : _d, children = _a.children, _e = _a.color, color = _e === void 0 ? "auto" : _e, level = _a.level, size = _a.size, id = _a.id, props = __rest$2(_a, ["align", "casing", "children", "color", "level", "size", "id"]);
-    var surface = useContext(Context$3).surface;
-    var Element = "span";
-    if (level) {
-        Element = "h".concat(level);
-    }
-    return (React__default.createElement(Element, __assign$2({ id: id, className: classNames((_b = {
-                "arc-Heading": true
-            },
-            _b[suffixModifier("arc-Heading--align", align)] = align && align !== "left",
-            _b["arc-Heading--size".concat(size && size.toUpperCase())] = size,
-            _b["arc-Heading--casingNone"] = casing === "none",
-            _b["arc-Heading--colorBrand"] = color === "brand",
-            _b["arc-Heading--onDarkSurface"] = surface === "dark",
-            _b)) }, filterDataAttrs(props)), children));
-};
-var HeadingProposition = function (_a) {
-    var children = _a.children;
-    return React__default.createElement("span", { className: "arc-Heading-proposition" }, children);
-};
-HeadingProposition.displayName = "Heading.Proposition";
-Heading.Proposition = HeadingProposition;
-
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.
  */
@@ -1438,9 +1667,9 @@ var CardLink = function (_a) {
             React__default.createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid_2, size: 24 })))));
 };
 
-const React$6 = React__default;
+const React$b = React__default;
 const BtIconTickAlt2Px = props =>
-  /*#__PURE__*/ React$6.createElement(
+  /*#__PURE__*/ React$b.createElement(
     "svg",
     Object.assign(
       {
@@ -1449,8 +1678,8 @@ const BtIconTickAlt2Px = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$6.createElement("defs", null),
-    /*#__PURE__*/ React$6.createElement("path", {
+    /*#__PURE__*/ React$b.createElement("defs", null),
+    /*#__PURE__*/ React$b.createElement("path", {
       d:
         "M13.49963,21.91418l-4.707-4.707a1.0014,1.0014,0,0,1,0-1.41406,1.02353,1.02353,0,0,1,1.41406,0l3.293,3.293,8.293-8.293a.99989.99989,0,1,1,1.41406,1.41406Z",
       fill: "currentColor"
@@ -1458,38 +1687,9 @@ const BtIconTickAlt2Px = props =>
   );
 var BtIconTickAlt2Px_2 = BtIconTickAlt2Px;
 
-const React$5 = React__default;
-const BtIconAlert = props =>
-  /*#__PURE__*/ React$5.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
-      },
-      props
-    ),
-    /*#__PURE__*/ React$5.createElement("defs", null),
-    /*#__PURE__*/ React$5.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$5.createElement("path", {
-      fill: "currentColor",
-      d: "M16 20.99335A1 1 0 1 0 16 22.99335 1 1 0 1 0 16 20.99335z"
-    }),
-    /*#__PURE__*/ React$5.createElement("path", {
-      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"
-    })
-  );
-var BtIconAlert_2 = BtIconAlert;
-
-const React$4 = React__default;
+const React$a = React__default;
 const BtIconChevronDown2Px = props =>
-  /*#__PURE__*/ React$4.createElement(
+  /*#__PURE__*/ React$a.createElement(
     "svg",
     Object.assign(
       {
@@ -1498,8 +1698,8 @@ const BtIconChevronDown2Px = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$4.createElement("defs", null),
-    /*#__PURE__*/ React$4.createElement("path", {
+    /*#__PURE__*/ React$a.createElement("defs", null),
+    /*#__PURE__*/ React$a.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"
@@ -1507,25 +1707,6 @@ const BtIconChevronDown2Px = props =>
   );
 var BtIconChevronDown2Px_2 = BtIconChevronDown2Px;
 
-/**
- * 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, props = __rest$2(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone"]);
-    var surface = useContext(Context$3).surface;
-    return (React__default.createElement("span", __assign$2({ 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)) }, filterDataAttrs(props)), children));
-};
-
 /**
  * Use `DisclosureMini` to display content that is only visible when toggled into
  * an "open" state.
@@ -1943,25 +2124,19 @@ var Markup = function (_a) {
         }) }, filterDataAttrs(props)), children));
 };
 
-const React$3 = React__default;
-const BtIconCrossAlt2Px = props =>
-  /*#__PURE__*/ React$3.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
-      },
-      props
-    ),
-    /*#__PURE__*/ React$3.createElement("defs", null),
-    /*#__PURE__*/ React$3.createElement("path", {
-      d:
-        "M17.41406,16l3.793-3.793A.99989.99989,0,0,0,19.793,10.793L16,14.58594l-3.793-3.793A.99989.99989,0,0,0,10.793,12.207L14.58594,16l-3.793,3.793A.99989.99989,0,1,0,12.207,21.207L16,17.41406l3.793,3.793A.99989.99989,0,0,0,21.207,19.793Z",
-      fill: "currentColor"
-    })
-  );
-var BtIconCrossAlt2Px_2 = BtIconCrossAlt2Px;
+// Update tests for box surface
+/**
+ * Use `MediaCard` to contain content and an image about a single subject.
+ */
+var MediaCard = function (_a) {
+    var isBorderRadius = _a.isBorderRadius, isFullHeight = _a.isFullHeight, cardFooter = _a.cardFooter, borderWidth = _a.borderWidth, surface = _a.surface, elevationLevel = _a.elevationLevel, imageSrc = _a.imageSrc, imageAlt = _a.imageAlt, imageLoading = _a.imageLoading, imageSizes = _a.imageSizes, imageSrcSet = _a.imageSrcSet, children = _a.children, props = __rest$2(_a, ["isBorderRadius", "isFullHeight", "cardFooter", "borderWidth", "surface", "elevationLevel", "imageSrc", "imageAlt", "imageLoading", "imageSizes", "imageSrcSet", "children"]);
+    return (React__default.createElement(Box, __assign$2({ isFullHeight: isFullHeight, surface: surface, elevationLevel: elevationLevel, isBorderRadius: isBorderRadius, borderWidth: borderWidth }, filterDataAttrs(props)),
+        React__default.createElement("div", { className: "arc-MediaCard-wrapper" },
+            React__default.createElement("div", { className: "arc-MediaCard-imageContainer" },
+                React__default.createElement(Image, { alt: imageAlt, loading: imageLoading, sizes: imageSizes, src: imageSrc, srcSet: imageSrcSet })),
+            React__default.createElement("div", { className: "arc-MediaCard-section" }, children),
+            cardFooter && (React__default.createElement("div", { className: "arc-MediaCard-section" }, cardFooter)))));
+};
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -2114,14 +2289,14 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(originalEventHandler, ourEv
  * We use this safe version which suppresses the warning by replacing it with a noop on the server.
  *
  * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
- */ const $9f79659886946c16$export$e5c5a5f917a5871c$2 = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? useLayoutEffect : ()=>{};
+ */ const $9f79659886946c16$export$e5c5a5f917a5871c$3 = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? useLayoutEffect : ()=>{};
 
-const $1746a345f3d73bb7$var$useReactId$1 = React$c['useId'.toString()] || (()=>undefined
+const $1746a345f3d73bb7$var$useReactId$1 = React$m['useId'.toString()] || (()=>undefined
 );
 let $1746a345f3d73bb7$var$count$1 = 0;
 function $1746a345f3d73bb7$export$f680877a34711e37$1(deterministicId) {
-    const [id, setId] = React$c.useState($1746a345f3d73bb7$var$useReactId$1()); // React versions older than 18 will have client-side ids only.
-    $9f79659886946c16$export$e5c5a5f917a5871c$2(()=>{
+    const [id, setId] = React$m.useState($1746a345f3d73bb7$var$useReactId$1()); // React versions older than 18 will have client-side ids only.
+    $9f79659886946c16$export$e5c5a5f917a5871c$3(()=>{
         if (!deterministicId) setId((reactId)=>reactId !== null && reactId !== void 0 ? reactId : String($1746a345f3d73bb7$var$count$1++)
         );
     }, [
@@ -33051,10 +33226,10 @@ var $7SXl2$reactdom = reactDom.exports;
 
 /* -------------------------------------------------------------------------------------------------
  * Slot
- * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360$2 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360$3 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { children: children , ...slotProps } = props;
     const childrenArray = Children.toArray(children);
-    const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable$2);
+    const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable$3);
     if (slottable) {
         // the new element to render is the one passed as a child of `Slottable`
         const newElement = slottable.props.children;
@@ -33066,35 +33241,35 @@ var $7SXl2$reactdom = reactDom.exports;
                 return /*#__PURE__*/ isValidElement(newElement) ? newElement.props.children : null;
             } else return child;
         });
-        return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone$2, _extends({}, slotProps, {
+        return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone$3, _extends({}, slotProps, {
             ref: forwardedRef
         }), /*#__PURE__*/ isValidElement(newElement) ? /*#__PURE__*/ cloneElement(newElement, undefined, newChildren) : null);
     }
-    return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone$2, _extends({}, slotProps, {
+    return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone$3, _extends({}, slotProps, {
         ref: forwardedRef
     }), children);
 });
-$5e63c961fc1ce211$export$8c6ed5c666ac1360$2.displayName = 'Slot';
+$5e63c961fc1ce211$export$8c6ed5c666ac1360$3.displayName = 'Slot';
 /* -------------------------------------------------------------------------------------------------
  * SlotClone
- * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone$2 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone$3 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { children: children , ...slotProps } = props;
     if (/*#__PURE__*/ isValidElement(children)) return /*#__PURE__*/ cloneElement(children, {
-        ...$5e63c961fc1ce211$var$mergeProps$2(slotProps, children.props),
+        ...$5e63c961fc1ce211$var$mergeProps$3(slotProps, children.props),
         ref: forwardedRef ? $6ed0406888f73fc4$export$43e446d32b3d21af$4(forwardedRef, children.ref) : children.ref
     });
     return Children.count(children) > 1 ? Children.only(null) : null;
 });
-$5e63c961fc1ce211$var$SlotClone$2.displayName = 'SlotClone';
+$5e63c961fc1ce211$var$SlotClone$3.displayName = 'SlotClone';
 /* -------------------------------------------------------------------------------------------------
  * Slottable
- * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45$2 = ({ children: children  })=>{
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45$3 = ({ children: children  })=>{
     return /*#__PURE__*/ createElement(Fragment, null, children);
 };
-/* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable$2(child) {
-    return /*#__PURE__*/ isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45$2;
+/* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable$3(child) {
+    return /*#__PURE__*/ isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45$3;
 }
-function $5e63c961fc1ce211$var$mergeProps$2(slotProps, childProps) {
+function $5e63c961fc1ce211$var$mergeProps$3(slotProps, childProps) {
     // all child props should override
     const overrideProps = {
         ...childProps
@@ -33150,7 +33325,7 @@ const $8927f6f2acc4f386$var$NODES$4 = [
  * -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$250ffa63cdc0d034$4 = $8927f6f2acc4f386$var$NODES$4.reduce((primitive, node)=>{
     const Node = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
         const { asChild: asChild , ...primitiveProps } = props;
-        const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360$2 : node;
+        const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360$3 : node;
         useEffect(()=>{
             window[Symbol.for('radix-ui')] = true;
         }, []);
@@ -33334,6 +33509,25 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22$1 = /*#__PURE__*/ forwardRef((pr
         onPointerDownCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture)
     }));
 });
+const $5cb92bef7577960e$export$4d5eb2109db14228 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const context = useContext($5cb92bef7577960e$var$DismissableLayerContext$1);
+    const ref = useRef(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$3(forwardedRef, ref);
+    useEffect(()=>{
+        const node = ref.current;
+        if (node) {
+            context.branches.add(node);
+            return ()=>{
+                context.branches.delete(node);
+            };
+        }
+    }, [
+        context.branches
+    ]);
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$4.div, _extends({}, props, {
+        ref: composedRefs
+    }));
+});
 /* -----------------------------------------------------------------------------------------------*/ /**
  * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`
  * to mimic layer dismissing behaviour present in OS.
@@ -33450,6 +33644,8 @@ function $5cb92bef7577960e$var$handleAndDispatchCustomEvent$1(name, handler, det
     if (discrete) $8927f6f2acc4f386$export$6d1a0317bde7de7f$1(target, event);
     else target.dispatchEvent(event);
 }
+const $5cb92bef7577960e$export$be92b6f5f03c0fe9 = $5cb92bef7577960e$export$177fb62ff3ec1f22$1;
+const $5cb92bef7577960e$export$aecb2ddcb55c95be = $5cb92bef7577960e$export$4d5eb2109db14228;
 
 const $d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT$1 = 'focusScope.autoFocusOnMount';
 const $d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT$1 = 'focusScope.autoFocusOnUnmount';
@@ -33737,7 +33933,7 @@ const $f1701beae083dbae$export$602eac185826482c$1 = /*#__PURE__*/ forwardRef((pr
  * We use this safe version which suppresses the warning by replacing it with a noop on the server.
  *
  * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
- */ const $9f79659886946c16$export$e5c5a5f917a5871c$1 = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? useLayoutEffect : ()=>{};
+ */ const $9f79659886946c16$export$e5c5a5f917a5871c$2 = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? useLayoutEffect : ()=>{};
 
 function $fe963b355347cc68$export$3e6543de14f8614f(initialState, machine) {
     return useReducer((state, event)=>{
@@ -33787,7 +33983,7 @@ $921a889cee6df7e8$export$99c2b779aa4e8b8b.displayName = 'Presence';
     }, [
         state
     ]);
-    $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>{
+    $9f79659886946c16$export$e5c5a5f917a5871c$2(()=>{
         const styles = stylesRef.current;
         const wasPresent = prevPresentRef.current;
         const hasPresentChanged = wasPresent !== present;
@@ -33814,7 +34010,7 @@ $921a889cee6df7e8$export$99c2b779aa4e8b8b.displayName = 'Presence';
         present,
         send
     ]);
-    $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>{
+    $9f79659886946c16$export$e5c5a5f917a5871c$2(()=>{
         if (node1) {
             /**
        * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
@@ -34147,7 +34343,7 @@ var SideCar$1 = function (_a) {
     if (!Target) {
         throw new Error('Sidecar medium not found');
     }
-    return React$c.createElement(Target, __assign({}, rest));
+    return React$m.createElement(Target, __assign({}, rest));
 };
 SideCar$1.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -34163,9 +34359,9 @@ var nothing = function () {
 /**
  * Removes scrollbar from the page and contain the scroll within the Lock
  */
-var RemoveScroll = React$c.forwardRef(function (props, parentRef) {
-    var ref = React$c.useRef(null);
-    var _a = React$c.useState({
+var RemoveScroll = React$m.forwardRef(function (props, parentRef) {
+    var ref = React$m.useRef(null);
+    var _a = React$m.useState({
         onScrollCapture: nothing,
         onWheelCapture: nothing,
         onTouchMoveCapture: nothing,
@@ -34174,9 +34370,9 @@ var RemoveScroll = React$c.forwardRef(function (props, parentRef) {
     var SideCar = sideCar;
     var containerRef = useMergeRefs([ref, parentRef]);
     var containerProps = __assign$1(__assign$1({}, rest), callbacks);
-    return (React$c.createElement(React$c.Fragment, null,
-        enabled && (React$c.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),
-        forwardProps ? (React$c.cloneElement(React$c.Children.only(children), __assign$1(__assign$1({}, containerProps), { ref: containerRef }))) : (React$c.createElement(Container, __assign$1({}, containerProps, { className: className, ref: containerRef }), children))));
+    return (React$m.createElement(React$m.Fragment, null,
+        enabled && (React$m.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),
+        forwardProps ? (React$m.cloneElement(React$m.Children.only(children), __assign$1(__assign$1({}, containerProps), { ref: containerRef }))) : (React$m.createElement(Container, __assign$1({}, containerProps, { className: className, ref: containerRef }), children))));
 });
 RemoveScroll.defaultProps = {
     enabled: true,
@@ -34255,7 +34451,7 @@ var stylesheetSingleton = function () {
 var styleHookSingleton = function () {
     var sheet = stylesheetSingleton();
     return function (styles, isDynamic) {
-        React$c.useEffect(function () {
+        React$m.useEffect(function () {
             sheet.add(styles);
             return function () {
                 sheet.remove();
@@ -34336,8 +34532,8 @@ var RemoveScrollBar = function (props) {
      however it will be used only by the "first" invocation
      due to singleton nature of <Style
      */
-    var gap = React$c.useMemo(function () { return getGapWidth(gapMode); }, [gapMode]);
-    return React$c.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
+    var gap = React$m.useMemo(function () { return getGapWidth(gapMode); }, [gapMode]);
+    return React$m.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
 };
 
 var passiveSupported = false;
@@ -34469,16 +34665,16 @@ var generateStyle = function (id) { return "\n  .block-interactivity-".concat(id
 var idCounter = 0;
 var lockStack = [];
 function RemoveScrollSideCar(props) {
-    var shouldPreventQueue = React$c.useRef([]);
-    var touchStartRef = React$c.useRef([0, 0]);
-    var activeAxis = React$c.useRef();
-    var id = React$c.useState(idCounter++)[0];
-    var Style = React$c.useState(function () { return styleSingleton(); })[0];
-    var lastProps = React$c.useRef(props);
-    React$c.useEffect(function () {
+    var shouldPreventQueue = React$m.useRef([]);
+    var touchStartRef = React$m.useRef([0, 0]);
+    var activeAxis = React$m.useRef();
+    var id = React$m.useState(idCounter++)[0];
+    var Style = React$m.useState(function () { return styleSingleton(); })[0];
+    var lastProps = React$m.useRef(props);
+    React$m.useEffect(function () {
         lastProps.current = props;
     }, [props]);
-    React$c.useEffect(function () {
+    React$m.useEffect(function () {
         if (props.inert) {
             document.body.classList.add("block-interactivity-".concat(id));
             var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
@@ -34490,7 +34686,7 @@ function RemoveScrollSideCar(props) {
         }
         return;
     }, [props.inert, props.lockRef.current, props.shards]);
-    var shouldCancelEvent = React$c.useCallback(function (event, parent) {
+    var shouldCancelEvent = React$m.useCallback(function (event, parent) {
         if ('touches' in event && event.touches.length === 2) {
             return !lastProps.current.allowPinchZoom;
         }
@@ -34529,7 +34725,7 @@ function RemoveScrollSideCar(props) {
         var cancelingAxis = activeAxis.current || currentAxis;
         return handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true);
     }, []);
-    var shouldPrevent = React$c.useCallback(function (_event) {
+    var shouldPrevent = React$m.useCallback(function (_event) {
         var event = _event;
         if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) {
             // not the last active
@@ -34558,24 +34754,24 @@ function RemoveScrollSideCar(props) {
             }
         }
     }, []);
-    var shouldCancel = React$c.useCallback(function (name, delta, target, should) {
+    var shouldCancel = React$m.useCallback(function (name, delta, target, should) {
         var event = { name: name, delta: delta, target: target, should: should };
         shouldPreventQueue.current.push(event);
         setTimeout(function () {
             shouldPreventQueue.current = shouldPreventQueue.current.filter(function (e) { return e !== event; });
         }, 1);
     }, []);
-    var scrollTouchStart = React$c.useCallback(function (event) {
+    var scrollTouchStart = React$m.useCallback(function (event) {
         touchStartRef.current = getTouchXY(event);
         activeAxis.current = undefined;
     }, []);
-    var scrollWheel = React$c.useCallback(function (event) {
+    var scrollWheel = React$m.useCallback(function (event) {
         shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
     }, []);
-    var scrollTouchMove = React$c.useCallback(function (event) {
+    var scrollTouchMove = React$m.useCallback(function (event) {
         shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
     }, []);
-    React$c.useEffect(function () {
+    React$m.useEffect(function () {
         lockStack.push(Style);
         props.setCallbacks({
             onScrollCapture: scrollWheel,
@@ -34593,14 +34789,14 @@ function RemoveScrollSideCar(props) {
         };
     }, []);
     var removeScrollBar = props.removeScrollBar, inert = props.inert;
-    return (React$c.createElement(React$c.Fragment, null,
-        inert ? React$c.createElement(Style, { styles: generateStyle(id) }) : null,
-        removeScrollBar ? React$c.createElement(RemoveScrollBar, { gapMode: "margin" }) : null));
+    return (React$m.createElement(React$m.Fragment, null,
+        inert ? React$m.createElement(Style, { styles: generateStyle(id) }) : null,
+        removeScrollBar ? React$m.createElement(RemoveScrollBar, { gapMode: "margin" }) : null));
 }
 
 var SideCar = exportSidecar(effectCar, RemoveScrollSideCar);
 
-var ReactRemoveScroll = React$c.forwardRef(function (props, ref) { return (React$c.createElement(RemoveScroll, __assign$1({}, props, { ref: ref, sideCar: SideCar }))); });
+var ReactRemoveScroll = React$m.forwardRef(function (props, ref) { return (React$m.createElement(RemoveScroll, __assign$1({}, props, { ref: ref, sideCar: SideCar }))); });
 ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var $01b9c$RemoveScroll = ReactRemoveScroll;
 
@@ -34734,10 +34930,10 @@ var hideOthers = function (originalTarget, parentNode, markerName) {
 
 /* -------------------------------------------------------------------------------------------------
  * Slot
- * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360$1 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360$2 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { children: children , ...slotProps } = props;
     const childrenArray = Children.toArray(children);
-    const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable$1);
+    const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable$2);
     if (slottable) {
         // the new element to render is the one passed as a child of `Slottable`
         const newElement = slottable.props.children;
@@ -34749,35 +34945,35 @@ var hideOthers = function (originalTarget, parentNode, markerName) {
                 return /*#__PURE__*/ isValidElement(newElement) ? newElement.props.children : null;
             } else return child;
         });
-        return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone$1, _extends({}, slotProps, {
+        return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone$2, _extends({}, slotProps, {
             ref: forwardedRef
         }), /*#__PURE__*/ isValidElement(newElement) ? /*#__PURE__*/ cloneElement(newElement, undefined, newChildren) : null);
     }
-    return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone$1, _extends({}, slotProps, {
+    return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone$2, _extends({}, slotProps, {
         ref: forwardedRef
     }), children);
 });
-$5e63c961fc1ce211$export$8c6ed5c666ac1360$1.displayName = 'Slot';
+$5e63c961fc1ce211$export$8c6ed5c666ac1360$2.displayName = 'Slot';
 /* -------------------------------------------------------------------------------------------------
  * SlotClone
- * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone$1 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone$2 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { children: children , ...slotProps } = props;
     if (/*#__PURE__*/ isValidElement(children)) return /*#__PURE__*/ cloneElement(children, {
-        ...$5e63c961fc1ce211$var$mergeProps$1(slotProps, children.props),
+        ...$5e63c961fc1ce211$var$mergeProps$2(slotProps, children.props),
         ref: forwardedRef ? $6ed0406888f73fc4$export$43e446d32b3d21af$4(forwardedRef, children.ref) : children.ref
     });
     return Children.count(children) > 1 ? Children.only(null) : null;
 });
-$5e63c961fc1ce211$var$SlotClone$1.displayName = 'SlotClone';
+$5e63c961fc1ce211$var$SlotClone$2.displayName = 'SlotClone';
 /* -------------------------------------------------------------------------------------------------
  * Slottable
- * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45$1 = ({ children: children  })=>{
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45$2 = ({ children: children  })=>{
     return /*#__PURE__*/ createElement(Fragment, null, children);
 };
-/* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable$1(child) {
-    return /*#__PURE__*/ isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45$1;
+/* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable$2(child) {
+    return /*#__PURE__*/ isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45$2;
 }
-function $5e63c961fc1ce211$var$mergeProps$1(slotProps, childProps) {
+function $5e63c961fc1ce211$var$mergeProps$2(slotProps, childProps) {
     // all child props should override
     const overrideProps = {
         ...childProps
@@ -34878,7 +35074,7 @@ const $5d3850c4d0b4e6c7$var$DialogOverlayImpl = /*#__PURE__*/ forwardRef((props,
     return(/*#__PURE__*/ // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
     // ie. when `Overlay` and `Content` are siblings
     createElement($01b9c$RemoveScroll, {
-        as: $5e63c961fc1ce211$export$8c6ed5c666ac1360$1,
+        as: $5e63c961fc1ce211$export$8c6ed5c666ac1360$2,
         allowPinchZoom: true,
         shards: [
             context.contentRef
@@ -35099,29 +35295,103 @@ var Modal = function (_a) {
                             React__default.createElement(Icon, { size: 32, icon: BtIconCrossAlt2Px_2 })))))))));
 };
 
+var usePagination = function (pageCount, selectedPage) {
+    var formatValues = function (range) {
+        return range.map(function (value) { return value.toString(); });
+    };
+    return useMemo(function () {
+        if (pageCount > 7 && selectedPage < 5) {
+            // show 1 - 5 the right dots are visible.
+            return formatValues(__spreadArray$1(__spreadArray$1([], Array.from({ length: 5 }, function (_value, index) { return index + 1; }), true), [
+                "...",
+                pageCount
+            ], false));
+        }
+        if (pageCount > 7 && selectedPage >= pageCount - 3) {
+            // show numbers to the end but the left dots are visible
+            return formatValues(__spreadArray$1([
+                1,
+                "..."
+            ], Array.from({ length: 5 }, function (_value, index) { return pageCount - index; }).reverse(), true));
+        }
+        if (pageCount > 7 && selectedPage >= 5 && selectedPage < pageCount - 3) {
+            // show selected page with one number either side and both the left and the right dots are visible.
+            return formatValues([
+                1,
+                "...",
+                selectedPage - 1,
+                selectedPage,
+                selectedPage + 1,
+                "...",
+                pageCount
+            ]);
+        }
+        // show all pages from pageCount
+        return formatValues(Array.from({ length: pageCount }, function (_value, index) { return index + 1; }));
+    }, [pageCount, selectedPage]);
+};
+
 /**
- * Use `UniversalHeader` to display a group-level page header.
+ * Use `Pagination` to navigate multiple pages.
  */
-var UniversalHeader = function (_a) {
-    var children = _a.children, props = __rest$2(_a, ["children"]);
-    useEffect(function () {
-        React__default.Children.map(children, function (item) {
-            if (item && item.type !== UniversalHeaderItem) {
-                throw new Error("Illegal child passed to <UniversalHeader />. Ensure to only use <UniversalHeader.Item />.");
-            }
-        });
-    }, [children]);
-    return (React__default.createElement("nav", __assign$2({ className: "arc-UniversalHeader" }, filterDataAttrs(props)),
-        React__default.createElement(Surface, { background: "light" },
-            React__default.createElement("ul", { className: "arc-UniversalHeader-items" }, children))));
+var Pagination = function (_a) {
+    var pageCount = _a.pageCount, onPageChange = _a.onPageChange, _b = _a.defaultSelectedPage, defaultSelectedPage = _b === void 0 ? 1 : _b, props = __rest$2(_a, ["pageCount", "onPageChange", "defaultSelectedPage"]);
+    var surface = useContext(Context$3).surface;
+    var _c = useState(defaultSelectedPage), selectedPage = _c[0], setSelectedPage = _c[1];
+    var pageRange = usePagination(pageCount, selectedPage);
+    var handlePagechange = function (pageToSelect) { return function () {
+        setSelectedPage(pageToSelect);
+        onPageChange(pageToSelect);
+    }; };
+    var isPageNumber = function (rangeValue) { return !isNaN(parseInt(rangeValue)); };
+    return (React__default.createElement("nav", __assign$2({ "aria-label": "pagination navigation", className: classNames("arc-Pagination", {
+            "arc-Pagination--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs(props)),
+        React__default.createElement("button", { "aria-label": "Go to previous page", className: classNames("arc-Pagination-navigationButton", {
+                "arc-Pagination-navigationButton--hidden": selectedPage === 1
+            }), onClick: handlePagechange(selectedPage - 1) },
+            React__default.createElement("div", { className: "arc-Pagination-navigationButtonIcon arc-Pagination-navigationButtonIcon--left" },
+                React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid_2 }))),
+        React__default.createElement("div", { className: "arc-Pagination-pageNumberContainer" }, pageRange.map(function (rangeValue, i) {
+            return isPageNumber(rangeValue) ? (React__default.createElement("button", { "aria-current": parseInt(rangeValue) === selectedPage, key: "pagination-range-value-".concat(rangeValue), "aria-label": "Go to page ".concat(rangeValue), className: classNames("arc-Pagination-value arc-Pagination-value--number", {
+                    "arc-Pagination-value--selected": parseInt(rangeValue) === selectedPage
+                }), onClick: handlePagechange(parseInt(rangeValue)) }, rangeValue)) : (React__default.createElement("span", { key: "pagination-range-value-dot".concat(i), className: classNames("arc-Pagination-value arc-Pagination-value--dots") }, rangeValue));
+        })),
+        React__default.createElement("button", { "aria-label": "Go to next page", className: classNames("arc-Pagination-navigationButton", {
+                "arc-Pagination-navigationButton--hidden": selectedPage === pageCount
+            }), onClick: handlePagechange(selectedPage + 1) },
+            React__default.createElement("div", { className: "arc-Pagination-navigationButtonIcon arc-Pagination-navigationButtonIcon--right" },
+                React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid_2 })))));
 };
-var UniversalHeaderItem = function (_a) {
-    var children = _a.children, href = _a.href, props = __rest$2(_a, ["children", "href"]);
-    return (React__default.createElement("li", __assign$2({}, filterDataAttrs(props)),
-        React__default.createElement("a", { className: "arc-UniversalHeader-link", href: href }, children)));
+
+/**
+ * Use `PaginationSimple` to navigate multiple pages.
+ */
+var PaginationSimple = function (_a) {
+    var hidePrev = _a.hidePrev, hideNext = _a.hideNext, onPrevPage = _a.onPrevPage, onNextPage = _a.onNextPage, isFluid = _a.isFluid, props = __rest$2(_a, ["hidePrev", "hideNext", "onPrevPage", "onNextPage", "isFluid"]);
+    var surface = useContext(Context$3).surface;
+    return (React__default.createElement("nav", __assign$2({ className: classNames("arc-PaginationSimple", {
+            "arc-PaginationSimple--onDarkSurface": surface === "dark",
+            "arc-PaginationSimple--fluid": isFluid,
+            "arc-PaginationSimple--centered": !isFluid
+        }) }, filterDataAttrs(props)),
+        React__default.createElement("button", { className: classNames("arc-PaginationSimple-navigationButton", {
+                "arc-PaginationSimple-navigationButton--hidden": hidePrev
+            }), onClick: function () {
+                onPrevPage();
+            } },
+            React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left" },
+                React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid_2 })),
+            React__default.createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev")),
+        React__default.createElement("button", { className: classNames("arc-PaginationSimple-navigationButton", {
+                "arc-PaginationSimple-navigationButton--hidden": hideNext
+            }), onClick: function () {
+                onNextPage();
+            } },
+            React__default.createElement("span", { className: "arc-PaginationSimple-nextText" }, "Next"),
+            React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--right" },
+                React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid_2 })))));
 };
-UniversalHeaderItem.displayName = "UniversalHeader.Item";
-UniversalHeader.Item = UniversalHeaderItem;
 
 var PosterImage = function (_a) {
     var alt = _a.alt, _b = _a.anchor, anchor = _b === void 0 ? "C" : _b, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, props = __rest$2(_a, ["alt", "anchor", "loading", "sizes", "src", "srcSet"]);
@@ -35159,6 +35429,220 @@ Poster.Image = PosterImage;
 PosterVideo.displayName = "Poster.Video";
 Poster.Video = PosterVideo;
 
+const React$9 = React__default;
+const BtIconRefresh = props =>
+  /*#__PURE__*/ React$9.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$9.createElement("defs", null),
+    /*#__PURE__*/ React$9.createElement("path", {
+      d:
+        "M13.41077,21.99951a.5005.5005,0,0,0-.35743.8501l2.04609,2.08716A8.98732,8.98732,0,0,1,13.15332,7.46631a.50028.50028,0,1,0-.31641-.94922A9.98437,9.98437,0,0,0,15.127,25.93823l.00159.02881c.0011.01.02008.00128.03015.002L13.026,28.16846a.50036.50036,0,0,0,.71875.69629l3.28418-3.38819-3.26074-3.32715A.50106.50106,0,0,0,13.41077,21.99951Z",
+      fill: "currentColor"
+    }),
+    /*#__PURE__*/ React$9.createElement("path", {
+      d:
+        "M16.79028,6.04633,16.79,6.04077c-.0011-.01-.02008-.00128-.03015-.00195l2.13275-2.19946a.50036.50036,0,0,0-.71875-.69629L14.88965,6.53125,18.15039,9.8584a.50106.50106,0,0,0,.35742.1499.5005.5005,0,0,0,.35742-.8501L16.7951,7.04657a8.98484,8.98484,0,0,1,2.05646,17.47589.49982.49982,0,1,0,.31641.94824A9.98244,9.98244,0,0,0,16.79028,6.04633Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconRefresh_2 = BtIconRefresh;
+
+var PROGRESS_BAR_ICON_MAP = {
+    refresh: BtIconRefresh_2,
+    tick: BtIconTickAlt2Px_2,
+    cross: BtIconCrossAlt2Px_2
+};
+
+var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
+    var commonProps = {
+        role: "progressbar",
+        "data-testid": "progressbar",
+        "aria-label": ariaLabel,
+        tabIndex: 0
+    };
+    var indeterminateProps = __assign$2(__assign$2({}, commonProps), { className: classNames("arc-ProgressBar-bar", "arc-ProgressBar-bar--indeterminate") });
+    var determinateProps = __assign$2(__assign$2({}, commonProps), { className: "arc-ProgressBar-bar", "aria-valuenow": progressValue, style: {
+            transform: "translateX(".concat(-100 + progressValue, "%)")
+        } });
+    return isIndeterminate ? indeterminateProps : determinateProps;
+};
+
+var ProgressBar = function (_a) {
+    var _b = _a.state, state = _b === void 0 ? "loading" : _b, _c = _a.value, value = _c === void 0 ? 0 : _c, _d = _a.isIndeterminate, isIndeterminate = _d === void 0 ? false : _d, headline = _a.headline, ariaLabel = _a.ariaLabel, action = _a.action, title = _a.title, description = _a.description, displayValue = _a.displayValue, props = __rest$2(_a, ["state", "value", "isIndeterminate", "headline", "ariaLabel", "action", "title", "description", "displayValue"]);
+    var surface = useContext(Context$3).surface;
+    var progressValue = Math.min(100, Math.max(0, value));
+    return (React__default.createElement("div", __assign$2({ "data-testid": "progress", className: classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state), {
+            "arc-ProgressBar--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs(props)),
+        React__default.createElement("div", { className: "arc-ProgressBar-titleDisplayValueContainer" },
+            React__default.createElement("div", { className: "arc-ProgressBar-titleContainer" },
+                headline && React__default.createElement(Heading, { size: "s" }, headline),
+                headline && title && React__default.createElement(VerticalSpace, { size: "4" }),
+                title && React__default.createElement(Text, null, title)),
+            displayValue && (React__default.createElement("div", { "data-testid": "display-value", className: "arc-ProgressBar-displayValueContainer" },
+                React__default.createElement(Text, null, displayValue)))),
+        React__default.createElement("div", { className: "arc-ProgressBar-container" },
+            React__default.createElement("div", { className: "arc-ProgressBar-outerBar" },
+                React__default.createElement("div", __assign$2({}, getProgressBarProps(isIndeterminate, progressValue, ariaLabel)))),
+            description && (React__default.createElement("div", { className: "arc-ProgressBar-description" },
+                React__default.createElement(Text, { tone: state !== "error" ? "supporting" : "default" }, description))),
+            action && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(VerticalSpace, { size: "8" }),
+                React__default.createElement("button", { className: "arc-ProgressBar-actionButton", onClick: action.action },
+                    React__default.createElement("div", { className: "arc-ProgressBar-actionContainer" },
+                        React__default.createElement(Text, null, action.text),
+                        action.icon && (React__default.createElement("div", { className: "arc-ProgressBar-actionIcon" },
+                            React__default.createElement(Icon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))))))))));
+};
+
+const React$8 = React__default;
+const BtIconTickVariant = props =>
+  /*#__PURE__*/ React$8.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$8.createElement("defs", null),
+    /*#__PURE__*/ React$8.createElement("path", {
+      d:
+        "M13.5,21.207,9.14648,16.85352a.5.5,0,0,1,.707-.707L13.5,19.793l8.64648-8.64649a.5.5,0,0,1,.707.707Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconTickVariant_2 = BtIconTickVariant;
+
+const React$7 = React__default;
+const BtIconCrossAlt = props =>
+  /*#__PURE__*/ React$7.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$7.createElement("defs", null),
+    /*#__PURE__*/ React$7.createElement("path", {
+      d:
+        "M16.70709,16.02l4.48236-4.49365a.4996.4996,0,1,0-.707-.70606l-4.481,4.49225-4.481-4.49225a.4996.4996,0,1,0-.707.70606L15.29584,16.02l-4.48236,4.49365a.4996.4996,0,1,0,.707.70606l4.481-4.49225,4.481,4.49225a.4996.4996,0,1,0,.707-.70606Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCrossAlt_2 = BtIconCrossAlt;
+
+const React$6 = React__default;
+const BtIconCircle = props =>
+  /*#__PURE__*/ React$6.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 32 32",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$6.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d:
+        "M9 16C9 19.87 12.13 23 16 23C19.87 23 23 19.87 23 16C23 12.13 19.87 9 16 9C12.13 9 9 12.13 9 16ZM16 7C11.03 7 7 11.03 7 16C7 20.97 11.03 25 16 25C20.97 25 25 20.97 25 16C25 11.03 20.97 7 16 7Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCircle_2 = BtIconCircle;
+
+/**
+ * Provides text for screen readers that is visually hidden.
+ */
+var VisuallyHidden = function (_a) {
+    var children = _a.children;
+    return (React__default.createElement("span", { "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, children));
+};
+
+var ProgressStepperItem = function (_a) {
+    var _b, _c;
+    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _d = _a.direction, direction = _d === void 0 ? "horizontal" : _d, _e = _a.status, status = _e === void 0 ? "todo" : _e, _f = _a.size, size = _f === void 0 ? "large" : _f, _g = _a.position, position = _g === void 0 ? "middle" : _g, isFluid = _a.isFluid, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, isExpandable = _a.isExpandable, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = __rest$2(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "position", "isFluid", "ariaLabel", "onClick", "previousStep", "isExpandable", "stepContent", "isStepContentHidden"]);
+    var surface = useContext(Context$3).surface;
+    var statusIcons = {
+        completed: BtIconTickVariant_2,
+        current: BtIconCircle_2,
+        warning: BtIconAlert_2,
+        error: BtIconCrossAlt_2
+    };
+    var onClickHandler = function (event) {
+        event.preventDefault();
+        onClick && onClick();
+    };
+    var capitaliseFirstLetter = function (word) {
+        return word.charAt(0).toUpperCase() + word.slice(1);
+    };
+    return (React__default.createElement("div", __assign$2({ className: classNames("arc-ProgressStepperItem", (_b = {
+                "arc-ProgressStepperItem--vertical": direction === "vertical",
+                "arc-ProgressStepperItem--isFluid": isFluid,
+                "arc-ProgressStepperItem--onDarkSurface": surface === "dark",
+                "arc-ProgressStepperItem--previousStepCompleted": previousStep === "completed"
+            },
+            _b["arc-ProgressStepperItem--".concat(status)] = status !== "todo",
+            _b["arc-ProgressStepperItem--".concat(size)] = size === "small",
+            _b)) }, filterDataAttrs(props)),
+        React__default.createElement("div", { className: classNames("arc-ProgressStepperItem-iconSection", (_c = {},
+                _c["arc-ProgressStepperItem-iconSection--".concat(position)] = position !== "middle",
+                _c)) },
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSectionTrailBefore" }),
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-iconWrapper" }, statusIcons[status] === undefined ? (React__default.createElement("div", { style: {
+                    width: size === "small" ? "16px" : "32px",
+                    height: size === "small" ? "16px" : "32px"
+                } })) : (React__default.createElement(Icon, { size: size === "small" ? 16 : 32, icon: statusIcons[status] }))),
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSectionTrailAfter" })),
+        React__default.createElement("div", { className: "arc-ProgressStepperItem-textSection" },
+            status !== "todo" && (React__default.createElement(VisuallyHidden, null,
+                capitaliseFirstLetter(status),
+                ":")),
+            titleHref ? (React__default.createElement("a", { href: titleHref, "aria-label": ariaLabel, className: "arc-ProgressStepperItem-title", onClick: onClickHandler }, title)) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" }, title)),
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle),
+            isExpandable && direction === "vertical" && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { className: "arc-ProgressStepperItem-nodeItem" },
+                    React__default.createElement("div", { className: "arc-ProgressStepperItem-keyline" }),
+                    stepContent && !isStepContentHidden && (React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement(VerticalSpace, { size: "8" }),
+                        stepContent))))))));
+};
+
+/** Use `ProgressStepper` to illustrate the progress of a specific task within a page, by displaying a step-by-step progress through the user journey. This is commonly used in multi-step processes or wizards.  */
+var ProgressStepper = function (_a) {
+    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, props = __rest$2(_a, ["children", "size", "isFluid", "direction", "isExpandable"]);
+    var items = React__default.Children.toArray(children);
+    var getStepStatus = function (item) {
+        var _a;
+        return (_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.status;
+    };
+    return (React__default.createElement("div", __assign$2({ className: classNames("arc-ProgressStepper", {
+            "arc-ProgressStepper--vertical": direction === "vertical"
+        }) }, filterDataAttrs(props)), items.map(function (item, index) {
+        var currentPosition = index === 0
+            ? "first"
+            : index === React__default.Children.count(children) - 1
+                ? "last"
+                : undefined;
+        return (React__default.createElement(React__default.Fragment, { key: "StepperItem-".concat(index) },
+            React__default.createElement(ProgressStepperItem, __assign$2({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, direction: direction, isExpandable: isExpandable, size: size, position: currentPosition, previousStep: getStepStatus(items[index - 1]) }, filterDataAttrs(item.props)))));
+    })));
+};
+ProgressStepper.Item = ProgressStepperItem;
+
 var RadioContext = createContext({});
 var Provider$2 = RadioContext.Provider;
 var useRadioContext = function () {
@@ -35227,6 +35711,57 @@ var Rule = function (props) {
         }) }, filterDataAttrs(props))));
 };
 
+const React$5 = React__default;
+const BtIconArrowAltUp = props =>
+  /*#__PURE__*/ React$5.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$5.createElement("defs", null),
+    /*#__PURE__*/ React$5.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"
+    })
+  );
+var BtIconArrowAltUp_2 = BtIconArrowAltUp;
+
+/**
+ * Use `ScrollToTop` to allow the user to scroll to the top of the page by clicking a button.
+ */
+var ScrollToTop = function (_a) {
+    var _b = _a.appear, appear = _b === void 0 ? "always" : _b, _c = _a.isFixed, isFixed = _c === void 0 ? true : _c, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, props = __rest$2(_a, ["appear", "isFixed", "fill", "zIndex"]);
+    var _f = useState(false), hasScrolled = _f[0], setHasScrolled = _f[1];
+    useEffect(function () {
+        var handleScroll = debounce_1(function () {
+            setHasScrolled(window.scrollY > 0);
+        }, 100);
+        window.addEventListener("scroll", handleScroll);
+        return function () { return window.removeEventListener("scroll", handleScroll); };
+    });
+    var onClick = function () {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        });
+    };
+    return (React__default.createElement("button", __assign$2({ onClick: onClick, style: {
+            zIndex: zIndex
+        }, className: classNames("arc-ScrollToTop", "arc-ScrollToTop--".concat(fill), {
+            "arc-ScrollToTop--fixed": isFixed,
+            "arc-ScrollToTop--visible": appear === "always" || (appear === "afterScroll" && hasScrolled)
+        }) }, filterDataAttrs(props)),
+        React__default.createElement("div", { className: "arc-ScrollToTop-textWrapper" },
+            React__default.createElement("span", { className: "arc-ScrollToTop-text" }, "Scroll to top")),
+        React__default.createElement("span", { className: "arc-ScrollToTop-iconContainer" },
+            React__default.createElement(Icon, { icon: BtIconArrowAltUp_2, size: 44 }))));
+};
+
 /**
  * Use `Section` to compose content into vertical page layouts.
  */
@@ -35388,10 +35923,10 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10$1(originalEventHandler, ourEv
 
 /* -------------------------------------------------------------------------------------------------
  * Slot
- * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360$1 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { children: children , ...slotProps } = props;
     const childrenArray = Children.toArray(children);
-    const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable);
+    const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable$1);
     if (slottable) {
         // the new element to render is the one passed as a child of `Slottable`
         const newElement = slottable.props.children;
@@ -35403,35 +35938,35 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10$1(originalEventHandler, ourEv
                 return /*#__PURE__*/ isValidElement(newElement) ? newElement.props.children : null;
             } else return child;
         });
-        return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
+        return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone$1, _extends({}, slotProps, {
             ref: forwardedRef
         }), /*#__PURE__*/ isValidElement(newElement) ? /*#__PURE__*/ cloneElement(newElement, undefined, newChildren) : null);
     }
-    return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
+    return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone$1, _extends({}, slotProps, {
         ref: forwardedRef
     }), children);
 });
-$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';
+$5e63c961fc1ce211$export$8c6ed5c666ac1360$1.displayName = 'Slot';
 /* -------------------------------------------------------------------------------------------------
  * SlotClone
- * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone$1 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { children: children , ...slotProps } = props;
     if (/*#__PURE__*/ isValidElement(children)) return /*#__PURE__*/ cloneElement(children, {
-        ...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
+        ...$5e63c961fc1ce211$var$mergeProps$1(slotProps, children.props),
         ref: $6ed0406888f73fc4$export$43e446d32b3d21af$2(forwardedRef, children.ref)
     });
     return Children.count(children) > 1 ? Children.only(null) : null;
 });
-$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone';
+$5e63c961fc1ce211$var$SlotClone$1.displayName = 'SlotClone';
 /* -------------------------------------------------------------------------------------------------
  * Slottable
- * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children  })=>{
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45$1 = ({ children: children  })=>{
     return /*#__PURE__*/ createElement(Fragment, null, children);
 };
-/* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable(child) {
-    return /*#__PURE__*/ isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
+/* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable$1(child) {
+    return /*#__PURE__*/ isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45$1;
 }
-function $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
+function $5e63c961fc1ce211$var$mergeProps$1(slotProps, childProps) {
     // all child props should override
     const overrideProps = {
         ...childProps
@@ -35466,7 +36001,7 @@ function $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
 // be slotted like `<CollectionItem as={Slot}>…</CollectionItem>`.
 // This is because we encountered issues with generic types that cannot be statically analysed
 // due to creating them dynamically via createCollection.
-function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
+function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2$1(name) {
     /* -----------------------------------------------------------------------------------------------
    * CollectionProvider
    * ---------------------------------------------------------------------------------------------*/ const PROVIDER_NAME = name + 'CollectionProvider';
@@ -35494,7 +36029,7 @@ function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
         const { scope: scope , children: children  } = props;
         const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
         const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$2(forwardedRef, context.collectionRef);
-        return /*#__PURE__*/ React__default.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360, {
+        return /*#__PURE__*/ React__default.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360$1, {
             ref: composedRefs
         }, children);
     });
@@ -35515,7 +36050,7 @@ function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
             return ()=>void context.itemMap.delete(ref)
             ;
         });
-        return /*#__PURE__*/ React__default.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360, {
+        return /*#__PURE__*/ React__default.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360$1, {
             [ITEM_DATA_ATTR]: '',
             ref: composedRefs
         }, children);
@@ -35549,9 +36084,9 @@ function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
     ];
 }
 
-const $f631663db3294ace$var$DirectionContext = /*#__PURE__*/ createContext(undefined);
-/* -----------------------------------------------------------------------------------------------*/ function $f631663db3294ace$export$b39126d51d94e6f3(localDir) {
-    const globalDir = useContext($f631663db3294ace$var$DirectionContext);
+const $f631663db3294ace$var$DirectionContext$1 = /*#__PURE__*/ createContext(undefined);
+/* -----------------------------------------------------------------------------------------------*/ function $f631663db3294ace$export$b39126d51d94e6f3$1(localDir) {
+    const globalDir = useContext($f631663db3294ace$var$DirectionContext$1);
     return localDir || globalDir || 'ltr';
 }
 
@@ -35578,7 +36113,7 @@ const $8927f6f2acc4f386$var$NODES$3 = [
  * -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$250ffa63cdc0d034$3 = $8927f6f2acc4f386$var$NODES$3.reduce((primitive, node)=>{
     const Node = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
         const { asChild: asChild , ...primitiveProps } = props;
-        const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : node;
+        const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360$1 : node;
         useEffect(()=>{
             window[Symbol.for('radix-ui')] = true;
         }, []);
@@ -35966,7 +36501,7 @@ const $8927f6f2acc4f386$var$NODES$2 = [
  * -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$250ffa63cdc0d034$2 = $8927f6f2acc4f386$var$NODES$2.reduce((primitive, node)=>{
     const Node = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
         const { asChild: asChild , ...primitiveProps } = props;
-        const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : node;
+        const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360$1 : node;
         useEffect(()=>{
             window[Symbol.for('radix-ui')] = true;
         }, []);
@@ -36246,14 +36781,14 @@ function $d3863c46a17e8a28$var$removeLinks(items) {
  * We use this safe version which suppresses the warning by replacing it with a noop on the server.
  *
  * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
- */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? useLayoutEffect : ()=>{};
+ */ const $9f79659886946c16$export$e5c5a5f917a5871c$1 = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? useLayoutEffect : ()=>{};
 
-const $1746a345f3d73bb7$var$useReactId = React$c['useId'.toString()] || (()=>undefined
+const $1746a345f3d73bb7$var$useReactId = React$m['useId'.toString()] || (()=>undefined
 );
 let $1746a345f3d73bb7$var$count = 0;
 function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
-    const [id, setId] = React$c.useState($1746a345f3d73bb7$var$useReactId()); // React versions older than 18 will have client-side ids only.
-    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+    const [id, setId] = React$m.useState($1746a345f3d73bb7$var$useReactId()); // React versions older than 18 will have client-side ids only.
+    $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>{
         if (!deterministicId) setId((reactId)=>reactId !== null && reactId !== void 0 ? reactId : String($1746a345f3d73bb7$var$count++)
         );
     }, [
@@ -36354,7 +36889,7 @@ const $8927f6f2acc4f386$var$NODES$1 = [
  * -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$250ffa63cdc0d034$1 = $8927f6f2acc4f386$var$NODES$1.reduce((primitive, node)=>{
     const Node = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
         const { asChild: asChild , ...primitiveProps } = props;
-        const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : node;
+        const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360$1 : node;
         useEffect(()=>{
             window[Symbol.for('radix-ui')] = true;
         }, []);
@@ -36369,7 +36904,7 @@ const $8927f6f2acc4f386$var$NODES$1 = [
     };
 }, {});
 
-const $ea1ef594cf570d83$export$439d29a4e110a164 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+const $ea1ef594cf570d83$export$439d29a4e110a164$1 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$1.span, _extends({}, props, {
         ref: forwardedRef,
         style: {
@@ -36402,7 +36937,7 @@ const $cc7e05a45900e73f$var$SELECTION_KEYS = [
 /* -------------------------------------------------------------------------------------------------
  * Select
  * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$SELECT_NAME = 'Select';
-const [$cc7e05a45900e73f$var$Collection, $cc7e05a45900e73f$var$useCollection, $cc7e05a45900e73f$var$createCollectionScope] = $e02a7d9cb1dc128c$export$c74125a8e3af6bb2($cc7e05a45900e73f$var$SELECT_NAME);
+const [$cc7e05a45900e73f$var$Collection, $cc7e05a45900e73f$var$useCollection, $cc7e05a45900e73f$var$createCollectionScope] = $e02a7d9cb1dc128c$export$c74125a8e3af6bb2$1($cc7e05a45900e73f$var$SELECT_NAME);
 const [$cc7e05a45900e73f$var$createSelectContext, $cc7e05a45900e73f$export$286727a75dc039bd] = $c512c27ab02ef895$export$50c7b4e9d9f19c1$1($cc7e05a45900e73f$var$SELECT_NAME, [
     $cc7e05a45900e73f$var$createCollectionScope
 ]);
@@ -36413,7 +36948,7 @@ const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
     const [trigger, setTrigger] = useState(null);
     const [valueNode, setValueNode] = useState(null);
     const [valueNodeHasChildren, setValueNodeHasChildren] = useState(false);
-    const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
+    const direction = $f631663db3294ace$export$b39126d51d94e6f3$1(dir);
     const [open = false, setOpen] = $71cd76cc60e0454e$export$6f32135080cb4c3$1({
         prop: openProp,
         defaultProp: defaultOpen,
@@ -36565,7 +37100,7 @@ const $cc7e05a45900e73f$export$e288731fd71264f0 = /*#__PURE__*/ forwardRef((prop
     const { onValueNodeHasChildrenChange: onValueNodeHasChildrenChange  } = context;
     const hasChildren = children !== undefined;
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$2(forwardedRef, context.onValueNodeChange);
-    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+    $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>{
         onValueNodeHasChildrenChange(hasChildren);
     }, [
         onValueNodeHasChildrenChange,
@@ -36598,7 +37133,7 @@ const $cc7e05a45900e73f$export$b2af6c9944296213 = (props)=>{
 const $cc7e05a45900e73f$export$c973a4b3cb86a03d = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$CONTENT_NAME, props.__scopeSelect);
     const [fragment, setFragment] = useState(); // setting the fragment in `useLayoutEffect` as `DocumentFragment` doesn't exist on the server
-    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+    $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>{
         setFragment(new DocumentFragment());
     }, []);
     return /*#__PURE__*/ createElement(Fragment, null, context.open ? /*#__PURE__*/ createElement($cc7e05a45900e73f$var$SelectContentImpl, _extends({}, props, {
@@ -36634,7 +37169,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ forwardRef((props,
     // the last element in the DOM (because of the `Portal`)
     $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c();
     const [contentZIndex, setContentZIndex] = useState();
-    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+    $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>{
         if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
     }, [
         content
@@ -36750,7 +37285,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ forwardRef((props,
         selectedItemText,
         context.dir
     ]);
-    $9f79659886946c16$export$e5c5a5f917a5871c(()=>position()
+    $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>position()
     , [
         position
     ]);
@@ -36886,7 +37421,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ forwardRef((props,
         shouldExpandOnScrollRef: shouldExpandOnScrollRef,
         searchRef: searchRef
     }, /*#__PURE__*/ createElement($01b9c$RemoveScroll, {
-        as: $5e63c961fc1ce211$export$8c6ed5c666ac1360,
+        as: $5e63c961fc1ce211$export$8c6ed5c666ac1360$1,
         allowPinchZoom: true
     }, /*#__PURE__*/ createElement("div", {
         ref: setContentWrapper,
@@ -37138,7 +37673,7 @@ const $cc7e05a45900e73f$export$3572fb0fb821ff49 = /*#__PURE__*/ forwardRef((prop
         textContent
     ]);
     const { onNativeOptionAdd: onNativeOptionAdd , onNativeOptionRemove: onNativeOptionRemove  } = nativeOptionsContext;
-    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+    $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>{
         onNativeOptionAdd(nativeOption);
         return ()=>onNativeOptionRemove(nativeOption)
         ;
@@ -37172,7 +37707,7 @@ const $cc7e05a45900e73f$export$d8117927658af6d7 = /*#__PURE__*/ forwardRef((prop
     const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
     const [canScrollUp1, setCanScrollUp] = useState(false);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$2(forwardedRef, contentContext.onScrollButtonChange);
-    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+    $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>{
         if (contentContext.viewport && contentContext.isPositioned) {
             const viewport = contentContext.viewport;
             function handleScroll() {
@@ -37203,7 +37738,7 @@ const $cc7e05a45900e73f$export$ff951e476c12189 = /*#__PURE__*/ forwardRef((props
     const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
     const [canScrollDown1, setCanScrollDown] = useState(false);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$2(forwardedRef, contentContext.onScrollButtonChange);
-    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+    $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>{
         if (contentContext.viewport && contentContext.isPositioned) {
             const viewport = contentContext.viewport;
             function handleScroll() {
@@ -37249,7 +37784,7 @@ const $cc7e05a45900e73f$var$SelectScrollButtonImpl = /*#__PURE__*/ forwardRef((p
     // Because it is part of the normal flow, it will push down (top button) or shrink (bottom button)
     // the viewport, potentially causing the active item to now be partially out of view.
     // We re-run the `scrollIntoView` logic to make sure it stays within the viewport.
-    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+    $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>{
         var _activeItem$ref$curre;
         const activeItem = getItems().find((item)=>item.ref.current === document.activeElement
         );
@@ -37309,7 +37844,7 @@ const $cc7e05a45900e73f$var$SelectScrollButtonImpl = /*#__PURE__*/ forwardRef((p
    *
    * We use `VisuallyHidden` rather than `display: "none"` because Safari autofill
    * won't work otherwise.
-   */ return /*#__PURE__*/ createElement($ea1ef594cf570d83$export$439d29a4e110a164, {
+   */ return /*#__PURE__*/ createElement($ea1ef594cf570d83$export$439d29a4e110a164$1, {
         asChild: true
     }, /*#__PURE__*/ createElement("select", _extends({}, selectProps, {
         ref: composedRefs,
@@ -37396,9 +37931,9 @@ const $cc7e05a45900e73f$export$c3468e2714d175fa = $cc7e05a45900e73f$export$6b919
 const $cc7e05a45900e73f$export$2f60d3ec9ad468f2 = $cc7e05a45900e73f$export$d8117927658af6d7;
 const $cc7e05a45900e73f$export$bf1aedc3039c8d63 = $cc7e05a45900e73f$export$ff951e476c12189;
 
-const React$2 = React__default;
+const React$4 = React__default;
 const BtIconChevronUp2Px = props =>
-  /*#__PURE__*/ React$2.createElement(
+  /*#__PURE__*/ React$4.createElement(
     "svg",
     Object.assign(
       {
@@ -37407,8 +37942,8 @@ const BtIconChevronUp2Px = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$2.createElement("defs", null),
-    /*#__PURE__*/ React$2.createElement("path", {
+    /*#__PURE__*/ React$4.createElement("defs", null),
+    /*#__PURE__*/ React$4.createElement("path", {
       d:
         "M28.999,23.5a.99676.99676,0,0,1-.707-.293l-12.28515-12.293L3.708,23.207A.99989.99989,0,0,1,2.294,21.793l13.71289-13.707L29.70605,21.793a.99976.99976,0,0,1-.707,1.707Z",
       fill: "currentColor"
@@ -38383,7 +38918,7 @@ function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp: defaultProp ,
 
 function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
     const [size, setSize] = useState(undefined);
-    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+    $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>{
         if (element) {
             // provide size as early as possible
             setSize({
@@ -38451,7 +38986,7 @@ const $8927f6f2acc4f386$var$NODES = [
  * -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{
     const Node = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
         const { asChild: asChild , ...primitiveProps } = props;
-        const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : node;
+        const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360$1 : node;
         useEffect(()=>{
             window[Symbol.for('radix-ui')] = true;
         }, []);
@@ -38607,27 +39142,662 @@ var Switch = function (_a) {
                     " ")))));
 };
 
-/** Use `Badge` component to visually display a small amount of information, such as notification counts or status indicators. */
-var Badge = function (_a) {
-    var _b, _c;
-    var children = _a.children, _d = _a.state, state = _d === void 0 ? "default" : _d, _e = _a.size, size = _e === void 0 ? "default" : _e, _f = _a.fill, fill = _f === void 0 ? "solid" : _f, ariaLabel = _a.ariaLabel, props = __rest$2(_a, ["children", "state", "size", "fill", "ariaLabel"]);
+/* -------------------------------------------------------------------------------------------------
+ * Slot
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { children: children , ...slotProps } = props;
+    const childrenArray = Children.toArray(children);
+    const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable);
+    if (slottable) {
+        // the new element to render is the one passed as a child of `Slottable`
+        const newElement = slottable.props.children;
+        const newChildren = childrenArray.map((child)=>{
+            if (child === slottable) {
+                // because the new element will be the one rendered, we are only interested
+                // in grabbing its children (`newElement.props.children`)
+                if (Children.count(newElement) > 1) return Children.only(null);
+                return /*#__PURE__*/ isValidElement(newElement) ? newElement.props.children : null;
+            } else return child;
+        });
+        return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
+            ref: forwardedRef
+        }), /*#__PURE__*/ isValidElement(newElement) ? /*#__PURE__*/ cloneElement(newElement, undefined, newChildren) : null);
+    }
+    return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
+        ref: forwardedRef
+    }), children);
+});
+$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';
+/* -------------------------------------------------------------------------------------------------
+ * SlotClone
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { children: children , ...slotProps } = props;
+    if (/*#__PURE__*/ isValidElement(children)) return /*#__PURE__*/ cloneElement(children, {
+        ...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
+        ref: forwardedRef ? $6ed0406888f73fc4$export$43e446d32b3d21af$4(forwardedRef, children.ref) : children.ref
+    });
+    return Children.count(children) > 1 ? Children.only(null) : null;
+});
+$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone';
+/* -------------------------------------------------------------------------------------------------
+ * Slottable
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children  })=>{
+    return /*#__PURE__*/ createElement(Fragment, null, children);
+};
+/* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable(child) {
+    return /*#__PURE__*/ isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
+}
+function $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
+    // all child props should override
+    const overrideProps = {
+        ...childProps
+    };
+    for(const propName in childProps){
+        const slotPropValue = slotProps[propName];
+        const childPropValue = childProps[propName];
+        const isHandler = /^on[A-Z]/.test(propName);
+        if (isHandler) {
+            // if the handler exists on both, we compose them
+            if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{
+                childPropValue(...args);
+                slotPropValue(...args);
+            };
+            else if (slotPropValue) overrideProps[propName] = slotPropValue;
+        } else if (propName === 'style') overrideProps[propName] = {
+            ...slotPropValue,
+            ...childPropValue
+        };
+        else if (propName === 'className') overrideProps[propName] = [
+            slotPropValue,
+            childPropValue
+        ].filter(Boolean).join(' ');
+    }
+    return {
+        ...slotProps,
+        ...overrideProps
+    };
+}
+
+// We have resorted to returning slots directly rather than exposing primitives that can then
+// be slotted like `<CollectionItem as={Slot}>…</CollectionItem>`.
+// This is because we encountered issues with generic types that cannot be statically analysed
+// due to creating them dynamically via createCollection.
+function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
+    /* -----------------------------------------------------------------------------------------------
+   * CollectionProvider
+   * ---------------------------------------------------------------------------------------------*/ const PROVIDER_NAME = name + 'CollectionProvider';
+    const [createCollectionContext, createCollectionScope] = $c512c27ab02ef895$export$50c7b4e9d9f19c1$2(PROVIDER_NAME);
+    const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, {
+        collectionRef: {
+            current: null
+        },
+        itemMap: new Map()
+    });
+    const CollectionProvider = (props)=>{
+        const { scope: scope , children: children  } = props;
+        const ref = React__default.useRef(null);
+        const itemMap = React__default.useRef(new Map()).current;
+        return /*#__PURE__*/ React__default.createElement(CollectionProviderImpl, {
+            scope: scope,
+            itemMap: itemMap,
+            collectionRef: ref
+        }, children);
+    };
+    /* -----------------------------------------------------------------------------------------------
+   * CollectionSlot
+   * ---------------------------------------------------------------------------------------------*/ const COLLECTION_SLOT_NAME = name + 'CollectionSlot';
+    const CollectionSlot = /*#__PURE__*/ React__default.forwardRef((props, forwardedRef)=>{
+        const { scope: scope , children: children  } = props;
+        const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
+        const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$3(forwardedRef, context.collectionRef);
+        return /*#__PURE__*/ React__default.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360, {
+            ref: composedRefs
+        }, children);
+    });
+    /* -----------------------------------------------------------------------------------------------
+   * CollectionItem
+   * ---------------------------------------------------------------------------------------------*/ const ITEM_SLOT_NAME = name + 'CollectionItemSlot';
+    const ITEM_DATA_ATTR = 'data-radix-collection-item';
+    const CollectionItemSlot = /*#__PURE__*/ React__default.forwardRef((props, forwardedRef)=>{
+        const { scope: scope , children: children , ...itemData } = props;
+        const ref = React__default.useRef(null);
+        const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$3(forwardedRef, ref);
+        const context = useCollectionContext(ITEM_SLOT_NAME, scope);
+        React__default.useEffect(()=>{
+            context.itemMap.set(ref, {
+                ref: ref,
+                ...itemData
+            });
+            return ()=>void context.itemMap.delete(ref)
+            ;
+        });
+        return /*#__PURE__*/ React__default.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360, {
+            [ITEM_DATA_ATTR]: '',
+            ref: composedRefs
+        }, children);
+    });
+    /* -----------------------------------------------------------------------------------------------
+   * useCollection
+   * ---------------------------------------------------------------------------------------------*/ function useCollection(scope) {
+        const context = useCollectionContext(name + 'CollectionConsumer', scope);
+        const getItems = React__default.useCallback(()=>{
+            const collectionNode = context.collectionRef.current;
+            if (!collectionNode) return [];
+            const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
+            const items = Array.from(context.itemMap.values());
+            const orderedItems = items.sort((a, b)=>orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
+            );
+            return orderedItems;
+        }, [
+            context.collectionRef,
+            context.itemMap
+        ]);
+        return getItems;
+    }
+    return [
+        {
+            Provider: CollectionProvider,
+            Slot: CollectionSlot,
+            ItemSlot: CollectionItemSlot
+        },
+        useCollection,
+        createCollectionScope
+    ];
+}
+
+const $f631663db3294ace$var$DirectionContext = /*#__PURE__*/ createContext(undefined);
+/* -----------------------------------------------------------------------------------------------*/ function $f631663db3294ace$export$b39126d51d94e6f3(localDir) {
+    const globalDir = useContext($f631663db3294ace$var$DirectionContext);
+    return localDir || globalDir || 'ltr';
+}
+
+const $d7bdfb9eb0fdf311$var$ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
+const $d7bdfb9eb0fdf311$var$EVENT_OPTIONS = {
+    bubbles: false,
+    cancelable: true
+};
+/* -------------------------------------------------------------------------------------------------
+ * RovingFocusGroup
+ * -----------------------------------------------------------------------------------------------*/ const $d7bdfb9eb0fdf311$var$GROUP_NAME = 'RovingFocusGroup';
+const [$d7bdfb9eb0fdf311$var$Collection, $d7bdfb9eb0fdf311$var$useCollection, $d7bdfb9eb0fdf311$var$createCollectionScope] = $e02a7d9cb1dc128c$export$c74125a8e3af6bb2($d7bdfb9eb0fdf311$var$GROUP_NAME);
+const [$d7bdfb9eb0fdf311$var$createRovingFocusGroupContext, $d7bdfb9eb0fdf311$export$c7109489551a4f4] = $c512c27ab02ef895$export$50c7b4e9d9f19c1$2($d7bdfb9eb0fdf311$var$GROUP_NAME, [
+    $d7bdfb9eb0fdf311$var$createCollectionScope
+]);
+const [$d7bdfb9eb0fdf311$var$RovingFocusProvider, $d7bdfb9eb0fdf311$var$useRovingFocusContext] = $d7bdfb9eb0fdf311$var$createRovingFocusGroupContext($d7bdfb9eb0fdf311$var$GROUP_NAME);
+const $d7bdfb9eb0fdf311$export$8699f7c8af148338 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    return /*#__PURE__*/ createElement($d7bdfb9eb0fdf311$var$Collection.Provider, {
+        scope: props.__scopeRovingFocusGroup
+    }, /*#__PURE__*/ createElement($d7bdfb9eb0fdf311$var$Collection.Slot, {
+        scope: props.__scopeRovingFocusGroup
+    }, /*#__PURE__*/ createElement($d7bdfb9eb0fdf311$var$RovingFocusGroupImpl, _extends({}, props, {
+        ref: forwardedRef
+    }))));
+});
+/* -----------------------------------------------------------------------------------------------*/ const $d7bdfb9eb0fdf311$var$RovingFocusGroupImpl = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeRovingFocusGroup: __scopeRovingFocusGroup , orientation: orientation , loop: loop = false , dir: dir , currentTabStopId: currentTabStopIdProp , defaultCurrentTabStopId: defaultCurrentTabStopId , onCurrentTabStopIdChange: onCurrentTabStopIdChange , onEntryFocus: onEntryFocus , ...groupProps } = props;
+    const ref = useRef(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$3(forwardedRef, ref);
+    const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
+    const [currentTabStopId = null, setCurrentTabStopId] = $71cd76cc60e0454e$export$6f32135080cb4c3$2({
+        prop: currentTabStopIdProp,
+        defaultProp: defaultCurrentTabStopId,
+        onChange: onCurrentTabStopIdChange
+    });
+    const [isTabbingBackOut, setIsTabbingBackOut] = useState(false);
+    const handleEntryFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$3(onEntryFocus);
+    const getItems = $d7bdfb9eb0fdf311$var$useCollection(__scopeRovingFocusGroup);
+    const isClickFocusRef = useRef(false);
+    const [focusableItemsCount, setFocusableItemsCount] = useState(0);
+    useEffect(()=>{
+        const node = ref.current;
+        if (node) {
+            node.addEventListener($d7bdfb9eb0fdf311$var$ENTRY_FOCUS, handleEntryFocus);
+            return ()=>node.removeEventListener($d7bdfb9eb0fdf311$var$ENTRY_FOCUS, handleEntryFocus)
+            ;
+        }
+    }, [
+        handleEntryFocus
+    ]);
+    return /*#__PURE__*/ createElement($d7bdfb9eb0fdf311$var$RovingFocusProvider, {
+        scope: __scopeRovingFocusGroup,
+        orientation: orientation,
+        dir: direction,
+        loop: loop,
+        currentTabStopId: currentTabStopId,
+        onItemFocus: useCallback((tabStopId)=>setCurrentTabStopId(tabStopId)
+        , [
+            setCurrentTabStopId
+        ]),
+        onItemShiftTab: useCallback(()=>setIsTabbingBackOut(true)
+        , []),
+        onFocusableItemAdd: useCallback(()=>setFocusableItemsCount((prevCount)=>prevCount + 1
+            )
+        , []),
+        onFocusableItemRemove: useCallback(()=>setFocusableItemsCount((prevCount)=>prevCount - 1
+            )
+        , [])
+    }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$4.div, _extends({
+        tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
+        "data-orientation": orientation
+    }, groupProps, {
+        ref: composedRefs,
+        style: {
+            outline: 'none',
+            ...props.style
+        },
+        onMouseDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onMouseDown, ()=>{
+            isClickFocusRef.current = true;
+        }),
+        onFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onFocus, (event)=>{
+            // We normally wouldn't need this check, because we already check
+            // that the focus is on the current target and not bubbling to it.
+            // We do this because Safari doesn't focus buttons when clicked, and
+            // instead, the wrapper will get focused and not through a bubbling event.
+            const isKeyboardFocus = !isClickFocusRef.current;
+            if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+                const entryFocusEvent = new CustomEvent($d7bdfb9eb0fdf311$var$ENTRY_FOCUS, $d7bdfb9eb0fdf311$var$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
+                    );
+                    $d7bdfb9eb0fdf311$var$focusFirst(candidateNodes);
+                }
+            }
+            isClickFocusRef.current = false;
+        }),
+        onBlur: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onBlur, ()=>setIsTabbingBackOut(false)
+        )
+    })));
+});
+/* -------------------------------------------------------------------------------------------------
+ * RovingFocusGroupItem
+ * -----------------------------------------------------------------------------------------------*/ const $d7bdfb9eb0fdf311$var$ITEM_NAME = 'RovingFocusGroupItem';
+const $d7bdfb9eb0fdf311$export$ab9df7c53fe8454 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeRovingFocusGroup: __scopeRovingFocusGroup , focusable: focusable = true , active: active = false , tabStopId: tabStopId , ...itemProps } = props;
+    const autoId = $1746a345f3d73bb7$export$f680877a34711e37$1();
+    const id = tabStopId || autoId;
+    const context = $d7bdfb9eb0fdf311$var$useRovingFocusContext($d7bdfb9eb0fdf311$var$ITEM_NAME, __scopeRovingFocusGroup);
+    const isCurrentTabStop = context.currentTabStopId === id;
+    const getItems = $d7bdfb9eb0fdf311$var$useCollection(__scopeRovingFocusGroup);
+    const { onFocusableItemAdd: onFocusableItemAdd , onFocusableItemRemove: onFocusableItemRemove  } = context;
+    useEffect(()=>{
+        if (focusable) {
+            onFocusableItemAdd();
+            return ()=>onFocusableItemRemove()
+            ;
+        }
+    }, [
+        focusable,
+        onFocusableItemAdd,
+        onFocusableItemRemove
+    ]);
+    return /*#__PURE__*/ createElement($d7bdfb9eb0fdf311$var$Collection.ItemSlot, {
+        scope: __scopeRovingFocusGroup,
+        id: id,
+        focusable: focusable,
+        active: active
+    }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$4.span, _extends({
+        tabIndex: isCurrentTabStop ? 0 : -1,
+        "data-orientation": context.orientation
+    }, itemProps, {
+        ref: forwardedRef,
+        onMouseDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onMouseDown, (event)=>{
+            // We prevent focusing non-focusable items on `mousedown`.
+            // Even though the item has tabIndex={-1}, that only means take it out of the tab order.
+            if (!focusable) event.preventDefault(); // Safari doesn't focus a button when clicked so we run our logic on mousedown also
+            else context.onItemFocus(id);
+        }),
+        onFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onFocus, ()=>context.onItemFocus(id)
+        ),
+        onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onKeyDown, (event)=>{
+            if (event.key === 'Tab' && event.shiftKey) {
+                context.onItemShiftTab();
+                return;
+            }
+            if (event.target !== event.currentTarget) return;
+            const focusIntent = $d7bdfb9eb0fdf311$var$getFocusIntent(event, context.orientation, context.dir);
+            if (focusIntent !== undefined) {
+                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 ? $d7bdfb9eb0fdf311$var$wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
+                }
+                /**
+         * Imperative focus during keydown is risky so we prevent React's batching updates
+         * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
+         */ setTimeout(()=>$d7bdfb9eb0fdf311$var$focusFirst(candidateNodes)
+                );
+            }
+        })
+    })));
+});
+/* -----------------------------------------------------------------------------------------------*/ // prettier-ignore
+const $d7bdfb9eb0fdf311$var$MAP_KEY_TO_FOCUS_INTENT = {
+    ArrowLeft: 'prev',
+    ArrowUp: 'prev',
+    ArrowRight: 'next',
+    ArrowDown: 'next',
+    PageUp: 'first',
+    Home: 'first',
+    PageDown: 'last',
+    End: 'last'
+};
+function $d7bdfb9eb0fdf311$var$getDirectionAwareKey(key, dir) {
+    if (dir !== 'rtl') return key;
+    return key === 'ArrowLeft' ? 'ArrowRight' : key === 'ArrowRight' ? 'ArrowLeft' : key;
+}
+function $d7bdfb9eb0fdf311$var$getFocusIntent(event, orientation, dir) {
+    const key = $d7bdfb9eb0fdf311$var$getDirectionAwareKey(event.key, dir);
+    if (orientation === 'vertical' && [
+        'ArrowLeft',
+        'ArrowRight'
+    ].includes(key)) return undefined;
+    if (orientation === 'horizontal' && [
+        'ArrowUp',
+        'ArrowDown'
+    ].includes(key)) return undefined;
+    return $d7bdfb9eb0fdf311$var$MAP_KEY_TO_FOCUS_INTENT[key];
+}
+function $d7bdfb9eb0fdf311$var$focusFirst(candidates) {
+    const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+    for (const candidate of candidates){
+        // if focus is already where we want to go, we don't want to keep going through the candidates
+        if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+        candidate.focus();
+        if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+    }
+}
+/**
+ * Wraps an array around itself at a given start index
+ * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
+ */ function $d7bdfb9eb0fdf311$var$wrapArray(array, startIndex) {
+    return array.map((_, index)=>array[(startIndex + index) % array.length]
+    );
+}
+const $d7bdfb9eb0fdf311$export$be92b6f5f03c0fe9 = $d7bdfb9eb0fdf311$export$8699f7c8af148338;
+const $d7bdfb9eb0fdf311$export$6d08773d2e66f8f2 = $d7bdfb9eb0fdf311$export$ab9df7c53fe8454;
+
+/* -------------------------------------------------------------------------------------------------
+ * Tabs
+ * -----------------------------------------------------------------------------------------------*/ const $69cb30bb0017df05$var$TABS_NAME = 'Tabs';
+const [$69cb30bb0017df05$var$createTabsContext, $69cb30bb0017df05$export$355f5bd209d7b13a] = $c512c27ab02ef895$export$50c7b4e9d9f19c1$2($69cb30bb0017df05$var$TABS_NAME, [
+    $d7bdfb9eb0fdf311$export$c7109489551a4f4
+]);
+const $69cb30bb0017df05$var$useRovingFocusGroupScope = $d7bdfb9eb0fdf311$export$c7109489551a4f4();
+const [$69cb30bb0017df05$var$TabsProvider, $69cb30bb0017df05$var$useTabsContext] = $69cb30bb0017df05$var$createTabsContext($69cb30bb0017df05$var$TABS_NAME);
+const $69cb30bb0017df05$export$b2539bed5023c21c = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeTabs: __scopeTabs , value: valueProp , onValueChange: onValueChange , defaultValue: defaultValue , orientation: orientation = 'horizontal' , dir: dir , activationMode: activationMode = 'automatic' , ...tabsProps } = props;
+    const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
+    const [value, setValue] = $71cd76cc60e0454e$export$6f32135080cb4c3$2({
+        prop: valueProp,
+        onChange: onValueChange,
+        defaultProp: defaultValue
+    });
+    return /*#__PURE__*/ createElement($69cb30bb0017df05$var$TabsProvider, {
+        scope: __scopeTabs,
+        baseId: $1746a345f3d73bb7$export$f680877a34711e37$1(),
+        value: value,
+        onValueChange: setValue,
+        orientation: orientation,
+        dir: direction,
+        activationMode: activationMode
+    }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$4.div, _extends({
+        dir: direction,
+        "data-orientation": orientation
+    }, tabsProps, {
+        ref: forwardedRef
+    })));
+});
+/* -------------------------------------------------------------------------------------------------
+ * TabsList
+ * -----------------------------------------------------------------------------------------------*/ const $69cb30bb0017df05$var$TAB_LIST_NAME = 'TabsList';
+const $69cb30bb0017df05$export$9712d22edc0d78c1 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeTabs: __scopeTabs , loop: loop = true , ...listProps } = props;
+    const context = $69cb30bb0017df05$var$useTabsContext($69cb30bb0017df05$var$TAB_LIST_NAME, __scopeTabs);
+    const rovingFocusGroupScope = $69cb30bb0017df05$var$useRovingFocusGroupScope(__scopeTabs);
+    return /*#__PURE__*/ createElement($d7bdfb9eb0fdf311$export$be92b6f5f03c0fe9, _extends({
+        asChild: true
+    }, rovingFocusGroupScope, {
+        orientation: context.orientation,
+        dir: context.dir,
+        loop: loop
+    }), /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$4.div, _extends({
+        role: "tablist",
+        "aria-orientation": context.orientation
+    }, listProps, {
+        ref: forwardedRef
+    })));
+});
+/* -------------------------------------------------------------------------------------------------
+ * TabsTrigger
+ * -----------------------------------------------------------------------------------------------*/ const $69cb30bb0017df05$var$TRIGGER_NAME = 'TabsTrigger';
+const $69cb30bb0017df05$export$8114b9fdfdf9f3ba = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeTabs: __scopeTabs , value: value , disabled: disabled = false , ...triggerProps } = props;
+    const context = $69cb30bb0017df05$var$useTabsContext($69cb30bb0017df05$var$TRIGGER_NAME, __scopeTabs);
+    const rovingFocusGroupScope = $69cb30bb0017df05$var$useRovingFocusGroupScope(__scopeTabs);
+    const triggerId = $69cb30bb0017df05$var$makeTriggerId(context.baseId, value);
+    const contentId = $69cb30bb0017df05$var$makeContentId(context.baseId, value);
+    const isSelected = value === context.value;
+    return /*#__PURE__*/ createElement($d7bdfb9eb0fdf311$export$6d08773d2e66f8f2, _extends({
+        asChild: true
+    }, rovingFocusGroupScope, {
+        focusable: !disabled,
+        active: isSelected
+    }), /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$4.button, _extends({
+        type: "button",
+        role: "tab",
+        "aria-selected": isSelected,
+        "aria-controls": contentId,
+        "data-state": isSelected ? 'active' : 'inactive',
+        "data-disabled": disabled ? '' : undefined,
+        disabled: disabled,
+        id: triggerId
+    }, triggerProps, {
+        ref: forwardedRef,
+        onMouseDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onMouseDown, (event)=>{
+            // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
+            // but not when the control key is pressed (avoiding MacOS right click)
+            if (!disabled && event.button === 0 && event.ctrlKey === false) context.onValueChange(value);
+            else // prevent focus to avoid accidental activation
+            event.preventDefault();
+        }),
+        onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onKeyDown, (event)=>{
+            if ([
+                ' ',
+                'Enter'
+            ].includes(event.key)) context.onValueChange(value);
+        }),
+        onFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onFocus, ()=>{
+            // handle "automatic" activation if necessary
+            // ie. activate tab following focus
+            const isAutomaticActivation = context.activationMode !== 'manual';
+            if (!isSelected && !disabled && isAutomaticActivation) context.onValueChange(value);
+        })
+    })));
+});
+/* -------------------------------------------------------------------------------------------------
+ * TabsContent
+ * -----------------------------------------------------------------------------------------------*/ const $69cb30bb0017df05$var$CONTENT_NAME = 'TabsContent';
+const $69cb30bb0017df05$export$bd905d70e8fd2ebb = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeTabs: __scopeTabs , value: value , forceMount: forceMount , children: children , ...contentProps } = props;
+    const context = $69cb30bb0017df05$var$useTabsContext($69cb30bb0017df05$var$CONTENT_NAME, __scopeTabs);
+    const triggerId = $69cb30bb0017df05$var$makeTriggerId(context.baseId, value);
+    const contentId = $69cb30bb0017df05$var$makeContentId(context.baseId, value);
+    const isSelected = value === context.value;
+    const isMountAnimationPreventedRef = useRef(isSelected);
+    useEffect(()=>{
+        const rAF = requestAnimationFrame(()=>isMountAnimationPreventedRef.current = false
+        );
+        return ()=>cancelAnimationFrame(rAF)
+        ;
+    }, []);
+    return /*#__PURE__*/ createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
+        present: forceMount || isSelected
+    }, ({ present: present  })=>/*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$4.div, _extends({
+            "data-state": isSelected ? 'active' : 'inactive',
+            "data-orientation": context.orientation,
+            role: "tabpanel",
+            "aria-labelledby": triggerId,
+            hidden: !present,
+            id: contentId,
+            tabIndex: 0
+        }, contentProps, {
+            ref: forwardedRef,
+            style: {
+                ...props.style,
+                animationDuration: isMountAnimationPreventedRef.current ? '0s' : undefined
+            }
+        }), present && children)
+    );
+});
+/* ---------------------------------------------------------------------------------------------- */ function $69cb30bb0017df05$var$makeTriggerId(baseId, value) {
+    return `${baseId}-trigger-${value}`;
+}
+function $69cb30bb0017df05$var$makeContentId(baseId, value) {
+    return `${baseId}-content-${value}`;
+}
+const $69cb30bb0017df05$export$be92b6f5f03c0fe9 = $69cb30bb0017df05$export$b2539bed5023c21c;
+const $69cb30bb0017df05$export$54c2e3dc7acea9f5 = $69cb30bb0017df05$export$9712d22edc0d78c1;
+const $69cb30bb0017df05$export$41fb9f06171c75f4 = $69cb30bb0017df05$export$8114b9fdfdf9f3ba;
+const $69cb30bb0017df05$export$7c6e2c02157bb7d2 = $69cb30bb0017df05$export$bd905d70e8fd2ebb;
+
+var Tab = function (_a) {
+    var label = _a.label, value = _a.value, icon = _a.icon, iconActive = _a.iconActive, props = __rest$2(_a, ["label", "value", "icon", "iconActive"]);
     var surface = useContext(Context$3).surface;
-    return (React__default.createElement("div", __assign$2({}, (ariaLabel && { "aria-label": ariaLabel }), { className: classNames((_b = {
-                "arc-Badge": true,
-                "arc-Badge--onDarkSurface": surface === "dark",
-                "arc-Badge--large": size === "large",
-                "arc-Badge--outline": fill === "outlined"
-            },
-            _b[suffixModifier("arc-Badge--state", state)] = state !== "default",
-            _b)), role: state === "error" ? "alert" : "status" }, filterDataAttrs(props)),
-        React__default.createElement("div", { className: classNames((_c = {
-                    "arc-Badge-text": true
-                },
-                _c[suffixModifier("arc-Badge--text", state)] = state !== "default",
-                _c)) },
-            React__default.createElement(Text, { size: size === "default" ? "xs" : "m" }, children))));
+    return (React__default.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, __assign$2({ className: classNames("arc-Tab-trigger", {
+            "arc-Tab-trigger--onDarkSurface": surface === "dark",
+            "arc-Tab-trigger--hasIcon": icon || iconActive
+        }), value: value }, filterDataAttrs(props)),
+        icon && (React__default.createElement("div", { className: "arc-Tab-triggerIcon", "data-testid": "arc-Tab-TriggerIcon" },
+            React__default.createElement(Icon, { icon: icon }))),
+        iconActive && (React__default.createElement("div", { className: "arc-Tab-triggerIcon arc-Tab-triggerIcon--active", "data-testid": "arc-Tab-TriggerIconActive" },
+            React__default.createElement(Icon, { icon: iconActive }))),
+        label));
+};
+
+var TabContent = function (_a) {
+    var children = _a.children, value = _a.value;
+    return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-Tab-content", value: value }, children));
+};
+
+const React$3 = React__default;
+const BtIconArrowRightFill = props =>
+  /*#__PURE__*/ React$3.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$3.createElement("defs", null),
+    /*#__PURE__*/ React$3.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"
+    })
+  );
+var BtIconArrowRightFill_2 = BtIconArrowRightFill;
+
+const React$2 = React__default;
+const BtIconArrowLeftFill = props =>
+  /*#__PURE__*/ React$2.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$2.createElement("defs", null),
+    /*#__PURE__*/ React$2.createElement("path", {
+      d:
+        "M30,16A14,14,0,1,0,16,30,14,14,0,0,0,30,16ZM13.14648,20.35352,8.793,16l4.35351-4.35352a.5.5,0,0,1,.707.707L10.707,15.5H22.5a.5.5,0,0,1,0,1H10.707l3.14649,3.14648a.5.5,0,0,1-.707.707Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconArrowLeftFill_2 = BtIconArrowLeftFill;
+
+var TabsList = function (_a) {
+    var children = _a.children, type = _a.type, isJustified = _a.isJustified, ariaLabel = _a.ariaLabel, props = __rest$2(_a, ["children", "type", "isJustified", "ariaLabel"]);
+    var surface = useContext(Context$3).surface;
+    var tabsRef = useRef(null);
+    var _b = useState(false), rightOverflow = _b[0], setRightOverflow = _b[1];
+    var _c = useState(false), leftOverflow = _c[0], setLeftOverflow = _c[1];
+    var checkOverflow = function (element) {
+        if (element) {
+            if (element.scrollWidth > element.clientWidth) {
+                setRightOverflow(true);
+            }
+            if (element.scrollLeft + 10 >=
+                element.scrollWidth - element.clientWidth) {
+                setRightOverflow(false);
+            }
+            if (element.scrollLeft >= 1) {
+                setLeftOverflow(true);
+            }
+            else {
+                setLeftOverflow(false);
+            }
+        }
+    };
+    useEffect(function () {
+        checkOverflow(tabsRef.current);
+    }, []);
+    var scrollTabs = function (scrollAmount) {
+        if (tabsRef.current) {
+            tabsRef.current.scrollLeft += scrollAmount;
+        }
+    };
+    var onScroll = function (event) {
+        checkOverflow(event.currentTarget);
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, __assign$2({ onScroll: onScroll, className: classNames("arc-Tabs", {
+                "arc-Tabs--contained": type === "contained",
+                "arc-Tabs--isJustified": isJustified,
+                "arc-Tabs--onDarkSurface": surface === "dark"
+            }), ref: tabsRef, "aria-label": ariaLabel }, filterDataAttrs(props)), children),
+        leftOverflow && (React__default.createElement("button", { className: classNames("arc-Tabs-overflowIcon arc-Tabs-overflowIcon--left", {
+                "arc-Tabs-overflowIcon--onDarkSurface": surface === "dark"
+            }), onClick: function () { return scrollTabs(-300); }, "aria-label": "Scroll Tabs Left", "data-testid": "arc-Tabs-overflowIconLeft" },
+            React__default.createElement(Icon, { icon: BtIconArrowLeftFill_2, size: 40, color: "brand" }))),
+        rightOverflow && (React__default.createElement("button", { className: classNames("arc-Tabs-overflowIcon", {
+                "arc-Tabs-overflowIcon--onDarkSurface": surface === "dark"
+            }), onClick: function () { return scrollTabs(300); }, "aria-label": "Scroll Tabs Right", "data-testid": "arc-Tabs-overflowIconRight" },
+            React__default.createElement(Icon, { icon: BtIconArrowRightFill_2, size: 40, color: "brand" })))));
 };
 
+var Tabs = function (_a) {
+    var children = _a.children, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, activationMode = _a.activationMode, props = __rest$2(_a, ["children", "defaultValue", "onValueChange", "activationMode"]);
+    return (React__default.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, __assign$2({ className: "arc-Tabs-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode }, filterDataAttrs(props)), children));
+};
+Tab.displayName = "Tabs.Tab";
+TabsList.displayName = "Tabs.List";
+TabContent.displayName = "Tabs.Content";
+Tabs.Tab = Tab;
+Tabs.List = TabsList;
+Tabs.Content = TabContent;
+
 const React$1 = React__default;
 const BtIconCross = props =>
   /*#__PURE__*/ React$1.createElement(
@@ -38706,13 +39876,45 @@ var Tag = function (_a) {
             React__default.createElement(Icon, { icon: BtIconCrossFill_2, color: "brand", size: 20 })))));
 };
 
-/**
- * Provides text for screen readers that is visually hidden.
- */
-var VisuallyHidden = function (_a) {
-    var children = _a.children;
-    return (React__default.createElement("span", { "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, children));
-};
+/** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
+var TextArea = forwardRef(function (_a, ref) {
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = __rest$2(_a, ["defaultValue", "errorMessage", "helper", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText"]);
+    var surface = useContext(Context$3).surface;
+    var ourRef = useRef(null);
+    var _j = useState((value && value.length) || (defaultValue && defaultValue.length) || 0), characterCount = _j[0], setCharacterCount = _j[1];
+    var setSmartHeight = function (el) {
+        el.style.height = "auto";
+        el.style.height = "".concat(parseInt(getComputedStyle(el).getPropertyValue("border-width")) *
+            2 +
+            el.scrollHeight, "px");
+    };
+    var getTextAreaRef = function (elementRef) {
+        ourRef.current = elementRef;
+        if (ref && typeof ref === "object") {
+            ref.current = elementRef;
+        }
+        if (ref && typeof ref === "function") {
+            ref(elementRef);
+        }
+    };
+    var handleOnChange = function (e) {
+        resize === "auto" && ourRef.current && setSmartHeight(ourRef.current);
+        onChange && onChange(e);
+        setCharacterCount(e.target.value.length);
+    };
+    return (React__default.createElement(FormControl, __assign$2({ errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, 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" },
+                React__default.createElement("span", { className: "arc-TextArea-characterCount" },
+                    characterCount,
+                    " / ",
+                    maxLength)))) }, filterDataAttrs(props)),
+        React__default.createElement("textarea", { id: id, className: classNames("arc-TextArea", {
+                "arc-TextArea--noResize": resize !== "manual",
+                "arc-TextArea--onDarkSurface": surface === "dark",
+                "arc-TextArea--invalid": errorMessage
+            }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef })));
+});
 
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.
@@ -38751,45 +39953,724 @@ var TextInput = forwardRef(function (_a, ref) {
                                 : "Your password is hidden")))))))));
 });
 
-/** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
-var TextArea = forwardRef(function (_a, ref) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = __rest$2(_a, ["defaultValue", "errorMessage", "helper", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText"]);
-    var surface = useContext(Context$3).surface;
-    var ourRef = useRef(null);
-    var _j = useState((value && value.length) || (defaultValue && defaultValue.length) || 0), characterCount = _j[0], setCharacterCount = _j[1];
-    var setSmartHeight = function (el) {
-        el.style.height = "auto";
-        el.style.height = "".concat(parseInt(getComputedStyle(el).getPropertyValue("border-width")) *
-            2 +
-            el.scrollHeight, "px");
-    };
-    var getTextAreaRef = function (elementRef) {
-        ourRef.current = elementRef;
-        if (ref && typeof ref === "object") {
-            ref.current = elementRef;
+/**
+ * On the server, React emits a warning when calling `useLayoutEffect`.
+ * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
+ * We use this safe version which suppresses the warning by replacing it with a noop on the server.
+ *
+ * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+ */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? useLayoutEffect : ()=>{};
+
+const $ea1ef594cf570d83$export$439d29a4e110a164 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$4.span, _extends({}, props, {
+        ref: forwardedRef,
+        style: {
+            // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
+            position: 'absolute',
+            border: 0,
+            width: 1,
+            height: 1,
+            padding: 0,
+            margin: -1,
+            overflow: 'hidden',
+            clip: 'rect(0, 0, 0, 0)',
+            whiteSpace: 'nowrap',
+            wordWrap: 'normal',
+            ...props.style
         }
-        if (ref && typeof ref === "function") {
-            ref(elementRef);
+    }));
+});
+
+/* -------------------------------------------------------------------------------------------------
+ * ToastProvider
+ * -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$PROVIDER_NAME = 'ToastProvider';
+const [$054eb8030ebde76e$var$Collection, $054eb8030ebde76e$var$useCollection, $054eb8030ebde76e$var$createCollectionScope] = $e02a7d9cb1dc128c$export$c74125a8e3af6bb2('Toast');
+const [$054eb8030ebde76e$var$createToastContext, $054eb8030ebde76e$export$8a359da18fbc9073] = $c512c27ab02ef895$export$50c7b4e9d9f19c1$2('Toast', [
+    $054eb8030ebde76e$var$createCollectionScope
+]);
+const [$054eb8030ebde76e$var$ToastProviderProvider, $054eb8030ebde76e$var$useToastProviderContext] = $054eb8030ebde76e$var$createToastContext($054eb8030ebde76e$var$PROVIDER_NAME);
+const $054eb8030ebde76e$export$f5d03d415824e0e = (props)=>{
+    const { __scopeToast: __scopeToast , label: label = 'Notification' , duration: duration = 5000 , swipeDirection: swipeDirection = 'right' , swipeThreshold: swipeThreshold = 50 , children: children  } = props;
+    const [viewport, setViewport] = useState(null);
+    const [toastCount, setToastCount] = useState(0);
+    const isFocusedToastEscapeKeyDownRef = useRef(false);
+    const isClosePausedRef = useRef(false);
+    return /*#__PURE__*/ createElement($054eb8030ebde76e$var$Collection.Provider, {
+        scope: __scopeToast
+    }, /*#__PURE__*/ createElement($054eb8030ebde76e$var$ToastProviderProvider, {
+        scope: __scopeToast,
+        label: label,
+        duration: duration,
+        swipeDirection: swipeDirection,
+        swipeThreshold: swipeThreshold,
+        toastCount: toastCount,
+        viewport: viewport,
+        onViewportChange: setViewport,
+        onToastAdd: useCallback(()=>setToastCount((prevCount)=>prevCount + 1
+            )
+        , []),
+        onToastRemove: useCallback(()=>setToastCount((prevCount)=>prevCount - 1
+            )
+        , []),
+        isFocusedToastEscapeKeyDownRef: isFocusedToastEscapeKeyDownRef,
+        isClosePausedRef: isClosePausedRef
+    }, children));
+};
+$054eb8030ebde76e$export$f5d03d415824e0e.propTypes = {
+    label (props) {
+        if (props.label && typeof props.label === 'string' && !props.label.trim()) {
+            const error = `Invalid prop \`label\` supplied to \`${$054eb8030ebde76e$var$PROVIDER_NAME}\`. Expected non-empty \`string\`.`;
+            return new Error(error);
         }
-    };
-    var handleOnChange = function (e) {
-        resize === "auto" && ourRef.current && setSmartHeight(ourRef.current);
-        onChange && onChange(e);
-        setCharacterCount(e.target.value.length);
-    };
-    return (React__default.createElement(FormControl, __assign$2({ errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, 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" },
-                React__default.createElement("span", { className: "arc-TextArea-characterCount" },
-                    characterCount,
-                    " / ",
-                    maxLength)))) }, filterDataAttrs(props)),
-        React__default.createElement("textarea", { id: id, className: classNames("arc-TextArea", {
-                "arc-TextArea--noResize": resize !== "manual",
-                "arc-TextArea--onDarkSurface": surface === "dark",
-                "arc-TextArea--invalid": errorMessage
-            }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef })));
+        return null;
+    }
+};
+/* -------------------------------------------------------------------------------------------------
+ * ToastViewport
+ * -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$VIEWPORT_NAME = 'ToastViewport';
+const $054eb8030ebde76e$var$VIEWPORT_DEFAULT_HOTKEY = [
+    'F8'
+];
+const $054eb8030ebde76e$var$VIEWPORT_PAUSE = 'toast.viewportPause';
+const $054eb8030ebde76e$var$VIEWPORT_RESUME = 'toast.viewportResume';
+const $054eb8030ebde76e$export$6192c2425ecfd989 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeToast: __scopeToast , hotkey: hotkey = $054eb8030ebde76e$var$VIEWPORT_DEFAULT_HOTKEY , label: label = 'Notifications ({hotkey})' , ...viewportProps } = props;
+    const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$VIEWPORT_NAME, __scopeToast);
+    const getItems = $054eb8030ebde76e$var$useCollection(__scopeToast);
+    const wrapperRef = useRef(null);
+    const headFocusProxyRef = useRef(null);
+    const tailFocusProxyRef = useRef(null);
+    const ref = useRef(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$3(forwardedRef, ref, context.onViewportChange);
+    const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '');
+    const hasToasts = context.toastCount > 0;
+    useEffect(()=>{
+        const handleKeyDown = (event)=>{
+            var _ref$current;
+            // we use `event.code` as it is consistent regardless of meta keys that were pressed.
+            // for example, `event.key` for `Control+Alt+t` is `†` and `t !== †`
+            const isHotkeyPressed = hotkey.every((key)=>event[key] || event.code === key
+            );
+            if (isHotkeyPressed) (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>document.removeEventListener('keydown', handleKeyDown)
+        ;
+    }, [
+        hotkey
+    ]);
+    useEffect(()=>{
+        const wrapper = wrapperRef.current;
+        const viewport = ref.current;
+        if (hasToasts && wrapper && viewport) {
+            const handlePause = ()=>{
+                if (!context.isClosePausedRef.current) {
+                    const pauseEvent = new CustomEvent($054eb8030ebde76e$var$VIEWPORT_PAUSE);
+                    viewport.dispatchEvent(pauseEvent);
+                    context.isClosePausedRef.current = true;
+                }
+            };
+            const handleResume = ()=>{
+                if (context.isClosePausedRef.current) {
+                    const resumeEvent = new CustomEvent($054eb8030ebde76e$var$VIEWPORT_RESUME);
+                    viewport.dispatchEvent(resumeEvent);
+                    context.isClosePausedRef.current = false;
+                }
+            };
+            const handleFocusOutResume = (event)=>{
+                const isFocusMovingOutside = !wrapper.contains(event.relatedTarget);
+                if (isFocusMovingOutside) handleResume();
+            };
+            const handlePointerLeaveResume = ()=>{
+                const isFocusInside = wrapper.contains(document.activeElement);
+                if (!isFocusInside) handleResume();
+            }; // Toasts are not in the viewport React tree so we need to bind DOM events
+            wrapper.addEventListener('focusin', handlePause);
+            wrapper.addEventListener('focusout', handleFocusOutResume);
+            wrapper.addEventListener('pointermove', handlePause);
+            wrapper.addEventListener('pointerleave', handlePointerLeaveResume);
+            window.addEventListener('blur', handlePause);
+            window.addEventListener('focus', handleResume);
+            return ()=>{
+                wrapper.removeEventListener('focusin', handlePause);
+                wrapper.removeEventListener('focusout', handleFocusOutResume);
+                wrapper.removeEventListener('pointermove', handlePause);
+                wrapper.removeEventListener('pointerleave', handlePointerLeaveResume);
+                window.removeEventListener('blur', handlePause);
+                window.removeEventListener('focus', handleResume);
+            };
+        }
+    }, [
+        hasToasts,
+        context.isClosePausedRef
+    ]);
+    const getSortedTabbableCandidates = useCallback(({ tabbingDirection: tabbingDirection  })=>{
+        const toastItems = getItems();
+        const tabbableCandidates = toastItems.map((toastItem)=>{
+            const toastNode = toastItem.ref.current;
+            const toastTabbableCandidates = [
+                toastNode,
+                ...$054eb8030ebde76e$var$getTabbableCandidates(toastNode)
+            ];
+            return tabbingDirection === 'forwards' ? toastTabbableCandidates : toastTabbableCandidates.reverse();
+        });
+        return (tabbingDirection === 'forwards' ? tabbableCandidates.reverse() : tabbableCandidates).flat();
+    }, [
+        getItems
+    ]);
+    useEffect(()=>{
+        const viewport = ref.current; // We programmatically manage tabbing as we are unable to influence
+        // the source order with portals, this allows us to reverse the
+        // tab order so that it runs from most recent toast to least
+        if (viewport) {
+            const handleKeyDown = (event)=>{
+                const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
+                const isTabKey = event.key === 'Tab' && !isMetaKey;
+                if (isTabKey) {
+                    const focusedElement = document.activeElement;
+                    const isTabbingBackwards = event.shiftKey;
+                    const targetIsViewport = event.target === viewport; // If we're back tabbing after jumping to the viewport then we simply
+                    // proxy focus out to the preceding document
+                    if (targetIsViewport && isTabbingBackwards) {
+                        var _headFocusProxyRef$cu;
+                        (_headFocusProxyRef$cu = headFocusProxyRef.current) === null || _headFocusProxyRef$cu === void 0 || _headFocusProxyRef$cu.focus();
+                        return;
+                    }
+                    const tabbingDirection = isTabbingBackwards ? 'backwards' : 'forwards';
+                    const sortedCandidates = getSortedTabbableCandidates({
+                        tabbingDirection: tabbingDirection
+                    });
+                    const index = sortedCandidates.findIndex((candidate)=>candidate === focusedElement
+                    );
+                    if ($054eb8030ebde76e$var$focusFirst(sortedCandidates.slice(index + 1))) event.preventDefault();
+                    else {
+                        var _headFocusProxyRef$cu2, _tailFocusProxyRef$cu;
+                        // If we can't focus that means we're at the edges so we
+                        // proxy to the corresponding exit point and let the browser handle
+                        // tab/shift+tab keypress and implicitly pass focus to the next valid element in the document
+                        isTabbingBackwards ? (_headFocusProxyRef$cu2 = headFocusProxyRef.current) === null || _headFocusProxyRef$cu2 === void 0 || _headFocusProxyRef$cu2.focus() : (_tailFocusProxyRef$cu = tailFocusProxyRef.current) === null || _tailFocusProxyRef$cu === void 0 || _tailFocusProxyRef$cu.focus();
+                    }
+                }
+            }; // Toasts are not in the viewport React tree so we need to bind DOM events
+            viewport.addEventListener('keydown', handleKeyDown);
+            return ()=>viewport.removeEventListener('keydown', handleKeyDown)
+            ;
+        }
+    }, [
+        getItems,
+        getSortedTabbableCandidates
+    ]);
+    return /*#__PURE__*/ createElement($5cb92bef7577960e$export$aecb2ddcb55c95be, {
+        ref: wrapperRef,
+        role: "region",
+        "aria-label": label.replace('{hotkey}', hotkeyLabel) // Ensure virtual cursor from landmarks menus triggers focus/blur for pause/resume
+        ,
+        tabIndex: -1 // incase list has size when empty (e.g. padding), we remove pointer events so
+        ,
+        style: {
+            pointerEvents: hasToasts ? undefined : 'none'
+        }
+    }, hasToasts && /*#__PURE__*/ createElement($054eb8030ebde76e$var$FocusProxy, {
+        ref: headFocusProxyRef,
+        onFocusFromOutsideViewport: ()=>{
+            const tabbableCandidates = getSortedTabbableCandidates({
+                tabbingDirection: 'forwards'
+            });
+            $054eb8030ebde76e$var$focusFirst(tabbableCandidates);
+        }
+    }), /*#__PURE__*/ createElement($054eb8030ebde76e$var$Collection.Slot, {
+        scope: __scopeToast
+    }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$4.ol, _extends({
+        tabIndex: -1
+    }, viewportProps, {
+        ref: composedRefs
+    }))), hasToasts && /*#__PURE__*/ createElement($054eb8030ebde76e$var$FocusProxy, {
+        ref: tailFocusProxyRef,
+        onFocusFromOutsideViewport: ()=>{
+            const tabbableCandidates = getSortedTabbableCandidates({
+                tabbingDirection: 'backwards'
+            });
+            $054eb8030ebde76e$var$focusFirst(tabbableCandidates);
+        }
+    }));
+});
+/* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$FOCUS_PROXY_NAME = 'ToastFocusProxy';
+const $054eb8030ebde76e$var$FocusProxy = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeToast: __scopeToast , onFocusFromOutsideViewport: onFocusFromOutsideViewport , ...proxyProps } = props;
+    const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$FOCUS_PROXY_NAME, __scopeToast);
+    return /*#__PURE__*/ createElement($ea1ef594cf570d83$export$439d29a4e110a164, _extends({
+        "aria-hidden": true,
+        tabIndex: 0
+    }, proxyProps, {
+        ref: forwardedRef // Avoid page scrolling when focus is on the focus proxy
+        ,
+        style: {
+            position: 'fixed'
+        },
+        onFocus: (event)=>{
+            var _context$viewport;
+            const prevFocusedElement = event.relatedTarget;
+            const isFocusFromOutsideViewport = !((_context$viewport = context.viewport) !== null && _context$viewport !== void 0 && _context$viewport.contains(prevFocusedElement));
+            if (isFocusFromOutsideViewport) onFocusFromOutsideViewport();
+        }
+    }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * Toast
+ * -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$TOAST_NAME = 'Toast';
+const $054eb8030ebde76e$var$TOAST_SWIPE_START = 'toast.swipeStart';
+const $054eb8030ebde76e$var$TOAST_SWIPE_MOVE = 'toast.swipeMove';
+const $054eb8030ebde76e$var$TOAST_SWIPE_CANCEL = 'toast.swipeCancel';
+const $054eb8030ebde76e$var$TOAST_SWIPE_END = 'toast.swipeEnd';
+const $054eb8030ebde76e$export$8d8dc7d5f743331b = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { forceMount: forceMount , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , ...toastProps } = props;
+    const [open = true, setOpen] = $71cd76cc60e0454e$export$6f32135080cb4c3$2({
+        prop: openProp,
+        defaultProp: defaultOpen,
+        onChange: onOpenChange
+    });
+    return /*#__PURE__*/ createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
+        present: forceMount || open
+    }, /*#__PURE__*/ createElement($054eb8030ebde76e$var$ToastImpl, _extends({
+        open: open
+    }, toastProps, {
+        ref: forwardedRef,
+        onClose: ()=>setOpen(false)
+        ,
+        onPause: $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$3(props.onPause),
+        onResume: $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$3(props.onResume),
+        onSwipeStart: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onSwipeStart, (event)=>{
+            event.currentTarget.setAttribute('data-swipe', 'start');
+        }),
+        onSwipeMove: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onSwipeMove, (event)=>{
+            const { x: x , y: y  } = event.detail.delta;
+            event.currentTarget.setAttribute('data-swipe', 'move');
+            event.currentTarget.style.setProperty('--radix-toast-swipe-move-x', `${x}px`);
+            event.currentTarget.style.setProperty('--radix-toast-swipe-move-y', `${y}px`);
+        }),
+        onSwipeCancel: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onSwipeCancel, (event)=>{
+            event.currentTarget.setAttribute('data-swipe', 'cancel');
+            event.currentTarget.style.removeProperty('--radix-toast-swipe-move-x');
+            event.currentTarget.style.removeProperty('--radix-toast-swipe-move-y');
+            event.currentTarget.style.removeProperty('--radix-toast-swipe-end-x');
+            event.currentTarget.style.removeProperty('--radix-toast-swipe-end-y');
+        }),
+        onSwipeEnd: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onSwipeEnd, (event)=>{
+            const { x: x , y: y  } = event.detail.delta;
+            event.currentTarget.setAttribute('data-swipe', 'end');
+            event.currentTarget.style.removeProperty('--radix-toast-swipe-move-x');
+            event.currentTarget.style.removeProperty('--radix-toast-swipe-move-y');
+            event.currentTarget.style.setProperty('--radix-toast-swipe-end-x', `${x}px`);
+            event.currentTarget.style.setProperty('--radix-toast-swipe-end-y', `${y}px`);
+            setOpen(false);
+        })
+    })));
 });
+/* -----------------------------------------------------------------------------------------------*/ const [$054eb8030ebde76e$var$ToastInteractiveProvider, $054eb8030ebde76e$var$useToastInteractiveContext] = $054eb8030ebde76e$var$createToastContext($054eb8030ebde76e$var$TOAST_NAME, {
+    onClose () {}
+});
+const $054eb8030ebde76e$var$ToastImpl = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeToast: __scopeToast , type: type = 'foreground' , duration: durationProp , open: open , onClose: onClose , onEscapeKeyDown: onEscapeKeyDown , onPause: onPause , onResume: onResume , onSwipeStart: onSwipeStart , onSwipeMove: onSwipeMove , onSwipeCancel: onSwipeCancel , onSwipeEnd: onSwipeEnd , ...toastProps } = props;
+    const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$TOAST_NAME, __scopeToast);
+    const [node1, setNode] = useState(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$3(forwardedRef, (node)=>setNode(node)
+    );
+    const pointerStartRef = useRef(null);
+    const swipeDeltaRef = useRef(null);
+    const duration1 = durationProp || context.duration;
+    const closeTimerStartTimeRef = useRef(0);
+    const closeTimerRemainingTimeRef = useRef(duration1);
+    const closeTimerRef = useRef(0);
+    const { onToastAdd: onToastAdd , onToastRemove: onToastRemove  } = context;
+    const handleClose = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$3(()=>{
+        var _context$viewport2;
+        // focus viewport if focus is within toast to read the remaining toast
+        // count to SR users and ensure focus isn't lost
+        const isFocusInToast = node1 === null || node1 === void 0 ? void 0 : node1.contains(document.activeElement);
+        if (isFocusInToast) (_context$viewport2 = context.viewport) === null || _context$viewport2 === void 0 || _context$viewport2.focus();
+        onClose();
+    });
+    const startTimer = useCallback((duration)=>{
+        if (!duration || duration === Infinity) return;
+        window.clearTimeout(closeTimerRef.current);
+        closeTimerStartTimeRef.current = new Date().getTime();
+        closeTimerRef.current = window.setTimeout(handleClose, duration);
+    }, [
+        handleClose
+    ]);
+    useEffect(()=>{
+        const viewport = context.viewport;
+        if (viewport) {
+            const handleResume = ()=>{
+                startTimer(closeTimerRemainingTimeRef.current);
+                onResume === null || onResume === void 0 || onResume();
+            };
+            const handlePause = ()=>{
+                const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current;
+                closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
+                window.clearTimeout(closeTimerRef.current);
+                onPause === null || onPause === void 0 || onPause();
+            };
+            viewport.addEventListener($054eb8030ebde76e$var$VIEWPORT_PAUSE, handlePause);
+            viewport.addEventListener($054eb8030ebde76e$var$VIEWPORT_RESUME, handleResume);
+            return ()=>{
+                viewport.removeEventListener($054eb8030ebde76e$var$VIEWPORT_PAUSE, handlePause);
+                viewport.removeEventListener($054eb8030ebde76e$var$VIEWPORT_RESUME, handleResume);
+            };
+        }
+    }, [
+        context.viewport,
+        duration1,
+        onPause,
+        onResume,
+        startTimer
+    ]); // start timer when toast opens or duration changes.
+    // we include `open` in deps because closed !== unmounted when animating
+    // so it could reopen before being completely unmounted
+    useEffect(()=>{
+        if (open && !context.isClosePausedRef.current) startTimer(duration1);
+    }, [
+        open,
+        duration1,
+        context.isClosePausedRef,
+        startTimer
+    ]);
+    useEffect(()=>{
+        onToastAdd();
+        return ()=>onToastRemove()
+        ;
+    }, [
+        onToastAdd,
+        onToastRemove
+    ]);
+    const announceTextContent = useMemo(()=>{
+        return node1 ? $054eb8030ebde76e$var$getAnnounceTextContent(node1) : null;
+    }, [
+        node1
+    ]);
+    if (!context.viewport) return null;
+    return /*#__PURE__*/ createElement(Fragment, null, announceTextContent && /*#__PURE__*/ createElement($054eb8030ebde76e$var$ToastAnnounce, {
+        __scopeToast: __scopeToast // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.
+        ,
+        role: "status",
+        "aria-live": type === 'foreground' ? 'assertive' : 'polite',
+        "aria-atomic": true
+    }, announceTextContent), /*#__PURE__*/ createElement($054eb8030ebde76e$var$ToastInteractiveProvider, {
+        scope: __scopeToast,
+        onClose: handleClose
+    }, /*#__PURE__*/ reactDom.exports.createPortal(/*#__PURE__*/ createElement($054eb8030ebde76e$var$Collection.ItemSlot, {
+        scope: __scopeToast
+    }, /*#__PURE__*/ createElement($5cb92bef7577960e$export$be92b6f5f03c0fe9, {
+        asChild: true,
+        onEscapeKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(onEscapeKeyDown, ()=>{
+            if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
+            context.isFocusedToastEscapeKeyDownRef.current = false;
+        })
+    }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$4.li, _extends({
+        // Ensure toasts are announced as status list or status when focused
+        role: "status",
+        "aria-live": "off",
+        "aria-atomic": true,
+        tabIndex: 0,
+        "data-state": open ? 'open' : 'closed',
+        "data-swipe-direction": context.swipeDirection
+    }, toastProps, {
+        ref: composedRefs,
+        style: {
+            userSelect: 'none',
+            touchAction: 'none',
+            ...props.style
+        },
+        onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onKeyDown, (event)=>{
+            if (event.key !== 'Escape') return;
+            onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event.nativeEvent);
+            if (!event.nativeEvent.defaultPrevented) {
+                context.isFocusedToastEscapeKeyDownRef.current = true;
+                handleClose();
+            }
+        }),
+        onPointerDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onPointerDown, (event)=>{
+            if (event.button !== 0) return;
+            pointerStartRef.current = {
+                x: event.clientX,
+                y: event.clientY
+            };
+        }),
+        onPointerMove: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onPointerMove, (event)=>{
+            if (!pointerStartRef.current) return;
+            const x = event.clientX - pointerStartRef.current.x;
+            const y = event.clientY - pointerStartRef.current.y;
+            const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current);
+            const isHorizontalSwipe = [
+                'left',
+                'right'
+            ].includes(context.swipeDirection);
+            const clamp = [
+                'left',
+                'up'
+            ].includes(context.swipeDirection) ? Math.min : Math.max;
+            const clampedX = isHorizontalSwipe ? clamp(0, x) : 0;
+            const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0;
+            const moveStartBuffer = event.pointerType === 'touch' ? 10 : 2;
+            const delta = {
+                x: clampedX,
+                y: clampedY
+            };
+            const eventDetail = {
+                originalEvent: event,
+                delta: delta
+            };
+            if (hasSwipeMoveStarted) {
+                swipeDeltaRef.current = delta;
+                $054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {
+                    discrete: false
+                });
+            } else if ($054eb8030ebde76e$var$isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) {
+                swipeDeltaRef.current = delta;
+                $054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_START, onSwipeStart, eventDetail, {
+                    discrete: false
+                });
+                event.target.setPointerCapture(event.pointerId);
+            } else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) // User is swiping in wrong direction so we disable swipe gesture
+            // for the current pointer down interaction
+            pointerStartRef.current = null;
+        }),
+        onPointerUp: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onPointerUp, (event1)=>{
+            const delta = swipeDeltaRef.current;
+            const target = event1.target;
+            if (target.hasPointerCapture(event1.pointerId)) target.releasePointerCapture(event1.pointerId);
+            swipeDeltaRef.current = null;
+            pointerStartRef.current = null;
+            if (delta) {
+                const toast = event1.currentTarget;
+                const eventDetail = {
+                    originalEvent: event1,
+                    delta: delta
+                };
+                if ($054eb8030ebde76e$var$isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) $054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_END, onSwipeEnd, eventDetail, {
+                    discrete: true
+                });
+                else $054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_CANCEL, onSwipeCancel, eventDetail, {
+                    discrete: true
+                });
+                 // Prevent click event from triggering on items within the toast when
+                // pointer up is part of a swipe gesture
+                toast.addEventListener('click', (event)=>event.preventDefault()
+                , {
+                    once: true
+                });
+            }
+        })
+    })))), context.viewport)));
+});
+$054eb8030ebde76e$var$ToastImpl.propTypes = {
+    type (props) {
+        if (props.type && ![
+            'foreground',
+            'background'
+        ].includes(props.type)) {
+            const error = `Invalid prop \`type\` supplied to \`${$054eb8030ebde76e$var$TOAST_NAME}\`. Expected \`foreground | background\`.`;
+            return new Error(error);
+        }
+        return null;
+    }
+};
+/* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$ToastAnnounce = (props)=>{
+    const { __scopeToast: __scopeToast , children: children , ...announceProps } = props;
+    const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$TOAST_NAME, __scopeToast);
+    const [renderAnnounceText, setRenderAnnounceText] = useState(false);
+    const [isAnnounced, setIsAnnounced] = useState(false); // render text content in the next frame to ensure toast is announced in NVDA
+    $054eb8030ebde76e$var$useNextFrame(()=>setRenderAnnounceText(true)
+    ); // cleanup after announcing
+    useEffect(()=>{
+        const timer = window.setTimeout(()=>setIsAnnounced(true)
+        , 1000);
+        return ()=>window.clearTimeout(timer)
+        ;
+    }, []);
+    return isAnnounced ? null : /*#__PURE__*/ createElement($f1701beae083dbae$export$602eac185826482c$1, {
+        asChild: true
+    }, /*#__PURE__*/ createElement($ea1ef594cf570d83$export$439d29a4e110a164, announceProps, renderAnnounceText && /*#__PURE__*/ createElement(Fragment, null, context.label, " ", children)));
+};
+const $054eb8030ebde76e$export$16d42d7c29b95a4 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeToast: __scopeToast , ...titleProps } = props;
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$4.div, _extends({}, titleProps, {
+        ref: forwardedRef
+    }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * ToastAction
+ * -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$ACTION_NAME = 'ToastAction';
+const $054eb8030ebde76e$export$3019feecfda683d2 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { altText: altText , ...actionProps } = props;
+    if (!altText) return null;
+    return /*#__PURE__*/ createElement($054eb8030ebde76e$var$ToastAnnounceExclude, {
+        altText: altText,
+        asChild: true
+    }, /*#__PURE__*/ createElement($054eb8030ebde76e$export$811e70f61c205839, _extends({}, actionProps, {
+        ref: forwardedRef
+    })));
+});
+$054eb8030ebde76e$export$3019feecfda683d2.propTypes = {
+    altText (props) {
+        if (!props.altText) return new Error(`Missing prop \`altText\` expected on \`${$054eb8030ebde76e$var$ACTION_NAME}\``);
+        return null;
+    }
+};
+/* -------------------------------------------------------------------------------------------------
+ * ToastClose
+ * -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$CLOSE_NAME = 'ToastClose';
+const $054eb8030ebde76e$export$811e70f61c205839 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeToast: __scopeToast , ...closeProps } = props;
+    const interactiveContext = $054eb8030ebde76e$var$useToastInteractiveContext($054eb8030ebde76e$var$CLOSE_NAME, __scopeToast);
+    return /*#__PURE__*/ createElement($054eb8030ebde76e$var$ToastAnnounceExclude, {
+        asChild: true
+    }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$4.button, _extends({
+        type: "button"
+    }, closeProps, {
+        ref: forwardedRef,
+        onClick: $e42e1063c40fb3ef$export$b9ecd428b558ff10$2(props.onClick, interactiveContext.onClose)
+    })));
+});
+/* ---------------------------------------------------------------------------------------------- */ const $054eb8030ebde76e$var$ToastAnnounceExclude = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeToast: __scopeToast , altText: altText , ...announceExcludeProps } = props;
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$4.div, _extends({
+        "data-radix-toast-announce-exclude": "",
+        "data-radix-toast-announce-alt": altText || undefined
+    }, announceExcludeProps, {
+        ref: forwardedRef
+    }));
+});
+function $054eb8030ebde76e$var$getAnnounceTextContent(container) {
+    const textContent = [];
+    const childNodes = Array.from(container.childNodes);
+    childNodes.forEach((node)=>{
+        if (node.nodeType === node.TEXT_NODE && node.textContent) textContent.push(node.textContent);
+        if ($054eb8030ebde76e$var$isHTMLElement(node)) {
+            const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none';
+            const isExcluded = node.dataset.radixToastAnnounceExclude === '';
+            if (!isHidden) {
+                if (isExcluded) {
+                    const altText = node.dataset.radixToastAnnounceAlt;
+                    if (altText) textContent.push(altText);
+                } else textContent.push(...$054eb8030ebde76e$var$getAnnounceTextContent(node));
+            }
+        }
+    }); // We return a collection of text rather than a single concatenated string.
+    // This allows SR VO to naturally pause break between nodes while announcing.
+    return textContent;
+}
+/* ---------------------------------------------------------------------------------------------- */ function $054eb8030ebde76e$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete  }) {
+    const currentTarget = detail.originalEvent.currentTarget;
+    const event = new CustomEvent(name, {
+        bubbles: true,
+        cancelable: true,
+        detail: detail
+    });
+    if (handler) currentTarget.addEventListener(name, handler, {
+        once: true
+    });
+    if (discrete) $8927f6f2acc4f386$export$6d1a0317bde7de7f$1(currentTarget, event);
+    else currentTarget.dispatchEvent(event);
+}
+const $054eb8030ebde76e$var$isDeltaInDirection = (delta, direction, threshold = 0)=>{
+    const deltaX = Math.abs(delta.x);
+    const deltaY = Math.abs(delta.y);
+    const isDeltaX = deltaX > deltaY;
+    if (direction === 'left' || direction === 'right') return isDeltaX && deltaX > threshold;
+    else return !isDeltaX && deltaY > threshold;
+};
+function $054eb8030ebde76e$var$useNextFrame(callback = ()=>{}) {
+    const fn = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$3(callback);
+    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        let raf1 = 0;
+        let raf2 = 0;
+        raf1 = window.requestAnimationFrame(()=>raf2 = window.requestAnimationFrame(fn)
+        );
+        return ()=>{
+            window.cancelAnimationFrame(raf1);
+            window.cancelAnimationFrame(raf2);
+        };
+    }, [
+        fn
+    ]);
+}
+function $054eb8030ebde76e$var$isHTMLElement(node) {
+    return node.nodeType === node.ELEMENT_NODE;
+}
+/**
+ * Returns a list of potential tabbable candidates.
+ *
+ * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
+ * elements are not visible. This cannot be worked out easily by just reading a property, but rather
+ * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+ * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
+ */ function $054eb8030ebde76e$var$getTabbableCandidates(container) {
+    const nodes = [];
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: (node)=>{
+            const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
+            if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP; // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
+            // runtime's understanding of tabbability, so this automatically accounts
+            // for any kind of element that could be tabbed to.
+            return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        }
+    });
+    while(walker.nextNode())nodes.push(walker.currentNode); // we do not take into account the order of nodes with positive `tabIndex` as it
+    // hinders accessibility to have tab order different from visual order.
+    return nodes;
+}
+function $054eb8030ebde76e$var$focusFirst(candidates) {
+    const previouslyFocusedElement = document.activeElement;
+    return candidates.some((candidate)=>{
+        // if focus is already where we want to go, we don't want to keep going through the candidates
+        if (candidate === previouslyFocusedElement) return true;
+        candidate.focus();
+        return document.activeElement !== previouslyFocusedElement;
+    });
+}
+const $054eb8030ebde76e$export$2881499e37b75b9a = $054eb8030ebde76e$export$f5d03d415824e0e;
+const $054eb8030ebde76e$export$d5c6c08dc2d3ca7 = $054eb8030ebde76e$export$6192c2425ecfd989;
+const $054eb8030ebde76e$export$be92b6f5f03c0fe9 = $054eb8030ebde76e$export$8d8dc7d5f743331b;
+const $054eb8030ebde76e$export$f99233281efd08a0 = $054eb8030ebde76e$export$16d42d7c29b95a4;
+const $054eb8030ebde76e$export$e19cd5f9376f8cee = $054eb8030ebde76e$export$3019feecfda683d2;
+const $054eb8030ebde76e$export$f39c2d165cd861fe = $054eb8030ebde76e$export$811e70f61c205839;
+
+var ToastNotification = function (_a) {
+    var link = _a.link, title = _a.title, isOpen = _a.isOpen, onOpenChange = _a.onOpenChange, _b = _a.isStatusIconVisible, isStatusIconVisible = _b === void 0 ? true : _b, _c = _a.isCloseButtonVisible, isCloseButtonVisible = _c === void 0 ? true : _c, _d = _a.status, status = _d === void 0 ? "general" : _d, props = __rest$2(_a, ["link", "title", "isOpen", "onOpenChange", "isStatusIconVisible", "isCloseButtonVisible", "status"]);
+    var statusIcons = {
+        general: BtIconNotification_2,
+        error: BtIconAlertTriangle_2,
+        warning: BtIconAlert_2,
+        success: BtIconTick_2
+    };
+    var handleLinkClick = function (handler) { return function (event) {
+        event.preventDefault();
+        handler();
+    }; };
+    return (React__default.createElement($054eb8030ebde76e$export$be92b6f5f03c0fe9, __assign$2({ className: "arc-Toast-root", open: isOpen, onOpenChange: onOpenChange }, filterDataAttrs(props)),
+        React__default.createElement("div", { "data-testid": "toast-notification-wrapper", className: classNames("arc-Toast", "arc-Toast-status--".concat(status)) },
+            isStatusIconVisible && (React__default.createElement("div", { "data-testid": "status-icon", className: "arc-Toast-icon" },
+                React__default.createElement(Icon, { size: 24, icon: statusIcons[status] }))),
+            React__default.createElement($054eb8030ebde76e$export$f99233281efd08a0, { className: "arc-Toast-title" },
+                React__default.createElement("span", null, title)),
+            link && (React__default.createElement($054eb8030ebde76e$export$e19cd5f9376f8cee, { className: "arc-Toast-action", asChild: true, altText: link.text },
+                React__default.createElement("a", __assign$2({ className: "arc-Toast-link", href: link.href, "aria-label": link.ariaLabel }, (link.onClick && { onClick: handleLinkClick(link.onClick) })), link.text))),
+            isCloseButtonVisible && !link && (React__default.createElement($054eb8030ebde76e$export$f39c2d165cd861fe, { className: "arc-Toast-dismiss", "aria-label": "Close" },
+                React__default.createElement(Icon, { icon: BtIconCrossAlt2Px_2, size: 24 }))))));
+};
+
+/** Use `Toast` to display temporary messages at the bottom of the viewport. */
+var Toast = function (_a) {
+    var children = _a.children, _b = _a.colorScheme, colorScheme = _b === void 0 ? "default" : _b, props = __rest$2(_a, ["children", "colorScheme"]);
+    return (React__default.createElement($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", duration: 6000 },
+        React__default.createElement($054eb8030ebde76e$export$d5c6c08dc2d3ca7, { asChild: true, className: "arc-Toast-viewport" },
+            React__default.createElement("div", __assign$2({ className: "arc-Toast-pathway--".concat(colorScheme) }, filterDataAttrs(props)), children))));
+};
+Toast.Notification = ToastNotification;
+ToastNotification.displayName = "Toast.Notification";
 
 /** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
 var Truncate = function (_a) {
@@ -38797,5 +40678,29 @@ var Truncate = function (_a) {
     return (React__default.createElement("div", __assign$2({ className: "arc-Truncate", style: { maxWidth: "".concat(maxWidth, "%") }, title: title }, filterDataAttrs(props)), children));
 };
 
-export { Align, Badge, Base, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, Elevation, Filter, FormControl, Group, Heading, Icon, Image, Markup, Modal, Poster, RadioGroup, Rule, Section, Select, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, Surface, Context$3 as SurfaceContext, Switch, Tag, Text, TextArea, TextInput, Truncate, UniversalHeader, VerticalSpace, VisuallyHidden };
+/**
+ * Use `UniversalHeader` to display a group-level page header.
+ */
+var UniversalHeader = function (_a) {
+    var children = _a.children, props = __rest$2(_a, ["children"]);
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item && item.type !== UniversalHeaderItem) {
+                throw new Error("Illegal child passed to <UniversalHeader />. Ensure to only use <UniversalHeader.Item />.");
+            }
+        });
+    }, [children]);
+    return (React__default.createElement("nav", __assign$2({ className: "arc-UniversalHeader" }, filterDataAttrs(props)),
+        React__default.createElement(Surface, { background: "light" },
+            React__default.createElement("ul", { className: "arc-UniversalHeader-items" }, children))));
+};
+var UniversalHeaderItem = function (_a) {
+    var children = _a.children, href = _a.href, props = __rest$2(_a, ["children", "href"]);
+    return (React__default.createElement("li", __assign$2({}, filterDataAttrs(props)),
+        React__default.createElement("a", { className: "arc-UniversalHeader-link", href: href }, children)));
+};
+UniversalHeaderItem.displayName = "UniversalHeader.Item";
+UniversalHeader.Item = UniversalHeaderItem;
+
+export { Alert, Align, Badge, Base, Box, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, DisclosureMini, Elevation, Filter, FormControl, Group, Heading, Icon, Image, Markup, MediaCard, Modal, Pagination, PaginationSimple, Poster, ProgressBar, ProgressStepper, RadioGroup, Rule, ScrollToTop, Section, Select, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, Surface, Context$3 as SurfaceContext, Switch, Tabs, Tag, Text, TextArea, TextInput, Toast, Truncate, UniversalHeader, VerticalSpace, VisuallyHidden };
 //# sourceMappingURL=index.es.js.map