@arc-ui/components 11.4.2 → 11.6.0

package/dist/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React$a = require('react');
+var React$b = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,8 +24,8 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React$a);
-var React__namespace = /*#__PURE__*/_interopNamespace(React$a);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$b);
+var React__namespace = /*#__PURE__*/_interopNamespace(React$b);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -329,7 +329,7 @@ var AlignItem = function (_a) {
     return React__default["default"].createElement("div", { className: "arc-Align-item" }, children);
 };
 
-var ArcRootElementContext = React$a.createContext(null);
+var ArcRootElementContext = React$b.createContext(null);
 /**
  * Use `Base` as the root component of the arc system.
  */
@@ -879,9 +879,9 @@ function debounce(func, wait, options) {
 
 var debounce_1 = debounce;
 
-const React$9 = React__default["default"];
+const React$a = React__default["default"];
 const BtIconChevronLeft2Px = props =>
-  /*#__PURE__*/ React$9.createElement(
+  /*#__PURE__*/ React$a.createElement(
     "svg",
     Object.assign(
       {
@@ -890,8 +890,8 @@ const BtIconChevronLeft2Px = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$9.createElement("defs", null),
-    /*#__PURE__*/ React$9.createElement("path", {
+    /*#__PURE__*/ React$a.createElement("defs", null),
+    /*#__PURE__*/ React$a.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"
@@ -899,9 +899,9 @@ const BtIconChevronLeft2Px = props =>
   );
 var BtIconChevronLeft2Px_2 = BtIconChevronLeft2Px;
 
-const React$8 = React__default["default"];
+const React$9 = React__default["default"];
 const BtIconChevronRight2Px = props =>
-  /*#__PURE__*/ React$8.createElement(
+  /*#__PURE__*/ React$9.createElement(
     "svg",
     Object.assign(
       {
@@ -910,8 +910,8 @@ const BtIconChevronRight2Px = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$8.createElement("defs", null),
-    /*#__PURE__*/ React$8.createElement("path", {
+    /*#__PURE__*/ React$9.createElement("defs", null),
+    /*#__PURE__*/ React$9.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"
@@ -919,9 +919,9 @@ const BtIconChevronRight2Px = props =>
   );
 var BtIconChevronRight2Px_2 = BtIconChevronRight2Px;
 
-const React$7 = React__default["default"];
+const React$8 = React__default["default"];
 const ArcIconArc = props =>
-  /*#__PURE__*/ React$7.createElement(
+  /*#__PURE__*/ React$8.createElement(
     "svg",
     Object.assign(
       {
@@ -930,7 +930,7 @@ const ArcIconArc = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$7.createElement("path", {
+    /*#__PURE__*/ React$8.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"
@@ -939,7 +939,7 @@ const ArcIconArc = props =>
 var ArcIconArc_2 = ArcIconArc;
 
 var defaultContext$3 = { surface: "light" };
-var Context$3 = React$a.createContext(defaultContext$3);
+var Context$3 = React$b.createContext(defaultContext$3);
 var Provider$4 = Context$3.Provider;
 /**
  * Use `Surface` to compose content using the Arc system.
@@ -988,7 +988,7 @@ __spreadArray$1([], backgroundsShared, true);
 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 = React$a.useContext(Context$3).surface;
+    var surface = React$b.useContext(Context$3).surface;
     var Icon = icon;
     return (React__default["default"].createElement("span", __assign$2({ "data-testid": testId, "aria-label": label, className: classNames((_b = {},
             _b["arc-Icon"] = true,
@@ -1037,17 +1037,17 @@ var BreadcrumbsLink = React__default["default"].forwardRef(function (_a, ref) {
 /** Use `Breadcrumbs` to add a secondary navigation scheme that reveals the user’s location. Each item should be wrapped with `Breadcrumbs.Item` */
 var Breadcrumbs = function (_a) {
     var isLight = _a.isLight, children = _a.children;
-    var breadcrumbsList = React$a.useRef(null);
-    var _b = React$a.useState(false), isCompressed = _b[0], setIsCompressed = _b[1];
-    var _c = React$a.useState(false), showBackTrail = _c[0], setShowBackTrail = _c[1];
-    React$a.useEffect(function () {
+    var breadcrumbsList = React$b.useRef(null);
+    var _b = React$b.useState(false), isCompressed = _b[0], setIsCompressed = _b[1];
+    var _c = React$b.useState(false), showBackTrail = _c[0], setShowBackTrail = _c[1];
+    React$b.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== BreadcrumbsItem) {
                 throw new Error("Illegal child passed to <Breadcrumbs />. Ensure to only use <Breadcrumbs.Item />");
             }
         });
     }, [children]);
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         var handleResize = debounce_1(function () {
             var _a;
             setShowBackTrail(false);
@@ -1111,7 +1111,7 @@ Breadcrumbs.Link = BreadcrumbsLink;
 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 = React$a.useContext(Context$3).surface;
+    var surface = React$b.useContext(Context$3).surface;
     return (React__default["default"].createElement("div", __assign$2({ className: classNames((_b = {
                 "arc-BrandLogo": true,
                 "arc-BrandLogo--colorBrand": color === "brand",
@@ -1123,9 +1123,9 @@ var BrandLogo = function (_a) {
         } }, filterDataAttrs(props)), label ? React__default["default"].createElement("span", { className: "arc-BrandLogo-text" }, label) : null));
 };
 
-const React$6 = React__default["default"];
+const React$7 = React__default["default"];
 const BtIconChevronLeftMid = props =>
-  /*#__PURE__*/ React$6.createElement(
+  /*#__PURE__*/ React$7.createElement(
     "svg",
     Object.assign(
       {
@@ -1135,7 +1135,7 @@ const BtIconChevronLeftMid = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$6.createElement("path", {
+    /*#__PURE__*/ React$7.createElement("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d:
@@ -1145,9 +1145,9 @@ const BtIconChevronLeftMid = props =>
   );
 var BtIconChevronLeftMid_2 = BtIconChevronLeftMid;
 
-const React$5 = React__default["default"];
+const React$6 = React__default["default"];
 const BtIconChevronRightMid = props =>
-  /*#__PURE__*/ React$5.createElement(
+  /*#__PURE__*/ React$6.createElement(
     "svg",
     Object.assign(
       {
@@ -1157,7 +1157,7 @@ const BtIconChevronRightMid = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$5.createElement("path", {
+    /*#__PURE__*/ React$6.createElement("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d:
@@ -1170,10 +1170,10 @@ var BtIconChevronRightMid_2 = BtIconChevronRightMid;
 /**
  * Use `Button` to allow users to take actions with clicks and taps.
  */
-var Button = React$a.forwardRef(function (_a, ref) {
+var Button = React$b.forwardRef(function (_a, ref) {
     var _b;
     var ariaLabel = _a.ariaLabel, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, supportingText = _a.supportingText, target = _a.target, type = _a.type, props = __rest$2(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "supportingText", "target", "type"]);
-    var surface = React$a.useContext(Context$3).surface;
+    var surface = React$b.useContext(Context$3).surface;
     var buttonClasses = classNames((_b = {
             "arc-Button": true,
             "arc-Button--displayBlock": isDisplayBlock
@@ -1214,7 +1214,7 @@ var ButtonIcon = function (_a) {
 var Image = function (_a) {
     var _b;
     var alt = _a.alt, _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, children = _a.children, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = __rest$2(_a, ["alt", "anchor", "children", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== ImageSource) {
                 throw new Error("Illegal child passed to <Image />. Ensure to only use <Image.Source />.");
@@ -1246,7 +1246,7 @@ Image.Source = ImageSource;
 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, props = __rest$2(_a, ["align", "casing", "children", "color", "level", "size"]);
-    var surface = React$a.useContext(Context$3).surface;
+    var surface = React$b.useContext(Context$3).surface;
     var Element = "span";
     if (level) {
         Element = "h".concat(level);
@@ -1299,8 +1299,8 @@ var useAriaDescribedby = function (_a) {
  * Detect interaction mode
  */
 var useInteractionMode = function () {
-    var _a = React$a.useState("pointer"), interactionMode = _a[0], setInteractionMode = _a[1];
-    React$a.useEffect(function () {
+    var _a = React$b.useState("pointer"), interactionMode = _a[0], setInteractionMode = _a[1];
+    React$b.useEffect(function () {
         var onKeyDown = function (event) {
             if (event.altKey || event.ctrlKey || event.metaKey) {
                 return;
@@ -1343,13 +1343,13 @@ var useInteractionMode = function () {
  */
 var useMediaQuery = function (mediaQuery) {
     var mediaQueryList = typeof window !== "undefined" ? window.matchMedia(mediaQuery) : undefined;
-    var _a = React$a.useState(false), matches = _a[0], setMatches = _a[1];
-    React$a.useEffect(function () {
+    var _a = React$b.useState(false), matches = _a[0], setMatches = _a[1];
+    React$b.useEffect(function () {
         setMatches(typeof window !== "undefined"
             ? window.matchMedia(mediaQuery).matches
             : false);
     }, [mediaQuery]);
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         var onMatchMedia = function (event) { return setMatches(event.matches); };
         // Using deprecated addListener methods here for IE & Safari 13 support
         if (mediaQueryList) {
@@ -1393,7 +1393,7 @@ var useNumericInput = function (props) {
 var Card = function (_a) {
     var _b;
     var actionId = _a.actionId, _c = _a.actionLabel, actionLabel = _c === void 0 ? "Read more" : _c, children = _a.children, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, href = _a.href, imageAlt = _a.imageAlt, imageHeight = _a.imageHeight, imageLoading = _a.imageLoading, imageSrc = _a.imageSrc, imageSrcSet = _a.imageSrcSet, linkData = _a.linkData, minHeight = _a.minHeight, onClick = _a.onClick, target = _a.target, title = _a.title, _e = _a.titleSize, titleSize = _e === void 0 ? "s" : _e, props = __rest$2(_a, ["actionId", "actionLabel", "children", "fill", "href", "imageAlt", "imageHeight", "imageLoading", "imageSrc", "imageSrcSet", "linkData", "minHeight", "onClick", "target", "title", "titleSize"]);
-    var surface = React$a.useContext(Context$3).surface;
+    var surface = React$b.useContext(Context$3).surface;
     var interactionMode = useInteractionMode().interactionMode;
     var Wrapper = function (_a) {
         var children = _a.children;
@@ -1452,7 +1452,7 @@ Card.Image = CardImage;
  */
 var CardLink = function (_a) {
     var actionId = _a.actionId, isButton = _a.isButton, children = _a.children, fill = _a.fill, href = _a.href, _b = _a.linkData, linkData = _b === void 0 ? {} : _b, onClick = _a.onClick, stretch = _a.stretch, target = _a.target;
-    var surface = React$a.useContext(Context$3).surface;
+    var surface = React$b.useContext(Context$3).surface;
     return (React__default["default"].createElement("a", __assign$2({ onClick: handleLinkClick({ handler: onClick }), "aria-describedby": actionId, className: classNames({
             "arc-Card-link": true,
             "arc-Card-link--button": isButton,
@@ -1464,9 +1464,9 @@ var CardLink = function (_a) {
             React__default["default"].createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid_2, size: 24 })))));
 };
 
-const React$4 = React__default["default"];
+const React$5 = React__default["default"];
 const BtIconTickAlt2Px = props =>
-  /*#__PURE__*/ React$4.createElement(
+  /*#__PURE__*/ React$5.createElement(
     "svg",
     Object.assign(
       {
@@ -1475,8 +1475,8 @@ const BtIconTickAlt2Px = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$4.createElement("defs", null),
-    /*#__PURE__*/ React$4.createElement("path", {
+    /*#__PURE__*/ React$5.createElement("defs", null),
+    /*#__PURE__*/ React$5.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"
@@ -1484,9 +1484,9 @@ const BtIconTickAlt2Px = props =>
   );
 var BtIconTickAlt2Px_2 = BtIconTickAlt2Px;
 
-const React$3 = React__default["default"];
+const React$4 = React__default["default"];
 const BtIconAlert = props =>
-  /*#__PURE__*/ React$3.createElement(
+  /*#__PURE__*/ React$4.createElement(
     "svg",
     Object.assign(
       {
@@ -1495,17 +1495,17 @@ const BtIconAlert = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$3.createElement("defs", null),
-    /*#__PURE__*/ React$3.createElement("path", {
+    /*#__PURE__*/ React$4.createElement("defs", null),
+    /*#__PURE__*/ React$4.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$3.createElement("path", {
+    /*#__PURE__*/ React$4.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$3.createElement("path", {
+    /*#__PURE__*/ React$4.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"
@@ -1513,13 +1513,33 @@ const BtIconAlert = props =>
   );
 var BtIconAlert_2 = BtIconAlert;
 
+const React$3 = React__default["default"];
+const BtIconChevronDown2Px = 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:
+        "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"
+    })
+  );
+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, _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", "isInline", "isMeasured", "size", "tone"]);
-    var surface = React$a.useContext(Context$3).surface;
+    var surface = React$b.useContext(Context$3).surface;
     return (React__default["default"].createElement("span", __assign$2({ className: classNames((_b = {
                 "arc-Text": true
             },
@@ -1533,26 +1553,31 @@ var Text = function (_a) {
 };
 
 /**
- * Use `FormControlDisclosure` to display content that is only visible when toggled into
+ * Use `DisclosureMini` to display content that is only visible when toggled into
  * an "open" state.
  */
-var FormControlDisclosure = function (_a) {
-    var children = _a.children, summary = _a.summary, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? "l" : _b, id = _a.id, props = __rest$2(_a, ["children", "summary", "onClick", "size", "id"]);
-    var surface = React$a.useContext(Context$3).surface;
-    var _c = React$a.useState(false), disclousreState = _c[0], setDisclosureState = _c[1];
+var DisclosureMini = function (_a) {
+    var children = _a.children, summary = _a.summary, onClick = _a.onClick, id = _a.id, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? "left" : _c, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest$2(_a, ["children", "summary", "onClick", "id", "isOpen", "iconPosition", "size"]);
+    var surface = React$b.useContext(Context$3).surface;
+    var _e = React$b.useState(false), disclousreState = _e[0], setDisclosureState = _e[1];
     var handleOnClick = function () {
         onClick && onClick();
         setDisclosureState(function (prevState) { return !prevState; });
     };
-    return (React__default["default"].createElement("details", __assign$2({ className: classNames({
-            "arc-FormControlDisclosure": true,
-            "arc-FormControlDisclosure--onDarkSurface": surface === "dark"
-        }) }, filterDataAttrs(props), { "data-testid": "FormControlDisclosure" }),
-        React__default["default"].createElement("summary", { className: "arc-FormControlDisclosure-summary", onClick: handleOnClick, "aria-expanded": disclousreState },
-            React__default["default"].createElement("span", { className: "arc-FormControlDisclosure-summary-icon" },
-                React__default["default"].createElement(BtIconChevronRightMid_2, null)),
+    return (React__default["default"].createElement("details", __assign$2({ "data-testid": "DisclosureMini", className: classNames({
+            "arc-DisclosureMini": true,
+            "arc-DisclosureMini--onDarkSurface": surface === "dark"
+        }), open: isOpen }, filterDataAttrs(props)),
+        React__default["default"].createElement("summary", { "data-testid": "DisclosureMiniSummary", className: classNames("arc-DisclosureMini-summary", {
+                "arc-DisclosureMini-summary--icon-left": iconPosition === "left",
+                "arc-DisclosureMini-summary--icon-right": iconPosition === "right"
+            }), onClick: handleOnClick, "aria-expanded": disclousreState },
+            React__default["default"].createElement("div", { className: classNames("arc-DisclosureMini-summary-icon", {
+                    "arc-DisclosureMini-summary-icon--small": size === "s"
+                }) },
+                React__default["default"].createElement(BtIconChevronDown2Px_2, null)),
             React__default["default"].createElement(Text, { size: size === "l" ? "m" : "s" }, summary)),
-        React__default["default"].createElement("div", { className: "arc-FormControlDisclosure-details" },
+        React__default["default"].createElement("div", { className: "arc-DisclosureMini-details" },
             React__default["default"].createElement(Text, { size: size === "l" ? "m" : "s" },
                 React__default["default"].createElement("span", { id: id }, children)))));
 };
@@ -1560,14 +1585,14 @@ var FormControlDisclosure = function (_a) {
 var defaultContext$2 = {
     requirementStatus: null
 };
-var Context$2 = React$a.createContext(defaultContext$2);
+var Context$2 = React$b.createContext(defaultContext$2);
 var Provider$3 = Context$2.Provider;
 /**
  * Use `FormControl` to provide inputs with labels, helper text and error messages
  */
 var FormControl = function (_a) {
-    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, _e = _a.helperUnderLabel, helperUnderLabel = _e === void 0 ? false : _e, isDisabled = _a.isDisabled, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest$2(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus", "helperUnderLabel", "isDisabled", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
-    var surface = React$a.useContext(Context$3).surface;
+    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, _e = _a.helperUnderLabel, helperUnderLabel = _e === void 0 ? false : _e, isDisabled = _a.isDisabled, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest$2(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "requirementStatus", "helperUnderLabel", "isDisabled", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
+    var surface = React$b.useContext(Context$3).surface;
     var _f = useAriaDescribedby({
         disclosureText: disclosureText,
         errorMessage: errorMessage,
@@ -1601,23 +1626,26 @@ var FormControl = function (_a) {
                 requirementStatus === "optional" && (React__default["default"].createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
             helperUnderLabel && (React__default["default"].createElement(React__default["default"].Fragment, null, helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)))),
             children,
-            !helperUnderLabel && (React__default["default"].createElement(React__default["default"].Fragment, null, errorMessage ? (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError },
-                React__default["default"].createElement("span", { className: "arc-FormControl-error--icon" },
-                    React__default["default"].createElement(BtIconAlert_2, null)),
-                errorMessage)) : disclosureTitle ? (React__default["default"].createElement(FormControlDisclosure, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))));
+            React__default["default"].createElement("div", { className: "arc-FormControl-info" },
+                !helperUnderLabel && (React__default["default"].createElement("div", { className: "arc-FormControl-helperContainer" }, errorMessage ? (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError },
+                    React__default["default"].createElement("span", { className: "arc-FormControl-error--icon" },
+                        React__default["default"].createElement(BtIconAlert_2, null)),
+                    errorMessage)) : disclosureTitle ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText))) : (helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))),
+                supplementaryInfo && (React__default["default"].createElement("div", { className: "arc-FormControl-supplementaryInfo" }, supplementaryInfo))))));
 };
 
 /**
  *  Use `Checkbox` to allow users to select individual options.
  */
-var Checkbox = React$a.forwardRef(function (_a, ref) {
-    var _b = _a.checked, checked = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _e = _a.size, size = _e === void 0 ? "l" : _e, value = _a.value, props = __rest$2(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "name", "onBlur", "onChange", "size", "value"]);
-    var requirementStatus = React$a.useContext(Context$2).requirementStatus;
-    var surface = React$a.useContext(Context$3).surface;
-    var _f = useAriaDescribedby({
+var Checkbox = React$b.forwardRef(function (_a, ref) {
+    var _b = _a.checked, checked = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _e = _a.size, size = _e === void 0 ? "l" : _e, value = _a.value, _f = _a.checkboxAlignment, checkboxAlignment = _f === void 0 ? "center" : _f, props = __rest$2(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "name", "onBlur", "onChange", "size", "value", "checkboxAlignment"]);
+    var requirementStatus = React$b.useContext(Context$2).requirementStatus;
+    var surface = React$b.useContext(Context$3).surface;
+    var _g = useAriaDescribedby({
         id: id,
         errorMessage: errorMessage
-    }), ariaDescribedby = _f.ariaDescribedby, idError = _f.idError;
+    }), ariaDescribedby = _g.ariaDescribedby, idError = _g.idError;
     var idLabel = "".concat(id, "-label");
     var checkedProps = {};
     if (typeof onChange === "function") {
@@ -1636,11 +1664,15 @@ var Checkbox = React$a.forwardRef(function (_a, ref) {
             "arc-Checkbox--small": size === "s",
             "arc-Checkbox--onDarkSurface": surface === "dark"
         }) },
-        React__default["default"].createElement("label", { id: idLabel, htmlFor: id, className: "arc-Checkbox-label" },
+        React__default["default"].createElement("label", { id: idLabel, htmlFor: id, className: classNames("arc-Checkbox-label", {
+                "arc-Checkbox-label--top": checkboxAlignment === "top"
+            }) },
             React__default["default"].createElement("input", __assign$2({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
             React__default["default"].createElement("span", { className: "arc-Checkbox-box" },
                 React__default["default"].createElement(BtIconTickAlt2Px_2, null)),
-            React__default["default"].createElement("span", null,
+            React__default["default"].createElement("span", __assign$2({}, (checkboxAlignment === "top" && {
+                className: "arc-Checkbox-content--marginTop"
+            })),
                 label,
                 !isRequired && requirementStatus !== "optional" ? (React__default["default"].createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
                 helper && React__default["default"].createElement("span", { className: "arc-Checkbox-helper" }, helper))),
@@ -1655,9 +1687,9 @@ var Checkbox = React$a.forwardRef(function (_a, ref) {
  */
 var Clock = function (_a) {
     var _b = _a.locale, locale = _b === void 0 ? "en-GB" : _b, props = __rest$2(_a, ["locale"]);
-    var _c = React$a.useState(new Date()), time = _c[0], setTime = _c[1];
-    var _d = React$a.useState(time.toLocaleTimeString(locale)), humanTime = _d[0], setHumanTime = _d[1];
-    React$a.useEffect(function () {
+    var _c = React$b.useState(new Date()), time = _c[0], setTime = _c[1];
+    var _d = React$b.useState(time.toLocaleTimeString(locale)), humanTime = _d[0], setHumanTime = _d[1];
+    React$b.useEffect(function () {
         var tick = function () {
             var newTime = new Date();
             setTime(newTime);
@@ -1685,7 +1717,7 @@ var Clock_rehydrator = (function (el) { return __awaiter(void 0, void 0, void 0,
  */
 var Columns = function (_a) {
     var children = _a.children, _b = _a.isGutterless, isGutterless = _b === void 0 ? false : _b, props = __rest$2(_a, ["children", "isGutterless"]);
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== Col) {
                 throw new Error("Illegal child passed to <Columns />. Ensure to only use <Columns.Col />.");
@@ -1743,33 +1775,13 @@ var Curve = function (_a) {
             _b)) }, filterDataAttrs(props))));
 };
 
-const React$2 = React__default["default"];
-const BtIconChevronDown2Px = 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:
-        "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"
-    })
-  );
-var BtIconChevronDown2Px_2 = BtIconChevronDown2Px;
-
 /**
  * Use `Disclosure` to display content that is only visible when toggled into
  * an "open" state.
  */
 var Disclosure = function (_a) {
     var children = _a.children, headingLevel = _a.headingLevel, _b = _a.indentDetails, indentDetails = _b === void 0 ? false : _b, _c = _a.isOpen, isOpen = _c === void 0 ? false : _c, summary = _a.summary, props = __rest$2(_a, ["children", "headingLevel", "indentDetails", "isOpen", "summary"]);
-    var surface = React$a.useContext(Context$3).surface;
+    var surface = React$b.useContext(Context$3).surface;
     return (React__default["default"].createElement("details", __assign$2({ className: classNames({
             "arc-Disclosure": true,
             "arc-Disclosure--indentDetails": indentDetails,
@@ -1787,21 +1799,132 @@ var Disclosure = function (_a) {
  */
 var Elevation = function (_a) {
     var _b;
-    var children = _a.children, _c = _a.isFullWidth, isFullWidth = _c === void 0 ? false : _c, props = __rest$2(_a, ["children", "isFullWidth"]);
+    var children = _a.children, _c = _a.elevationLevel, elevationLevel = _c === void 0 ? "2" : _c, _d = _a.isFullWidth, isFullWidth = _d === void 0 ? false : _d, props = __rest$2(_a, ["children", "elevationLevel", "isFullWidth"]);
     return (React__default["default"].createElement("div", __assign$2({ className: classNames((_b = {},
             _b["arc-Elevation"] = true,
+            _b["arc-Elevation--levelOne"] = elevationLevel === "1",
+            _b["arc-Elevation--levelTwo"] = elevationLevel === "2",
             _b["arc-Elevation--fullWidth"] = isFullWidth,
             _b)) }, filterDataAttrs(props)), children));
 };
 
+var FilterControl = function (_a) {
+    var children = _a.children, onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b;
+    var surface = React$b.useContext(Context$3).surface;
+    var _c = React$b.useState(isSelected), selected = _c[0], setSelected = _c[1];
+    var onClickHandler = function () {
+        onClick && onClick();
+        setSelected(function (previousValue) { return !previousValue; });
+    };
+    return (React__default["default"].createElement("button", { className: classNames("arc-FilterControl", {
+            "arc-FilterControl--onDarkSurface": surface === "dark",
+            "arc-FilterControl--selected": selected
+        }), onClick: onClickHandler, tabIndex: 0 },
+        React__default["default"].createElement("div", { className: "arc-FilterControl-text" }, children)));
+};
+
+var FilterControls = function (_a) {
+    var children = _a.children, controlsAlignment = _a.controlsAlignment, props = __rest$2(_a, ["children", "controlsAlignment"]);
+    return (React__default["default"].createElement("div", __assign$2({ className: classNames("arc-FilterControls", {
+            "arc-FilterControls--alignLeft": controlsAlignment === "left",
+            "arc-FilterControls--alignRight": controlsAlignment === "right"
+        }) }, filterDataAttrs(props)), children));
+};
+
+var FilterItem = function (_a) {
+    var children = _a.children, props = __rest$2(_a, ["children"]);
+    return (React__default["default"].createElement("div", __assign$2({ className: "arc-FilterItem" }, filterDataAttrs(props)), children));
+};
+
+var FilterItems = function (_a) {
+    var children = _a.children, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b, props = __rest$2(_a, ["children", "displayType"]);
+    return (React__default["default"].createElement("div", __assign$2({ className: classNames("arc-FilterItems", {
+            "arc-FilterItems--list": displayType === "list",
+            "arc-FilterItems--grid": displayType === "grid"
+        }) }, filterDataAttrs(props)), displayType === "list"
+        ? React__default["default"].Children.toArray(children).map(function (child, index, array) { return (React__default["default"].createElement(React__default["default"].Fragment, { key: index },
+            child,
+            index !== array.length - 1 && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("div", { className: "arc-FilterItems-separator", "data-testid": "arc-FilterItems-separator" }))))); })
+        : children));
+};
+
+/** use `Filter` for interactive elements that filter and categorise page content. */
+var Filter = function (_a) {
+    var children = _a.children, onChange = _a.onChange, displayType = _a.displayType, controlsAlignment = _a.controlsAlignment, _b = _a.logicType, logicType = _b === void 0 ? "OR" : _b, error = _a.error, props = __rest$2(_a, ["children", "onChange", "displayType", "controlsAlignment", "logicType", "error"]);
+    var _c = React$b.useState([]), selectedControls = _c[0], setSelectedControls = _c[1];
+    var controls = React__default["default"].Children.toArray(children).find(function (child) { return React__default["default"].isValidElement(child) && child.type === FilterControls; });
+    var items = React__default["default"].Children.toArray(children).find(function (child) { return React__default["default"].isValidElement(child) && child.type === FilterItems; });
+    React$b.useEffect(function () {
+        var initialSelectedControls = [];
+        if (controls && React__default["default"].isValidElement(controls)) {
+            React__default["default"].Children.forEach(controls.props.children, function (child) {
+                if (child.props.isSelected) {
+                    initialSelectedControls.push(child.props.children);
+                }
+            });
+        }
+        setSelectedControls(initialSelectedControls);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var handleControlClick = function (clickedControl) {
+        if (selectedControls.includes(clickedControl)) {
+            var updatedControls = selectedControls.filter(function (control) { return control !== clickedControl; });
+            setSelectedControls(updatedControls);
+            if (onChange) {
+                onChange(updatedControls);
+            }
+        }
+        else {
+            var updatedControls = __spreadArray$1(__spreadArray$1([], selectedControls, true), [clickedControl], false);
+            setSelectedControls(updatedControls);
+            if (onChange) {
+                onChange(updatedControls);
+            }
+        }
+    };
+    var filterItems = React__default["default"].Children.toArray(items && React__default["default"].isValidElement(items) && items.props.children);
+    var filteredItems = filterItems.filter(function (filteredItem) {
+        // If no tags are selected, show all items
+        if (selectedControls.length === 0) {
+            return true;
+        }
+        // If logicType is "AND", all selected tags should be present in the item's tags
+        if (logicType === "AND") {
+            return selectedControls.every(function (control) {
+                return filteredItem.props.tags.includes(control);
+            });
+        }
+        else {
+            // Check if item has tags property and if any selected tags are present in item's tags
+            return selectedControls.some(function (control) {
+                return filteredItem.props.tags.includes(control);
+            });
+        }
+    });
+    return (React__default["default"].createElement("div", __assign$2({ className: "arc-Filter" }, filterDataAttrs(props)),
+        React__default["default"].createElement(FilterControls, { controlsAlignment: controlsAlignment }, controls &&
+            React__default["default"].isValidElement(controls) &&
+            React__default["default"].Children.map(controls.props.children, function (control, index) { return (React__default["default"].createElement(FilterControl, { key: index, onClick: function () { return handleControlClick(control.props.children); }, isSelected: control.props.isSelected }, control.props.children)); })),
+        filteredItems.length === 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null, error)) : (React__default["default"].createElement(FilterItems, { displayType: displayType }, filteredItems.map(function (item) { return item.props.children; })))));
+};
+Filter.Controls = FilterControls;
+Filter.Control = FilterControl;
+Filter.Items = FilterItems;
+Filter.Item = FilterItem;
+FilterControls.displayName = "Filter.Controls";
+FilterControl.displayName = "Filter.Control";
+FilterItems.displayName = "Filter.Items";
+FilterItem.displayName = "Filter.Item";
+
 /**
  * Use `Group` to arrange flexible items in a row.
  */
 var Group = function (_a) {
     var _b;
     var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.growEqual, growEqual = _d === void 0 ? false : _d, _e = _a.gutterBorder, gutterBorder = _e === void 0 ? false : _e, _f = _a.noWrap, noWrap = _f === void 0 ? false : _f, props = __rest$2(_a, ["children", "grow", "growEqual", "gutterBorder", "noWrap"]);
-    var surface = React$a.useContext(Context$3).surface;
-    React$a.useEffect(function () {
+    var surface = React$b.useContext(Context$3).surface;
+    React$b.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== GroupItem) {
                 throw new Error("Illegal child passed to <Group />. Ensure to only use <Group.Item />.");
@@ -1835,7 +1958,7 @@ Group.Item = GroupItem;
  */
 var Markup = function (_a) {
     var children = _a.children, _b = _a.isMeasured, isMeasured = _b === void 0 ? false : _b, props = __rest$2(_a, ["children", "isMeasured"]);
-    var surface = React$a.useContext(Context$3).surface;
+    var surface = React$b.useContext(Context$3).surface;
     return (React__default["default"].createElement("div", __assign$2({ className: classNames({
             "arc-Markup": true,
             "arc-Markup--measured": isMeasured,
@@ -1848,7 +1971,7 @@ var Markup = function (_a) {
  */
 var UniversalHeader = function (_a) {
     var children = _a.children, props = __rest$2(_a, ["children"]);
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         React__default["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 />.");
@@ -1903,20 +2026,20 @@ Poster.Image = PosterImage;
 PosterVideo.displayName = "Poster.Video";
 Poster.Video = PosterVideo;
 
-var RadioContext = React$a.createContext({});
+var RadioContext = React$b.createContext({});
 var Provider$2 = RadioContext.Provider;
 var useRadioContext = function () {
-    var context = React$a.useContext(RadioContext);
+    var context = React$b.useContext(RadioContext);
     return context;
 };
 
 /**
  * Radio Button component.
  */
-var RadioButton = React$a.forwardRef(function (_a, ref) {
+var RadioButton = React$b.forwardRef(function (_a, ref) {
     var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, props = __rest$2(_a, ["helper", "id", "isDisabled", "label", "value"]);
     var _b = useRadioContext(), blurEvent = _b.blurEvent, changeEvent = _b.changeEvent, groupDisabled = _b.groupDisabled, checkedValue = _b.checkedValue, labelSize = _b.labelSize, name = _b.name, size = _b.size;
-    var surface = React$a.useContext(Context$3).surface;
+    var surface = React$b.useContext(Context$3).surface;
     var idLabel = "".concat(id, "-label");
     var checked = checkedValue === value ? true : false;
     return (React__default["default"].createElement("div", __assign$2({ className: classNames({
@@ -1938,7 +2061,7 @@ var RadioButton = React$a.forwardRef(function (_a, ref) {
  */
 var RadioGroup = function (_a) {
     var children = _a.children, checkedValue = _a.checkedValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, id = _a.id, helper = _a.helper, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest$2(_a, ["children", "checkedValue", "isDisabled", "id", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== RadioButton) {
                 throw new Error("Illegal child passed to <RadioGroup />. Ensure to only use <RadioGroup.RadioButton />.");
@@ -1964,7 +2087,7 @@ RadioGroup.RadioButton = RadioButton;
  * Use `Rule` to display a horizontal rule.
  */
 var Rule = function (props) {
-    var surface = React$a.useContext(Context$3).surface;
+    var surface = React$b.useContext(Context$3).surface;
     return (React__default["default"].createElement("hr", __assign$2({ className: classNames({
             "arc-Rule": true,
             "arc-Rule--onDarkSurface": surface === "dark"
@@ -32880,7 +33003,7 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
     /* -----------------------------------------------------------------------------------------------
    * createContext
    * ---------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$export$fd42f52fd3ae1109(rootComponentName, defaultContext) {
-        const BaseContext = /*#__PURE__*/ React$a.createContext(defaultContext);
+        const BaseContext = /*#__PURE__*/ React$b.createContext(defaultContext);
         const index = defaultContexts.length;
         defaultContexts = [
             ...defaultContexts,
@@ -32890,15 +33013,15 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
             const { scope: scope , children: children , ...context } = props;
             const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext; // Only re-memoize when prop values change
             // eslint-disable-next-line react-hooks/exhaustive-deps
-            const value = React$a.useMemo(()=>context
+            const value = React$b.useMemo(()=>context
             , Object.values(context));
-            return /*#__PURE__*/ React$a.createElement(Context.Provider, {
+            return /*#__PURE__*/ React$b.createElement(Context.Provider, {
                 value: value
             }, children);
         }
         function useContext(consumerName, scope) {
             const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext;
-            const context = React$a.useContext(Context);
+            const context = React$b.useContext(Context);
             if (context) return context;
             if (defaultContext !== undefined) return defaultContext; // if a defaultContext wasn't specified, it's a required context.
             throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
@@ -32913,11 +33036,11 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
    * createScope
    * ---------------------------------------------------------------------------------------------*/ const createScope = ()=>{
         const scopeContexts = defaultContexts.map((defaultContext)=>{
-            return /*#__PURE__*/ React$a.createContext(defaultContext);
+            return /*#__PURE__*/ React$b.createContext(defaultContext);
         });
         return function useScope(scope) {
             const contexts = (scope === null || scope === void 0 ? void 0 : scope[scopeName]) || scopeContexts;
-            return React$a.useMemo(()=>({
+            return React$b.useMemo(()=>({
                     [`__scope${scopeName}`]: {
                         ...scope,
                         [scopeName]: contexts
@@ -32958,7 +33081,7 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
                     ...currentScope
                 };
             }, {});
-            return React$a.useMemo(()=>({
+            return React$b.useMemo(()=>({
                     [`__scope${baseScope.scopeName}`]: nextScopes1
                 })
             , [
@@ -32990,14 +33113,14 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
  * Accepts callback refs and RefObject(s)
  */ function $6ed0406888f73fc4$export$c7b2cbe3552a0d05(...refs) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    return React$a.useCallback($6ed0406888f73fc4$export$43e446d32b3d21af(...refs), refs);
+    return React$b.useCallback($6ed0406888f73fc4$export$43e446d32b3d21af(...refs), refs);
 }
 
 /* -------------------------------------------------------------------------------------------------
  * Slot
- * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     const { children: children , ...slotProps } = props;
-    const childrenArray = React$a.Children.toArray(children);
+    const childrenArray = React$b.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`
@@ -33006,37 +33129,37 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
             if (child === slottable) {
                 // because the new element will be the one rendered, we are only interested
                 // in grabbing its children (`newElement.props.children`)
-                if (React$a.Children.count(newElement) > 1) return React$a.Children.only(null);
-                return /*#__PURE__*/ React$a.isValidElement(newElement) ? newElement.props.children : null;
+                if (React$b.Children.count(newElement) > 1) return React$b.Children.only(null);
+                return /*#__PURE__*/ React$b.isValidElement(newElement) ? newElement.props.children : null;
             } else return child;
         });
-        return /*#__PURE__*/ React$a.createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
+        return /*#__PURE__*/ React$b.createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
             ref: forwardedRef
-        }), /*#__PURE__*/ React$a.isValidElement(newElement) ? /*#__PURE__*/ React$a.cloneElement(newElement, undefined, newChildren) : null);
+        }), /*#__PURE__*/ React$b.isValidElement(newElement) ? /*#__PURE__*/ React$b.cloneElement(newElement, undefined, newChildren) : null);
     }
-    return /*#__PURE__*/ React$a.createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
+    return /*#__PURE__*/ React$b.createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
         ref: forwardedRef
     }), children);
 });
 $5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';
 /* -------------------------------------------------------------------------------------------------
  * SlotClone
- * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     const { children: children , ...slotProps } = props;
-    if (/*#__PURE__*/ React$a.isValidElement(children)) return /*#__PURE__*/ React$a.cloneElement(children, {
+    if (/*#__PURE__*/ React$b.isValidElement(children)) return /*#__PURE__*/ React$b.cloneElement(children, {
         ...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
         ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref)
     });
-    return React$a.Children.count(children) > 1 ? React$a.Children.only(null) : null;
+    return React$b.Children.count(children) > 1 ? React$b.Children.only(null) : null;
 });
 $5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone';
 /* -------------------------------------------------------------------------------------------------
  * Slottable
  * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children  })=>{
-    return /*#__PURE__*/ React$a.createElement(React$a.Fragment, null, children);
+    return /*#__PURE__*/ React$b.createElement(React$b.Fragment, null, children);
 };
 /* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable(child) {
-    return /*#__PURE__*/ React$a.isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
+    return /*#__PURE__*/ React$b.isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
 }
 function $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
     // all child props should override
@@ -33156,9 +33279,9 @@ function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
     ];
 }
 
-const $f631663db3294ace$var$DirectionContext = /*#__PURE__*/ React$a.createContext(undefined);
+const $f631663db3294ace$var$DirectionContext = /*#__PURE__*/ React$b.createContext(undefined);
 /* -----------------------------------------------------------------------------------------------*/ function $f631663db3294ace$export$b39126d51d94e6f3(localDir) {
-    const globalDir = React$a.useContext($f631663db3294ace$var$DirectionContext);
+    const globalDir = React$b.useContext($f631663db3294ace$var$DirectionContext);
     return localDir || globalDir || 'ltr';
 }
 
@@ -33183,13 +33306,13 @@ const $8927f6f2acc4f386$var$NODES = [
 /* -------------------------------------------------------------------------------------------------
  * Primitive
  * -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{
-    const Node = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+    const Node = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
         const { asChild: asChild , ...primitiveProps } = props;
         const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : node;
-        React$a.useEffect(()=>{
+        React$b.useEffect(()=>{
             window[Symbol.for('radix-ui')] = true;
         }, []);
-        return /*#__PURE__*/ React$a.createElement(Comp, _extends({}, primitiveProps, {
+        return /*#__PURE__*/ React$b.createElement(Comp, _extends({}, primitiveProps, {
             ref: forwardedRef
         }));
     });
@@ -33245,11 +33368,11 @@ const $8927f6f2acc4f386$var$NODES = [
  * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
  * prop or avoid re-executing effects when passed as a dependency
  */ function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(callback) {
-    const callbackRef = React$a.useRef(callback);
-    React$a.useEffect(()=>{
+    const callbackRef = React$b.useRef(callback);
+    React$b.useEffect(()=>{
         callbackRef.current = callback;
     }); // https://github.com/facebook/react/issues/19240
-    return React$a.useMemo(()=>(...args)=>{
+    return React$b.useMemo(()=>(...args)=>{
             var _callbackRef$current;
             return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);
         }
@@ -33260,7 +33383,7 @@ const $8927f6f2acc4f386$var$NODES = [
  * Listens for when the escape key is down
  */ function $addc16e1bbe58fd0$export$3a72a57244d6e765(onEscapeKeyDownProp, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
     const onEscapeKeyDown = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onEscapeKeyDownProp);
-    React$a.useEffect(()=>{
+    React$b.useEffect(()=>{
         const handleKeyDown = (event)=>{
             if (event.key === 'Escape') onEscapeKeyDown(event);
         };
@@ -33277,18 +33400,18 @@ const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update';
 const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
 const $5cb92bef7577960e$var$FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';
 let $5cb92bef7577960e$var$originalBodyPointerEvents;
-const $5cb92bef7577960e$var$DismissableLayerContext = /*#__PURE__*/ React$a.createContext({
+const $5cb92bef7577960e$var$DismissableLayerContext = /*#__PURE__*/ React$b.createContext({
     layers: new Set(),
     layersWithOutsidePointerEventsDisabled: new Set(),
     branches: new Set()
 });
-const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     var _node$ownerDocument;
     const { disableOutsidePointerEvents: disableOutsidePointerEvents = false , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , ...layerProps } = props;
-    const context = React$a.useContext($5cb92bef7577960e$var$DismissableLayerContext);
-    const [node1, setNode] = React$a.useState(null);
+    const context = React$b.useContext($5cb92bef7577960e$var$DismissableLayerContext);
+    const [node1, setNode] = React$b.useState(null);
     const ownerDocument = (_node$ownerDocument = node1 === null || node1 === void 0 ? void 0 : node1.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : globalThis === null || globalThis === void 0 ? void 0 : globalThis.document;
-    const [, force] = React$a.useState({});
+    const [, force] = React$b.useState({});
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setNode(node)
     );
     const layers = Array.from(context.layers);
@@ -33330,7 +33453,7 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ React$a.forwardR
             onDismiss();
         }
     }, ownerDocument);
-    React$a.useEffect(()=>{
+    React$b.useEffect(()=>{
         if (!node1) return;
         if (disableOutsidePointerEvents) {
             if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
@@ -33355,7 +33478,7 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ React$a.forwardR
    * because a change to `disableOutsidePointerEvents` would remove this layer from the stack
    * and add it to the end again so the layering order wouldn't be _creation order_.
    * We only want them to be removed from context stacks when unmounted.
-   */ React$a.useEffect(()=>{
+   */ React$b.useEffect(()=>{
         return ()=>{
             if (!node1) return;
             context.layers.delete(node1);
@@ -33366,14 +33489,14 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ React$a.forwardR
         node1,
         context
     ]);
-    React$a.useEffect(()=>{
+    React$b.useEffect(()=>{
         const handleUpdate = ()=>force({})
         ;
         document.addEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate);
         return ()=>document.removeEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate)
         ;
     }, []);
-    return /*#__PURE__*/ React$a.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, layerProps, {
+    return /*#__PURE__*/ React$b.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, layerProps, {
         ref: composedRefs,
         style: {
             pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? 'auto' : 'none' : undefined,
@@ -33390,9 +33513,9 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ React$a.forwardR
  * Returns props to pass to the node we want to check for outside events.
  */ function $5cb92bef7577960e$var$usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
     const handlePointerDownOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onPointerDownOutside);
-    const isPointerInsideReactTreeRef = React$a.useRef(false);
-    const handleClickRef = React$a.useRef(()=>{});
-    React$a.useEffect(()=>{
+    const isPointerInsideReactTreeRef = React$b.useRef(false);
+    const handleClickRef = React$b.useRef(()=>{});
+    React$b.useEffect(()=>{
         const handlePointerDown = (event)=>{
             if (event.target && !isPointerInsideReactTreeRef.current) {
                 const eventDetail = {
@@ -33458,8 +33581,8 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ React$a.forwardR
  * Returns props to pass to the root (node) of the subtree we want to check.
  */ function $5cb92bef7577960e$var$useFocusOutside(onFocusOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
     const handleFocusOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onFocusOutside);
-    const isFocusInsideReactTreeRef = React$a.useRef(false);
-    React$a.useEffect(()=>{
+    const isFocusInsideReactTreeRef = React$b.useRef(false);
+    React$b.useEffect(()=>{
         const handleFocus = (event)=>{
             if (event.target && !isFocusInsideReactTreeRef.current) {
                 const eventDetail = {
@@ -33506,7 +33629,7 @@ function $5cb92bef7577960e$var$handleAndDispatchCustomEvent(name, handler, detai
  * Injects a pair of focus guards at the edges of the whole DOM tree
  * to ensure `focusin` & `focusout` events can be caught consistently.
  */ function $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c() {
-    React$a.useEffect(()=>{
+    React$b.useEffect(()=>{
         var _edgeGuards$, _edgeGuards$2;
         const edgeGuards = document.querySelectorAll('[data-radix-focus-guard]');
         document.body.insertAdjacentElement('afterbegin', (_edgeGuards$ = edgeGuards[0]) !== null && _edgeGuards$ !== void 0 ? _edgeGuards$ : $3db38b7d1fb3fe6a$var$createFocusGuard());
@@ -33533,15 +33656,15 @@ const $d3863c46a17e8a28$var$EVENT_OPTIONS = {
     bubbles: false,
     cancelable: true
 };
-const $d3863c46a17e8a28$export$20e40289641fbbb6 = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+const $d3863c46a17e8a28$export$20e40289641fbbb6 = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     const { loop: loop = false , trapped: trapped = false , onMountAutoFocus: onMountAutoFocusProp , onUnmountAutoFocus: onUnmountAutoFocusProp , ...scopeProps } = props;
-    const [container1, setContainer] = React$a.useState(null);
+    const [container1, setContainer] = React$b.useState(null);
     const onMountAutoFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onMountAutoFocusProp);
     const onUnmountAutoFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onUnmountAutoFocusProp);
-    const lastFocusedElementRef = React$a.useRef(null);
+    const lastFocusedElementRef = React$b.useRef(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setContainer(node)
     );
-    const focusScope = React$a.useRef({
+    const focusScope = React$b.useRef({
         paused: false,
         pause () {
             this.paused = true;
@@ -33550,7 +33673,7 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6 = /*#__PURE__*/ React$a.forwardR
             this.paused = false;
         }
     }).current; // Takes care of trapping focus if focus is moved outside programmatically for example
-    React$a.useEffect(()=>{
+    React$b.useEffect(()=>{
         if (trapped) {
             function handleFocusIn(event) {
                 if (focusScope.paused || !container1) return;
@@ -33578,7 +33701,7 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6 = /*#__PURE__*/ React$a.forwardR
         container1,
         focusScope.paused
     ]);
-    React$a.useEffect(()=>{
+    React$b.useEffect(()=>{
         if (container1) {
             $d3863c46a17e8a28$var$focusScopesStack.add(focusScope);
             const previouslyFocusedElement = document.activeElement;
@@ -33617,7 +33740,7 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6 = /*#__PURE__*/ React$a.forwardR
         onUnmountAutoFocus,
         focusScope
     ]); // Takes care of looping focus (when tabbing whilst at the edges)
-    const handleKeyDown = React$a.useCallback((event)=>{
+    const handleKeyDown = React$b.useCallback((event)=>{
         if (!loop && !trapped) return;
         if (focusScope.paused) return;
         const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;
@@ -33647,7 +33770,7 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6 = /*#__PURE__*/ React$a.forwardR
         trapped,
         focusScope.paused
     ]);
-    return /*#__PURE__*/ React$a.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
+    return /*#__PURE__*/ React$b.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
         tabIndex: -1
     }, scopeProps, {
         ref: composedRefs,
@@ -33777,7 +33900,7 @@ 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) ? React$a.useLayoutEffect : ()=>{};
+ */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? React$b.useLayoutEffect : ()=>{};
 
 const $1746a345f3d73bb7$var$useReactId = React__namespace['useId'.toString()] || (()=>undefined
 );
@@ -33793,10 +33916,10 @@ function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
     return deterministicId || (id ? `radix-${id}` : '');
 }
 
-const $f1701beae083dbae$export$602eac185826482c = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+const $f1701beae083dbae$export$602eac185826482c = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     var _globalThis$document;
     const { container: container = globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body , ...portalProps } = props;
-    return container ? /*#__PURE__*/ $7SXl2$reactdom.createPortal(/*#__PURE__*/ React$a.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, portalProps, {
+    return container ? /*#__PURE__*/ $7SXl2$reactdom.createPortal(/*#__PURE__*/ React$b.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, portalProps, {
         ref: forwardedRef
     })), container) : null;
 });
@@ -33809,7 +33932,7 @@ function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop: prop , defaultProp: de
     const isControlled = prop !== undefined;
     const value1 = isControlled ? prop : uncontrolledProp;
     const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
-    const setValue = React$a.useCallback((nextValue)=>{
+    const setValue = React$b.useCallback((nextValue)=>{
         if (isControlled) {
             const setter = nextValue;
             const value = typeof nextValue === 'function' ? setter(prop) : nextValue;
@@ -33827,11 +33950,11 @@ function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop: prop , defaultProp: de
     ];
 }
 function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp: defaultProp , onChange: onChange  }) {
-    const uncontrolledState = React$a.useState(defaultProp);
+    const uncontrolledState = React$b.useState(defaultProp);
     const [value] = uncontrolledState;
-    const prevValueRef = React$a.useRef(value);
+    const prevValueRef = React$b.useRef(value);
     const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
-    React$a.useEffect(()=>{
+    React$b.useEffect(()=>{
         if (prevValueRef.current !== value) {
             handleChange(value);
             prevValueRef.current = value;
@@ -33845,13 +33968,13 @@ function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp: defaultProp ,
 }
 
 function $010c2913dbd2fe3d$export$5cae361ad82dce8b(value) {
-    const ref = React$a.useRef({
+    const ref = React$b.useRef({
         value: value,
         previous: value
     }); // We compare values before making an update to ensure that
     // a change has been made. This ensures the previous value is
     // persisted correctly between renders.
-    return React$a.useMemo(()=>{
+    return React$b.useMemo(()=>{
         if (ref.current.value !== value) {
             ref.current.previous = ref.current.value;
             ref.current.value = value;
@@ -33862,8 +33985,8 @@ function $010c2913dbd2fe3d$export$5cae361ad82dce8b(value) {
     ]);
 }
 
-const $ea1ef594cf570d83$export$439d29a4e110a164 = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
-    return /*#__PURE__*/ React$a.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({}, props, {
+const $ea1ef594cf570d83$export$439d29a4e110a164 = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
+    return /*#__PURE__*/ React$b.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({}, props, {
         ref: forwardedRef,
         style: {
             // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
@@ -34105,7 +34228,7 @@ function assignRef(ref, value) {
  * @returns {MutableRefObject}
  */
 function useCallbackRef(initialValue, callback) {
-    var ref = React$a.useState(function () { return ({
+    var ref = React$b.useState(function () { return ({
         // value
         value: initialValue,
         // last callback
@@ -34746,9 +34869,9 @@ const [$cc7e05a45900e73f$var$SelectProvider, $cc7e05a45900e73f$var$useSelectCont
 const [$cc7e05a45900e73f$var$SelectNativeOptionsProvider, $cc7e05a45900e73f$var$useSelectNativeOptionsContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$SELECT_NAME);
 const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
     const { __scopeSelect: __scopeSelect , children: children , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , value: valueProp , defaultValue: defaultValue , onValueChange: onValueChange , dir: dir , name: name , autoComplete: autoComplete , disabled: disabled , required: required  } = props;
-    const [trigger, setTrigger] = React$a.useState(null);
-    const [valueNode, setValueNode] = React$a.useState(null);
-    const [valueNodeHasChildren, setValueNodeHasChildren] = React$a.useState(false);
+    const [trigger, setTrigger] = React$b.useState(null);
+    const [valueNode, setValueNode] = React$b.useState(null);
+    const [valueNodeHasChildren, setValueNodeHasChildren] = React$b.useState(false);
     const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
     const [open = false, setOpen] = $71cd76cc60e0454e$export$6f32135080cb4c3({
         prop: openProp,
@@ -34760,16 +34883,16 @@ const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
         defaultProp: defaultValue,
         onChange: onValueChange
     });
-    const triggerPointerDownPosRef = React$a.useRef(null); // We set this to true by default so that events bubble to forms without JS (SSR)
+    const triggerPointerDownPosRef = React$b.useRef(null); // We set this to true by default so that events bubble to forms without JS (SSR)
     const isFormControl = trigger ? Boolean(trigger.closest('form')) : true;
-    const [nativeOptionsSet, setNativeOptionsSet] = React$a.useState(new Set()); // The native `select` only associates the correct default value if the corresponding
+    const [nativeOptionsSet, setNativeOptionsSet] = React$b.useState(new Set()); // The native `select` only associates the correct default value if the corresponding
     // `option` is rendered as a child **at the same time** as itself.
     // Because it might take a few renders for our items to gather the information to build
     // the native `option`(s), we generate a key on the `select` to make sure React re-builds it
     // each time the options change.
     const nativeSelectKey = Array.from(nativeOptionsSet).map((option)=>option.props.value
     ).join(';');
-    return /*#__PURE__*/ React$a.createElement($cc7e05a45900e73f$var$SelectProvider, {
+    return /*#__PURE__*/ React$b.createElement($cc7e05a45900e73f$var$SelectProvider, {
         required: required,
         scope: __scopeSelect,
         trigger: trigger,
@@ -34786,22 +34909,22 @@ const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
         dir: direction,
         triggerPointerDownPosRef: triggerPointerDownPosRef,
         disabled: disabled
-    }, /*#__PURE__*/ React$a.createElement($cc7e05a45900e73f$var$Collection.Provider, {
+    }, /*#__PURE__*/ React$b.createElement($cc7e05a45900e73f$var$Collection.Provider, {
         scope: __scopeSelect
-    }, /*#__PURE__*/ React$a.createElement($cc7e05a45900e73f$var$SelectNativeOptionsProvider, {
+    }, /*#__PURE__*/ React$b.createElement($cc7e05a45900e73f$var$SelectNativeOptionsProvider, {
         scope: props.__scopeSelect,
-        onNativeOptionAdd: React$a.useCallback((option)=>{
+        onNativeOptionAdd: React$b.useCallback((option)=>{
             setNativeOptionsSet((prev)=>new Set(prev).add(option)
             );
         }, []),
-        onNativeOptionRemove: React$a.useCallback((option)=>{
+        onNativeOptionRemove: React$b.useCallback((option)=>{
             setNativeOptionsSet((prev)=>{
                 const optionsSet = new Set(prev);
                 optionsSet.delete(option);
                 return optionsSet;
             });
         }, [])
-    }, children)), isFormControl ? /*#__PURE__*/ React$a.createElement($cc7e05a45900e73f$var$BubbleSelect, {
+    }, children)), isFormControl ? /*#__PURE__*/ React$b.createElement($cc7e05a45900e73f$var$BubbleSelect, {
         key: nativeSelectKey,
         "aria-hidden": true,
         required: required,
@@ -34813,14 +34936,14 @@ const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
         onChange: (event)=>setValue(event.target.value)
         ,
         disabled: disabled
-    }, value === undefined ? /*#__PURE__*/ React$a.createElement("option", {
+    }, value === undefined ? /*#__PURE__*/ React$b.createElement("option", {
         value: ""
     }) : null, Array.from(nativeOptionsSet)) : null);
 };
 /* -------------------------------------------------------------------------------------------------
  * SelectTrigger
  * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$TRIGGER_NAME = 'SelectTrigger';
-const $cc7e05a45900e73f$export$3ac1e88a1c0b9f1 = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+const $cc7e05a45900e73f$export$3ac1e88a1c0b9f1 = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     const { __scopeSelect: __scopeSelect , disabled: disabled = false , ...triggerProps } = props;
     const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$TRIGGER_NAME, __scopeSelect);
     const isDisabled = context.disabled || disabled;
@@ -34840,7 +34963,7 @@ const $cc7e05a45900e73f$export$3ac1e88a1c0b9f1 = /*#__PURE__*/ React$a.forwardRe
             resetTypeahead();
         }
     };
-    return /*#__PURE__*/ React$a.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends({
+    return /*#__PURE__*/ React$b.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends({
         type: "button",
         role: "combobox",
         "aria-controls": context.contentId,
@@ -34894,7 +35017,7 @@ const $cc7e05a45900e73f$export$3ac1e88a1c0b9f1 = /*#__PURE__*/ React$a.forwardRe
 /* -------------------------------------------------------------------------------------------------
  * SelectValue
  * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$VALUE_NAME = 'SelectValue';
-const $cc7e05a45900e73f$export$e288731fd71264f0 = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+const $cc7e05a45900e73f$export$e288731fd71264f0 = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     // We ignore `className` and `style` as this part shouldn't be styled.
     const { __scopeSelect: __scopeSelect , className: className , style: style , children: children , placeholder: placeholder , ...valueProps } = props;
     const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$VALUE_NAME, __scopeSelect);
@@ -34907,7 +35030,7 @@ const $cc7e05a45900e73f$export$e288731fd71264f0 = /*#__PURE__*/ React$a.forwardR
         onValueNodeHasChildrenChange,
         hasChildren
     ]);
-    return /*#__PURE__*/ React$a.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({}, valueProps, {
+    return /*#__PURE__*/ React$b.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({}, valueProps, {
         ref: composedRefs // we don't want events from the portalled `SelectValue` children to bubble
         ,
         style: {
@@ -34915,67 +35038,67 @@ const $cc7e05a45900e73f$export$e288731fd71264f0 = /*#__PURE__*/ React$a.forwardR
         }
     }), context.value === undefined && placeholder !== undefined ? placeholder : children);
 });
-const $cc7e05a45900e73f$export$99b400cabb58c515 = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+const $cc7e05a45900e73f$export$99b400cabb58c515 = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     const { __scopeSelect: __scopeSelect , children: children , ...iconProps } = props;
-    return /*#__PURE__*/ React$a.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({
+    return /*#__PURE__*/ React$b.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({
         "aria-hidden": true
     }, iconProps, {
         ref: forwardedRef
     }), children || '▼');
 });
 const $cc7e05a45900e73f$export$b2af6c9944296213 = (props)=>{
-    return /*#__PURE__*/ React$a.createElement($f1701beae083dbae$export$602eac185826482c, _extends({
+    return /*#__PURE__*/ React$b.createElement($f1701beae083dbae$export$602eac185826482c, _extends({
         asChild: true
     }, props));
 };
 /* -------------------------------------------------------------------------------------------------
  * SelectContent
  * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$CONTENT_NAME = 'SelectContent';
-const $cc7e05a45900e73f$export$c973a4b3cb86a03d = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+const $cc7e05a45900e73f$export$c973a4b3cb86a03d = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$CONTENT_NAME, props.__scopeSelect);
-    const [fragment, setFragment] = React$a.useState(); // setting the fragment in `useLayoutEffect` as `DocumentFragment` doesn't exist on the server
+    const [fragment, setFragment] = React$b.useState(); // setting the fragment in `useLayoutEffect` as `DocumentFragment` doesn't exist on the server
     $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
         setFragment(new DocumentFragment());
     }, []);
-    return /*#__PURE__*/ React$a.createElement(React$a.Fragment, null, context.open ? /*#__PURE__*/ React$a.createElement($cc7e05a45900e73f$var$SelectContentImpl, _extends({}, props, {
+    return /*#__PURE__*/ React$b.createElement(React$b.Fragment, null, context.open ? /*#__PURE__*/ React$b.createElement($cc7e05a45900e73f$var$SelectContentImpl, _extends({}, props, {
         ref: forwardedRef
-    })) : fragment ? /*#__PURE__*/ reactDom.exports.createPortal(/*#__PURE__*/ React$a.createElement($cc7e05a45900e73f$var$SelectContentProvider, {
+    })) : fragment ? /*#__PURE__*/ reactDom.exports.createPortal(/*#__PURE__*/ React$b.createElement($cc7e05a45900e73f$var$SelectContentProvider, {
         scope: props.__scopeSelect
-    }, /*#__PURE__*/ React$a.createElement($cc7e05a45900e73f$var$Collection.Slot, {
+    }, /*#__PURE__*/ React$b.createElement($cc7e05a45900e73f$var$Collection.Slot, {
         scope: props.__scopeSelect
-    }, /*#__PURE__*/ React$a.createElement("div", null, props.children))), fragment) : null);
+    }, /*#__PURE__*/ React$b.createElement("div", null, props.children))), fragment) : null);
 });
 const $cc7e05a45900e73f$var$CONTENT_MARGIN = 10;
 const [$cc7e05a45900e73f$var$SelectContentProvider, $cc7e05a45900e73f$var$useSelectContentContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$CONTENT_NAME);
-const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     const { __scopeSelect: __scopeSelect , onCloseAutoFocus: onCloseAutoFocus , ...contentProps } = props;
     const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$CONTENT_NAME, __scopeSelect);
-    const [contentWrapper, setContentWrapper] = React$a.useState(null);
-    const [content, setContent] = React$a.useState(null);
-    const [viewport, setViewport] = React$a.useState(null);
+    const [contentWrapper, setContentWrapper] = React$b.useState(null);
+    const [content, setContent] = React$b.useState(null);
+    const [viewport, setViewport] = React$b.useState(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setContent(node)
     );
-    const [selectedItem, setSelectedItem] = React$a.useState(null);
-    const [selectedItemText, setSelectedItemText] = React$a.useState(null);
+    const [selectedItem, setSelectedItem] = React$b.useState(null);
+    const [selectedItemText, setSelectedItemText] = React$b.useState(null);
     const getItems = $cc7e05a45900e73f$var$useCollection(__scopeSelect);
-    const [isPositioned, setIsPositioned] = React$a.useState(false);
-    const shouldRepositionRef = React$a.useRef(true);
-    const shouldExpandOnScrollRef = React$a.useRef(false);
-    const firstValidItemFoundRef = React$a.useRef(false); // aria-hide everything except the content (better supported equivalent to setting aria-modal)
-    React$a.useEffect(()=>{
+    const [isPositioned, setIsPositioned] = React$b.useState(false);
+    const shouldRepositionRef = React$b.useRef(true);
+    const shouldExpandOnScrollRef = React$b.useRef(false);
+    const firstValidItemFoundRef = React$b.useRef(false); // aria-hide everything except the content (better supported equivalent to setting aria-modal)
+    React$b.useEffect(()=>{
         if (content) return hideOthers(content);
     }, [
         content
     ]); // Make sure the whole tree has focus guards as our `Select` may be
     // the last element in the DOM (because of the `Portal`)
     $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c();
-    const [contentZIndex, setContentZIndex] = React$a.useState();
+    const [contentZIndex, setContentZIndex] = React$b.useState();
     $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
         if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
     }, [
         content
     ]);
-    const focusFirst = React$a.useCallback((candidates)=>{
+    const focusFirst = React$b.useCallback((candidates)=>{
         const [firstItem, ...restItems] = getItems().map((item)=>item.ref.current
         );
         const [lastItem] = restItems.slice(-1);
@@ -34995,7 +35118,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ React$a.forwardRef
         getItems,
         viewport
     ]);
-    const position = React$a.useCallback(()=>{
+    const position = React$b.useCallback(()=>{
         if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
             const triggerRect = context.trigger.getBoundingClientRect(); // -----------------------------------------------------------------------------------------
             //  Horizontal positioning
@@ -35090,7 +35213,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ React$a.forwardRef
     , [
         position
     ]);
-    const focusSelectedItem = React$a.useCallback(()=>focusFirst([
+    const focusSelectedItem = React$b.useCallback(()=>focusFirst([
             selectedItem,
             content
         ])
@@ -35100,7 +35223,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ React$a.forwardRef
         content
     ]); // Since this is not dependent on layout, we want to ensure this runs at the same time as
     // other effects across components. Hence why we don't call `focusSelectedItem` inside `position`.
-    React$a.useEffect(()=>{
+    React$b.useEffect(()=>{
         if (isPositioned) focusSelectedItem();
     }, [
         isPositioned,
@@ -35109,7 +35232,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ React$a.forwardRef
     // Because it is part of the normal flow, it will push down the viewport, thus throwing our
     // trigger => selectedItem alignment off by the amount the viewport was pushed down.
     // We wait for this to happen and then re-run the positining logic one more time to account for it.
-    const handleScrollButtonChange = React$a.useCallback((node)=>{
+    const handleScrollButtonChange = React$b.useCallback((node)=>{
         if (node && shouldRepositionRef.current === true) {
             position();
             focusSelectedItem();
@@ -35121,7 +35244,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ React$a.forwardRef
     ]); // prevent selecting items on `pointerup` in some cases after opening from `pointerdown`
     // and close on `pointerup` outside.
     const { onOpenChange: onOpenChange , triggerPointerDownPosRef: triggerPointerDownPosRef  } = context;
-    React$a.useEffect(()=>{
+    React$b.useEffect(()=>{
         if (content) {
             let pointerMoveDelta = {
                 x: 0,
@@ -35161,7 +35284,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ React$a.forwardRef
         onOpenChange,
         triggerPointerDownPosRef
     ]);
-    React$a.useEffect(()=>{
+    React$b.useEffect(()=>{
         const close = ()=>onOpenChange(false)
         ;
         window.addEventListener('blur', close);
@@ -35185,7 +35308,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ React$a.forwardRef
        */ setTimeout(()=>nextItem.ref.current.focus()
         );
     });
-    const itemRefCallback = React$a.useCallback((node, value, disabled)=>{
+    const itemRefCallback = React$b.useCallback((node, value, disabled)=>{
         const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
         const isSelectedItem = context.value !== undefined && context.value === value;
         if (isSelectedItem || isFirstValidItem) {
@@ -35195,18 +35318,18 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ React$a.forwardRef
     }, [
         context.value
     ]);
-    const handleItemLeave = React$a.useCallback(()=>content === null || content === void 0 ? void 0 : content.focus()
+    const handleItemLeave = React$b.useCallback(()=>content === null || content === void 0 ? void 0 : content.focus()
     , [
         content
     ]);
-    const itemTextRefCallback = React$a.useCallback((node, value, disabled)=>{
+    const itemTextRefCallback = React$b.useCallback((node, value, disabled)=>{
         const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
         const isSelectedItem = context.value !== undefined && context.value === value;
         if (isSelectedItem || isFirstValidItem) setSelectedItemText(node);
     }, [
         context.value
     ]);
-    return /*#__PURE__*/ React$a.createElement($cc7e05a45900e73f$var$SelectContentProvider, {
+    return /*#__PURE__*/ React$b.createElement($cc7e05a45900e73f$var$SelectContentProvider, {
         scope: __scopeSelect,
         contentWrapper: contentWrapper,
         content: content,
@@ -35221,10 +35344,10 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ React$a.forwardRef
         isPositioned: isPositioned,
         shouldExpandOnScrollRef: shouldExpandOnScrollRef,
         searchRef: searchRef
-    }, /*#__PURE__*/ React$a.createElement($01b9c$RemoveScroll, {
+    }, /*#__PURE__*/ React$b.createElement($01b9c$RemoveScroll, {
         as: $5e63c961fc1ce211$export$8c6ed5c666ac1360,
         allowPinchZoom: true
-    }, /*#__PURE__*/ React$a.createElement("div", {
+    }, /*#__PURE__*/ React$b.createElement("div", {
         ref: setContentWrapper,
         style: {
             display: 'flex',
@@ -35232,7 +35355,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ React$a.forwardRef
             position: 'fixed',
             zIndex: contentZIndex
         }
-    }, /*#__PURE__*/ React$a.createElement($d3863c46a17e8a28$export$20e40289641fbbb6, {
+    }, /*#__PURE__*/ React$b.createElement($d3863c46a17e8a28$export$20e40289641fbbb6, {
         asChild: true // we make sure we're not trapping once it's been closed
         ,
         trapped: context.open,
@@ -35247,7 +35370,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ React$a.forwardRef
             });
             event.preventDefault();
         })
-    }, /*#__PURE__*/ React$a.createElement($5cb92bef7577960e$export$177fb62ff3ec1f22, _extends({
+    }, /*#__PURE__*/ React$b.createElement($5cb92bef7577960e$export$177fb62ff3ec1f22, _extends({
         role: "listbox",
         id: context.contentId,
         "data-state": context.open ? 'open' : 'closed',
@@ -35310,18 +35433,18 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ React$a.forwardRef
 /* -------------------------------------------------------------------------------------------------
  * SelectViewport
  * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$VIEWPORT_NAME = 'SelectViewport';
-const $cc7e05a45900e73f$export$9ed6e7b40248d36d = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+const $cc7e05a45900e73f$export$9ed6e7b40248d36d = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     const { __scopeSelect: __scopeSelect , ...viewportProps } = props;
     const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$VIEWPORT_NAME, __scopeSelect);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, contentContext.onViewportChange);
-    const prevScrollTopRef = React$a.useRef(0);
-    return /*#__PURE__*/ React$a.createElement(React$a.Fragment, null, /*#__PURE__*/ React$a.createElement("style", {
+    const prevScrollTopRef = React$b.useRef(0);
+    return /*#__PURE__*/ React$b.createElement(React$b.Fragment, null, /*#__PURE__*/ React$b.createElement("style", {
         dangerouslySetInnerHTML: {
             __html: `[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}`
         }
-    }), /*#__PURE__*/ React$a.createElement($cc7e05a45900e73f$var$Collection.Slot, {
+    }), /*#__PURE__*/ React$b.createElement($cc7e05a45900e73f$var$Collection.Slot, {
         scope: __scopeSelect
-    }, /*#__PURE__*/ React$a.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
+    }, /*#__PURE__*/ React$b.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
         "data-radix-select-viewport": "",
         role: "presentation"
     }, viewportProps, {
@@ -35369,13 +35492,13 @@ $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$GROUP_NAME);
  * SelectItem
  * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$ITEM_NAME = 'SelectItem';
 const [$cc7e05a45900e73f$var$SelectItemContextProvider, $cc7e05a45900e73f$var$useSelectItemContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$ITEM_NAME);
-const $cc7e05a45900e73f$export$13ef48a934230896 = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+const $cc7e05a45900e73f$export$13ef48a934230896 = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     const { __scopeSelect: __scopeSelect , value: value , disabled: disabled = false , textValue: textValueProp , ...itemProps } = props;
     const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$ITEM_NAME, __scopeSelect);
     const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$ITEM_NAME, __scopeSelect);
     const isSelected = context.value === value;
-    const [textValue, setTextValue] = React$a.useState(textValueProp !== null && textValueProp !== void 0 ? textValueProp : '');
-    const [isFocused, setIsFocused] = React$a.useState(false);
+    const [textValue, setTextValue] = React$b.useState(textValueProp !== null && textValueProp !== void 0 ? textValueProp : '');
+    const [isFocused, setIsFocused] = React$b.useState(false);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>{
         var _contentContext$itemR;
         return (_contentContext$itemR = contentContext.itemRefCallback) === null || _contentContext$itemR === void 0 ? void 0 : _contentContext$itemR.call(contentContext, node, value, disabled);
@@ -35387,24 +35510,24 @@ const $cc7e05a45900e73f$export$13ef48a934230896 = /*#__PURE__*/ React$a.forwardR
             context.onOpenChange(false);
         }
     };
-    return /*#__PURE__*/ React$a.createElement($cc7e05a45900e73f$var$SelectItemContextProvider, {
+    return /*#__PURE__*/ React$b.createElement($cc7e05a45900e73f$var$SelectItemContextProvider, {
         scope: __scopeSelect,
         value: value,
         disabled: disabled,
         textId: textId,
         isSelected: isSelected,
-        onItemTextChange: React$a.useCallback((node)=>{
+        onItemTextChange: React$b.useCallback((node)=>{
             setTextValue((prevTextValue)=>{
                 var _node$textContent;
                 return prevTextValue || ((_node$textContent = node === null || node === void 0 ? void 0 : node.textContent) !== null && _node$textContent !== void 0 ? _node$textContent : '').trim();
             });
         }, [])
-    }, /*#__PURE__*/ React$a.createElement($cc7e05a45900e73f$var$Collection.ItemSlot, {
+    }, /*#__PURE__*/ React$b.createElement($cc7e05a45900e73f$var$Collection.ItemSlot, {
         scope: __scopeSelect,
         value: value,
         disabled: disabled,
         textValue: textValue
-    }, /*#__PURE__*/ React$a.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
+    }, /*#__PURE__*/ React$b.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
         role: "option",
         "aria-labelledby": textId,
         "data-highlighted": isFocused ? '' : undefined // `isFocused` caveat fixes stuttering in VoiceOver
@@ -35449,21 +35572,21 @@ const $cc7e05a45900e73f$export$13ef48a934230896 = /*#__PURE__*/ React$a.forwardR
 /* -------------------------------------------------------------------------------------------------
  * SelectItemText
  * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$ITEM_TEXT_NAME = 'SelectItemText';
-const $cc7e05a45900e73f$export$3572fb0fb821ff49 = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+const $cc7e05a45900e73f$export$3572fb0fb821ff49 = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     // We ignore `className` and `style` as this part shouldn't be styled.
     const { __scopeSelect: __scopeSelect , className: className , style: style , ...itemTextProps } = props;
     const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$ITEM_TEXT_NAME, __scopeSelect);
     const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$ITEM_TEXT_NAME, __scopeSelect);
     const itemContext = $cc7e05a45900e73f$var$useSelectItemContext($cc7e05a45900e73f$var$ITEM_TEXT_NAME, __scopeSelect);
     const nativeOptionsContext = $cc7e05a45900e73f$var$useSelectNativeOptionsContext($cc7e05a45900e73f$var$ITEM_TEXT_NAME, __scopeSelect);
-    const [itemTextNode, setItemTextNode] = React$a.useState(null);
+    const [itemTextNode, setItemTextNode] = React$b.useState(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setItemTextNode(node)
     , itemContext.onItemTextChange, (node)=>{
         var _contentContext$itemT;
         return (_contentContext$itemT = contentContext.itemTextRefCallback) === null || _contentContext$itemT === void 0 ? void 0 : _contentContext$itemT.call(contentContext, node, itemContext.value, itemContext.disabled);
     });
     const textContent = itemTextNode === null || itemTextNode === void 0 ? void 0 : itemTextNode.textContent;
-    const nativeOption = React$a.useMemo(()=>/*#__PURE__*/ React$a.createElement("option", {
+    const nativeOption = React$b.useMemo(()=>/*#__PURE__*/ React$b.createElement("option", {
             key: itemContext.value,
             value: itemContext.value,
             disabled: itemContext.disabled
@@ -35483,7 +35606,7 @@ const $cc7e05a45900e73f$export$3572fb0fb821ff49 = /*#__PURE__*/ React$a.forwardR
         onNativeOptionRemove,
         nativeOption
     ]);
-    return /*#__PURE__*/ React$a.createElement(React$a.Fragment, null, /*#__PURE__*/ React$a.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({
+    return /*#__PURE__*/ React$b.createElement(React$b.Fragment, null, /*#__PURE__*/ React$b.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({
         id: itemContext.textId
     }, itemTextProps, {
         ref: composedRefs
@@ -35492,10 +35615,10 @@ const $cc7e05a45900e73f$export$3572fb0fb821ff49 = /*#__PURE__*/ React$a.forwardR
 /* -------------------------------------------------------------------------------------------------
  * SelectItemIndicator
  * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$ITEM_INDICATOR_NAME = 'SelectItemIndicator';
-const $cc7e05a45900e73f$export$6b9198de19accfe6 = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+const $cc7e05a45900e73f$export$6b9198de19accfe6 = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     const { __scopeSelect: __scopeSelect , ...itemIndicatorProps } = props;
     const itemContext = $cc7e05a45900e73f$var$useSelectItemContext($cc7e05a45900e73f$var$ITEM_INDICATOR_NAME, __scopeSelect);
-    return itemContext.isSelected ? /*#__PURE__*/ React$a.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({
+    return itemContext.isSelected ? /*#__PURE__*/ React$b.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({
         "aria-hidden": true
     }, itemIndicatorProps, {
         ref: forwardedRef
@@ -35504,9 +35627,9 @@ const $cc7e05a45900e73f$export$6b9198de19accfe6 = /*#__PURE__*/ React$a.forwardR
 /* -------------------------------------------------------------------------------------------------
  * SelectScrollUpButton
  * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton';
-const $cc7e05a45900e73f$export$d8117927658af6d7 = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+const $cc7e05a45900e73f$export$d8117927658af6d7 = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
-    const [canScrollUp1, setCanScrollUp] = React$a.useState(false);
+    const [canScrollUp1, setCanScrollUp] = React$b.useState(false);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, contentContext.onScrollButtonChange);
     $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
         if (contentContext.viewport && contentContext.isPositioned) {
@@ -35524,7 +35647,7 @@ const $cc7e05a45900e73f$export$d8117927658af6d7 = /*#__PURE__*/ React$a.forwardR
         contentContext.viewport,
         contentContext.isPositioned
     ]);
-    return canScrollUp1 ? /*#__PURE__*/ React$a.createElement($cc7e05a45900e73f$var$SelectScrollButtonImpl, _extends({}, props, {
+    return canScrollUp1 ? /*#__PURE__*/ React$b.createElement($cc7e05a45900e73f$var$SelectScrollButtonImpl, _extends({}, props, {
         ref: composedRefs,
         onAutoScroll: ()=>{
             const { viewport: viewport , selectedItem: selectedItem  } = contentContext;
@@ -35535,9 +35658,9 @@ const $cc7e05a45900e73f$export$d8117927658af6d7 = /*#__PURE__*/ React$a.forwardR
 /* -------------------------------------------------------------------------------------------------
  * SelectScrollDownButton
  * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton';
-const $cc7e05a45900e73f$export$ff951e476c12189 = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+const $cc7e05a45900e73f$export$ff951e476c12189 = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
-    const [canScrollDown1, setCanScrollDown] = React$a.useState(false);
+    const [canScrollDown1, setCanScrollDown] = React$b.useState(false);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, contentContext.onScrollButtonChange);
     $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
         if (contentContext.viewport && contentContext.isPositioned) {
@@ -35557,7 +35680,7 @@ const $cc7e05a45900e73f$export$ff951e476c12189 = /*#__PURE__*/ React$a.forwardRe
         contentContext.viewport,
         contentContext.isPositioned
     ]);
-    return canScrollDown1 ? /*#__PURE__*/ React$a.createElement($cc7e05a45900e73f$var$SelectScrollButtonImpl, _extends({}, props, {
+    return canScrollDown1 ? /*#__PURE__*/ React$b.createElement($cc7e05a45900e73f$var$SelectScrollButtonImpl, _extends({}, props, {
         ref: composedRefs,
         onAutoScroll: ()=>{
             const { viewport: viewport , selectedItem: selectedItem  } = contentContext;
@@ -35565,18 +35688,18 @@ const $cc7e05a45900e73f$export$ff951e476c12189 = /*#__PURE__*/ React$a.forwardRe
         }
     })) : null;
 });
-const $cc7e05a45900e73f$var$SelectScrollButtonImpl = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+const $cc7e05a45900e73f$var$SelectScrollButtonImpl = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     const { __scopeSelect: __scopeSelect , onAutoScroll: onAutoScroll , ...scrollIndicatorProps } = props;
     const contentContext = $cc7e05a45900e73f$var$useSelectContentContext('SelectScrollButton', __scopeSelect);
-    const autoScrollTimerRef = React$a.useRef(null);
+    const autoScrollTimerRef = React$b.useRef(null);
     const getItems = $cc7e05a45900e73f$var$useCollection(__scopeSelect);
-    const clearAutoScrollTimer = React$a.useCallback(()=>{
+    const clearAutoScrollTimer = React$b.useCallback(()=>{
         if (autoScrollTimerRef.current !== null) {
             window.clearInterval(autoScrollTimerRef.current);
             autoScrollTimerRef.current = null;
         }
     }, []);
-    React$a.useEffect(()=>{
+    React$b.useEffect(()=>{
         return ()=>clearAutoScrollTimer()
         ;
     }, [
@@ -35595,7 +35718,7 @@ const $cc7e05a45900e73f$var$SelectScrollButtonImpl = /*#__PURE__*/ React$a.forwa
     }, [
         getItems
     ]);
-    return /*#__PURE__*/ React$a.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
+    return /*#__PURE__*/ React$b.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
         "aria-hidden": true
     }, scrollIndicatorProps, {
         ref: forwardedRef,
@@ -35613,12 +35736,12 @@ const $cc7e05a45900e73f$var$SelectScrollButtonImpl = /*#__PURE__*/ React$a.forwa
         })
     }));
 });
-/* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$BubbleSelect = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+/* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$BubbleSelect = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     const { value: value , ...selectProps } = props;
-    const ref = React$a.useRef(null);
+    const ref = React$b.useRef(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
     const prevValue = $010c2913dbd2fe3d$export$5cae361ad82dce8b(value); // Bubble value change to parents (e.g form change event)
-    React$a.useEffect(()=>{
+    React$b.useEffect(()=>{
         const select = ref.current;
         const selectProto = window.HTMLSelectElement.prototype;
         const descriptor = Object.getOwnPropertyDescriptor(selectProto, 'value');
@@ -35645,9 +35768,9 @@ const $cc7e05a45900e73f$var$SelectScrollButtonImpl = /*#__PURE__*/ React$a.forwa
    *
    * We use `VisuallyHidden` rather than `display: "none"` because Safari autofill
    * won't work otherwise.
-   */ return /*#__PURE__*/ React$a.createElement($ea1ef594cf570d83$export$439d29a4e110a164, {
+   */ return /*#__PURE__*/ React$b.createElement($ea1ef594cf570d83$export$439d29a4e110a164, {
         asChild: true
-    }, /*#__PURE__*/ React$a.createElement("select", _extends({}, selectProps, {
+    }, /*#__PURE__*/ React$b.createElement("select", _extends({}, selectProps, {
         ref: composedRefs,
         defaultValue: value
     })));
@@ -35655,9 +35778,9 @@ const $cc7e05a45900e73f$var$SelectScrollButtonImpl = /*#__PURE__*/ React$a.forwa
 $cc7e05a45900e73f$var$BubbleSelect.displayName = 'BubbleSelect';
 function $cc7e05a45900e73f$var$useTypeaheadSearch(onSearchChange) {
     const handleSearchChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onSearchChange);
-    const searchRef = React$a.useRef('');
-    const timerRef = React$a.useRef(0);
-    const handleTypeaheadSearch = React$a.useCallback((key)=>{
+    const searchRef = React$b.useRef('');
+    const timerRef = React$b.useRef(0);
+    const handleTypeaheadSearch = React$b.useCallback((key)=>{
         const search = searchRef.current + key;
         handleSearchChange(search);
         (function updateSearch(value) {
@@ -35669,11 +35792,11 @@ function $cc7e05a45900e73f$var$useTypeaheadSearch(onSearchChange) {
     }, [
         handleSearchChange
     ]);
-    const resetTypeahead = React$a.useCallback(()=>{
+    const resetTypeahead = React$b.useCallback(()=>{
         searchRef.current = '';
         window.clearTimeout(timerRef.current);
     }, []);
-    React$a.useEffect(()=>{
+    React$b.useEffect(()=>{
         return ()=>window.clearTimeout(timerRef.current)
         ;
     }, []);
@@ -35732,9 +35855,9 @@ const $cc7e05a45900e73f$export$c3468e2714d175fa = $cc7e05a45900e73f$export$6b919
 const $cc7e05a45900e73f$export$2f60d3ec9ad468f2 = $cc7e05a45900e73f$export$d8117927658af6d7;
 const $cc7e05a45900e73f$export$bf1aedc3039c8d63 = $cc7e05a45900e73f$export$ff951e476c12189;
 
-const React$1 = React__default["default"];
+const React$2 = React__default["default"];
 const BtIconChevronUp2Px = props =>
-  /*#__PURE__*/ React$1.createElement(
+  /*#__PURE__*/ React$2.createElement(
     "svg",
     Object.assign(
       {
@@ -35743,8 +35866,8 @@ const BtIconChevronUp2Px = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$1.createElement("defs", null),
-    /*#__PURE__*/ React$1.createElement("path", {
+    /*#__PURE__*/ React$2.createElement("defs", null),
+    /*#__PURE__*/ React$2.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"
@@ -35755,10 +35878,10 @@ var BtIconChevronUp2Px_2 = BtIconChevronUp2Px;
 /** Use `Select` to choose from a dropdown list of options. */
 var Select = function (_a) {
     var isRequired = _a.isRequired, isDisabled = _a.isDisabled, placeholder = _a.placeholder, label = _a.label, options = _a.options, onOpenChange = _a.onOpenChange, isDefaultOpen = _a.isDefaultOpen, defaultValue = _a.defaultValue, errorMessage = _a.errorMessage, labelSize = _a.labelSize, helper = _a.helper, name = _a.name, isFluid = _a.isFluid, onBlur = _a.onBlur, onChange = _a.onChange, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure;
-    var id = React$a.useId();
-    var arcRootElement = React$a.useContext(ArcRootElementContext);
-    var surface = React$a.useContext(Context$3).surface;
-    var _b = React$a.useState(defaultValue), selectedValue = _b[0], setSelectedValue = _b[1];
+    var id = React$b.useId();
+    var arcRootElement = React$b.useContext(ArcRootElementContext);
+    var surface = React$b.useContext(Context$3).surface;
+    var _b = React$b.useState(defaultValue), selectedValue = _b[0], setSelectedValue = _b[1];
     var onValueChange = function (value) {
         onChange && onChange(value);
         setSelectedValue(value);
@@ -35808,7 +35931,7 @@ var ArcBreakpointL = 1024;
  */
 var SiteFooter = function (_a) {
     var children = _a.children, currentYear = _a.currentYear, _b = _a.curve, curve = _b === void 0 ? true : _b, logoLabel = _a.logoLabel, main = _a.main, siteName = _a.siteName, props = __rest$2(_a, ["children", "currentYear", "curve", "logoLabel", "main", "siteName"]);
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== SiteFooterItem) {
                 throw new Error("Illegal child passed to <SiteFooter />. Ensure to only use <SiteFooter.Item />.");
@@ -35835,9 +35958,9 @@ var SiteFooter = function (_a) {
 var SiteFooterItemGroup = function (_a) {
     var children = _a.children, title = _a.title;
     var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcBreakpointM, "px)"));
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
-            if (item && item.type !== SiteFooterItem && item.type !== React$a.Fragment) {
+            if (item && item.type !== SiteFooterItem && item.type !== React$b.Fragment) {
                 throw new Error("Illegal child passed to <SiteFooterItemGroup />. Ensure to only use <SiteFooter.Item />.");
             }
         });
@@ -35895,16 +36018,16 @@ var Item = function (_a) {
 
 var ItemGroup = function (_a) {
     var children = _a.children, href = _a.href, title = _a.title, onClick = _a.onClick, viewAllTitle = _a.viewAllTitle, props = __rest$2(_a, ["children", "href", "title", "onClick", "viewAllTitle"]);
-    var _b = React$a.useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
+    var _b = React$b.useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
-            if (item && item.type !== Item && item.type !== React$a.Fragment) {
+            if (item && item.type !== Item && item.type !== React$b.Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.ItemGroup />. Ensure to only use <SiteHeader.Item />.");
             }
         });
     }, [children]);
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         // useEffect does not run in ReactDomServer renders
         setHasClientSideJavaScript(true);
     }, [setHasClientSideJavaScript]);
@@ -35960,7 +36083,7 @@ var ItemGroupRehydrator = (function (el, hydrate) { return __awaiter(void 0, voi
 
 var Column = function (_a) {
     var children = _a.children, props = __rest$2(_a, ["children"]);
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== ItemGroup) {
                 throw new Error("Illegal child passed to <SiteHeader.Column />. Ensure to only use <SiteHeader.ItemGroup />.");
@@ -35984,8 +36107,8 @@ var BackButton = function (_a) {
 var Panel = function (_a) {
     var _b;
     var children = _a.children, navItemRef = _a.navItemRef, open = _a.open, promo = _a.promo, setOpen = _a.setOpen, subNavItemRef = _a.subNavItemRef, _c = _a.subNavLink, subNavLink = _c === void 0 ? "" : _c, title = _a.title, viewAll = _a.viewAll, withSubNav = _a.withSubNav, props = __rest$2(_a, ["children", "navItemRef", "open", "promo", "setOpen", "subNavItemRef", "subNavLink", "title", "viewAll", "withSubNav"]);
-    var transparent = React$a.useContext(Context).transparent;
-    React$a.useEffect(function () {
+    var transparent = React$b.useContext(Context).transparent;
+    React$b.useEffect(function () {
         // Where appropriate, close the Panel when clicking outside of it,
         // by listening to clicks on the entire document and acting accordingly.
         var handleClick = function (e) {
@@ -36021,7 +36144,7 @@ var Panel = function (_a) {
             document.removeEventListener("click", handleClick);
         };
     }, [navItemRef, setOpen, subNavItemRef, subNavLink]);
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         var handleKeydown = function (e) {
             // Check the viewport width at time of press
             var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(ArcBreakpointL, "px)")).matches;
@@ -36069,15 +36192,15 @@ Panel.ViewAll = ViewAll;
 var NavItem = function (_a) {
     var _b, _c;
     var children = _a.children, href = _a.href, isCurrent = _a.isCurrent, onClick = _a.onClick, promo = _a.promo, title = _a.title, viewAllTitle = _a.viewAllTitle, props = __rest$2(_a, ["children", "href", "isCurrent", "onClick", "promo", "title", "viewAllTitle"]);
-    var navItem = React$a.useRef();
-    var _d = React$a.useState(false), panelOpen = _d[0], setPanelOpen = _d[1];
+    var navItem = React$b.useRef();
+    var _d = React$b.useState(false), panelOpen = _d[0], setPanelOpen = _d[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item &&
                 item.type !== ItemGroup &&
                 item.type !== Column &&
-                item.type !== React$a.Fragment) {
+                item.type !== React$b.Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItem />. Ensure to only use <SiteHeader.ItemGroup /> or <SiteHeader.Column />.");
             }
         });
@@ -36145,21 +36268,21 @@ var NavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void
 var SubNavItem = function (_a) {
     var _b, _c;
     var children = _a.children, _d = _a.isDefaultItem, isDefaultItem = _d === void 0 ? false : _d, href = _a.href, onClick = _a.onClick, offsetXL = _a.offsetXL, promo = _a.promo, subTitle = _a.subTitle, title = _a.title, viewAllTitle = _a.viewAllTitle, props = __rest$2(_a, ["children", "isDefaultItem", "href", "onClick", "offsetXL", "promo", "subTitle", "title", "viewAllTitle"]);
-    var navItem = React$a.useContext(Context$1).navItem;
-    var subNavItem = React$a.useRef();
-    var _e = React$a.useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
+    var navItem = React$b.useContext(Context$1).navItem;
+    var subNavItem = React$b.useRef();
+    var _e = React$b.useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item &&
                 item.type !== ItemGroup &&
                 item.type !== Column &&
-                item.type !== React$a.Fragment) {
+                item.type !== React$b.Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.SubNavItem />. Ensure to only use <SiteHeader.ItemGroup /> or <SiteHeader.Column />.");
             }
         });
     }, [children]);
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         if (isDefaultItem && isMinWidthArcBreakpointL) {
             setPanelOpen(true);
         }
@@ -36246,18 +36369,18 @@ var SubNavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, vo
 }); });
 
 var defaultContext$1 = { navItem: null, subTitle: null };
-var Context$1 = React$a.createContext(defaultContext$1);
+var Context$1 = React$b.createContext(defaultContext$1);
 var Provider$1 = Context$1.Provider;
 var NavItemWithSubNav = function (_a) {
     var _b, _c;
     var href = _a.href, slot1 = _a.slot1, slot2 = _a.slot2, slot3 = _a.slot3, _d = _a.subTitle, subTitle = _d === void 0 ? null : _d, title = _a.title, onViewAllClick = _a.onViewAllClick, viewAllTitle = _a.viewAllTitle, props = __rest$2(_a, ["href", "slot1", "slot2", "slot3", "subTitle", "title", "onViewAllClick", "viewAllTitle"]);
-    var navItem = React$a.useRef();
-    var _e = React$a.useState(true), defaultItem = _e[0], setDefaultItem = _e[1];
-    var _f = React$a.useState(false), panelOpen = _f[0], setPanelOpen = _f[1];
+    var navItem = React$b.useRef();
+    var _e = React$b.useState(true), defaultItem = _e[0], setDefaultItem = _e[1];
+    var _f = React$b.useState(false), panelOpen = _f[0], setPanelOpen = _f[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         React__default["default"].Children.map(slot1, function (item) {
-            if (item && item.type !== SubNavItem && item.type !== React$a.Fragment) {
+            if (item && item.type !== SubNavItem && item.type !== React$b.Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot1` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
             if (item.props.isDefaultItem) {
@@ -36265,7 +36388,7 @@ var NavItemWithSubNav = function (_a) {
             }
         });
         React__default["default"].Children.map(slot2, function (item) {
-            if (item && item.type !== SubNavItem && item.type !== React$a.Fragment) {
+            if (item && item.type !== SubNavItem && item.type !== React$b.Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot2` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
             if (item.props.isDefaultItem) {
@@ -36273,7 +36396,7 @@ var NavItemWithSubNav = function (_a) {
             }
         });
         React__default["default"].Children.map(slot3, function (item) {
-            if (item && item.type !== SubNavItem && item.type !== React$a.Fragment) {
+            if (item && item.type !== SubNavItem && item.type !== React$b.Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot3` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
             if (item.props.isDefaultItem) {
@@ -36358,6 +36481,11 @@ var NavItemWithSubNavRehydrator = (function (el, hydrate) { return __awaiter(voi
     });
 }); });
 
+var NodeItem = function (_a) {
+    var children = _a.children, props = __rest$2(_a, ["children"]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, __assign$2({}, filterDataAttrs(props)), children));
+};
+
 var MenuButton = function (_a) {
     var _b;
     var menuOpen = _a.menuOpen, setMenuOpen = _a.setMenuOpen;
@@ -36373,7 +36501,7 @@ var MenuButton = function (_a) {
 };
 
 var defaultContext = { transparent: false };
-var Context = React$a.createContext(defaultContext);
+var Context = React$b.createContext(defaultContext);
 var Provider = Context.Provider;
 /**
  * Use `SiteHeader` to display brand logo and navigation at the top of a page.
@@ -36381,20 +36509,21 @@ var Provider = Context.Provider;
 var SiteHeader = function (_a) {
     var _b;
     var children = _a.children, basket = _a.basket, _c = _a.hasLogin, hasLogin = _c === void 0 ? true : _c, _d = _a.isTransparent, isTransparent = _d === void 0 ? false : _d, _e = _a.loginHref, loginHref = _e === void 0 ? "/login" : _e, logoOnClick = _a.logoOnClick, loginOnClick = _a.loginOnClick, _f = _a.loginTitle, loginTitle = _f === void 0 ? "Log in / Register" : _f, _g = _a.logoHref, logoHref = _g === void 0 ? "/" : _g, _h = _a.logoLabel, logoLabel = _h === void 0 ? "Home" : _h, search = _a.search, subBrand = _a.subBrand, props = __rest$2(_a, ["children", "basket", "hasLogin", "isTransparent", "loginHref", "logoOnClick", "loginOnClick", "loginTitle", "logoHref", "logoLabel", "search", "subBrand"]);
-    var _j = React$a.useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
-    var _k = React$a.useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
+    var _j = React$b.useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
+    var _k = React$b.useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item &&
+                item.type !== NodeItem &&
                 item.type !== NavItem &&
                 item.type !== NavItemWithSubNav &&
-                item.type !== React$a.Fragment) {
+                item.type !== React$b.Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader />. Ensure to only use <SiteHeader.NavItem /> or <SiteHeader.NavItemWithSubNav />");
             }
         });
     }, [children]);
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         if (!isMinWidthArcBreakpointL && menuOpen) {
             document.body.classList.add("arc-body--overflowHidden");
         }
@@ -36405,7 +36534,7 @@ var SiteHeader = function (_a) {
             document.body.classList.remove("arc-body--overflowHidden");
         };
     }, [isMinWidthArcBreakpointL, menuOpen]);
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         var handleKeydown = function (e) {
             if (e.key === "Escape" || e.keyCode === 27) {
                 setMenuOpen(false);
@@ -36416,7 +36545,7 @@ var SiteHeader = function (_a) {
             window.removeEventListener("keydown", handleKeydown);
         };
     }, [setMenuOpen]);
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         var handleClick = function (e) {
             if (e.target.getAttribute("href")) {
                 setMenuOpen(false);
@@ -36427,7 +36556,7 @@ var SiteHeader = function (_a) {
             document.removeEventListener("click", handleClick);
         };
     }, [setMenuOpen]);
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         // useEffect does not run in ReactDomServer renders
         setHasClientSideJavaScript(true);
     }, [setHasClientSideJavaScript]);
@@ -36462,12 +36591,14 @@ Column.displayName = "SiteHeader.Column";
 Item.displayName = "SiteHeader.Item";
 ItemGroup.displayName = "SiteHeader.ItemGroup";
 NavItem.displayName = "SiteHeader.NavItem";
+NodeItem.displayName = "SiteHeader.NodeItem";
 NavItemWithSubNav.displayName = "SiteHeader.NavItemWithSubNav";
 SubNavItem.displayName = "SiteHeader.SubNavItem";
 SiteHeader.Column = Column;
 SiteHeader.Item = Item;
 SiteHeader.ItemGroup = ItemGroup;
 SiteHeader.NavItem = NavItem;
+SiteHeader.NodeItem = NodeItem;
 SiteHeader.NavItemWithSubNav = NavItemWithSubNav;
 SiteHeader.SubNavItem = SubNavItem;
 
@@ -36525,7 +36656,7 @@ SiteHeaderRehydrator.NavItemWithSubNavRehydrator = NavItemWithSubNavRehydrator;
 SiteHeaderRehydrator.SubNavItemRehydrator = SubNavItemRehydrator;
 
 function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
-    const [size, setSize] = React$a.useState(undefined);
+    const [size, setSize] = React$b.useState(undefined);
     $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
         if (element) {
             // provide size as early as possible
@@ -36576,23 +36707,23 @@ function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
  * -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$SWITCH_NAME = 'Switch';
 const [$6be4966fd9bbc698$var$createSwitchContext, $6be4966fd9bbc698$export$cf7f5f17f69cbd43] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($6be4966fd9bbc698$var$SWITCH_NAME);
 const [$6be4966fd9bbc698$var$SwitchProvider, $6be4966fd9bbc698$var$useSwitchContext] = $6be4966fd9bbc698$var$createSwitchContext($6be4966fd9bbc698$var$SWITCH_NAME);
-const $6be4966fd9bbc698$export$b5d5cf8927ab7262 = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+const $6be4966fd9bbc698$export$b5d5cf8927ab7262 = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     const { __scopeSwitch: __scopeSwitch , name: name , checked: checkedProp , defaultChecked: defaultChecked , required: required , disabled: disabled , value: value = 'on' , onCheckedChange: onCheckedChange , ...switchProps } = props;
-    const [button, setButton] = React$a.useState(null);
+    const [button, setButton] = React$b.useState(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setButton(node)
     );
-    const hasConsumerStoppedPropagationRef = React$a.useRef(false); // We set this to true by default so that events bubble to forms without JS (SSR)
+    const hasConsumerStoppedPropagationRef = React$b.useRef(false); // We set this to true by default so that events bubble to forms without JS (SSR)
     const isFormControl = button ? Boolean(button.closest('form')) : true;
     const [checked = false, setChecked] = $71cd76cc60e0454e$export$6f32135080cb4c3({
         prop: checkedProp,
         defaultProp: defaultChecked,
         onChange: onCheckedChange
     });
-    return /*#__PURE__*/ React$a.createElement($6be4966fd9bbc698$var$SwitchProvider, {
+    return /*#__PURE__*/ React$b.createElement($6be4966fd9bbc698$var$SwitchProvider, {
         scope: __scopeSwitch,
         checked: checked,
         disabled: disabled
-    }, /*#__PURE__*/ React$a.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends({
+    }, /*#__PURE__*/ React$b.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends({
         type: "button",
         role: "switch",
         "aria-checked": checked,
@@ -36613,7 +36744,7 @@ const $6be4966fd9bbc698$export$b5d5cf8927ab7262 = /*#__PURE__*/ React$a.forwardR
                 if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
             }
         })
-    })), isFormControl && /*#__PURE__*/ React$a.createElement($6be4966fd9bbc698$var$BubbleInput, {
+    })), isFormControl && /*#__PURE__*/ React$b.createElement($6be4966fd9bbc698$var$BubbleInput, {
         control: button,
         bubbles: !hasConsumerStoppedPropagationRef.current,
         name: name,
@@ -36630,10 +36761,10 @@ const $6be4966fd9bbc698$export$b5d5cf8927ab7262 = /*#__PURE__*/ React$a.forwardR
 /* -------------------------------------------------------------------------------------------------
  * SwitchThumb
  * -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$THUMB_NAME = 'SwitchThumb';
-const $6be4966fd9bbc698$export$4d07bf653ea69106 = /*#__PURE__*/ React$a.forwardRef((props, forwardedRef)=>{
+const $6be4966fd9bbc698$export$4d07bf653ea69106 = /*#__PURE__*/ React$b.forwardRef((props, forwardedRef)=>{
     const { __scopeSwitch: __scopeSwitch , ...thumbProps } = props;
     const context = $6be4966fd9bbc698$var$useSwitchContext($6be4966fd9bbc698$var$THUMB_NAME, __scopeSwitch);
-    return /*#__PURE__*/ React$a.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({
+    return /*#__PURE__*/ React$b.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({
         "data-state": $6be4966fd9bbc698$var$getState(context.checked),
         "data-disabled": context.disabled ? '' : undefined
     }, thumbProps, {
@@ -36642,10 +36773,10 @@ const $6be4966fd9bbc698$export$4d07bf653ea69106 = /*#__PURE__*/ React$a.forwardR
 });
 /* ---------------------------------------------------------------------------------------------- */ const $6be4966fd9bbc698$var$BubbleInput = (props)=>{
     const { control: control , checked: checked , bubbles: bubbles = true , ...inputProps } = props;
-    const ref = React$a.useRef(null);
+    const ref = React$b.useRef(null);
     const prevChecked = $010c2913dbd2fe3d$export$5cae361ad82dce8b(checked);
     const controlSize = $db6c3485150b8e66$export$1ab7ae714698c4b8(control); // Bubble checked change to parents (e.g form change event)
-    React$a.useEffect(()=>{
+    React$b.useEffect(()=>{
         const input = ref.current;
         const inputProto = window.HTMLInputElement.prototype;
         const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked');
@@ -36662,7 +36793,7 @@ const $6be4966fd9bbc698$export$4d07bf653ea69106 = /*#__PURE__*/ React$a.forwardR
         checked,
         bubbles
     ]);
-    return /*#__PURE__*/ React$a.createElement("input", _extends({
+    return /*#__PURE__*/ React$b.createElement("input", _extends({
         type: "checkbox",
         "aria-hidden": true,
         defaultChecked: checked
@@ -36706,7 +36837,7 @@ var VerticalSpace = function (_a) {
 /** Use `Switch` to toggle between checked and not checked. */
 var Switch = function (_a) {
     var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, name = _a.name, onBlur = _a.onBlur, value = _a.value, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, id = _a.id, _c = _a.labelSize, labelSize = _c === void 0 ? "s" : _c, statusText = _a.statusText, _d = _a.hideLabel, hideLabel = _d === void 0 ? false : _d;
-    var surface = React$a.useContext(Context$3).surface;
+    var surface = React$b.useContext(Context$3).surface;
     return (React__default["default"].createElement(FormControl, { errorMessage: errorMessage, htmlFor: id, isDisabled: isDisabled, label: hideLabel ? "" : label, labelSize: labelSize, requirementStatus: "not-applicable" },
         !hideLabel && React__default["default"].createElement(VerticalSpace, { size: "8" }),
         React__default["default"].createElement("div", { className: "arc-Switch-container" },
@@ -36734,7 +36865,7 @@ var Switch = function (_a) {
 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;
-    var surface = React$a.useContext(Context$3).surface;
+    var surface = React$b.useContext(Context$3).surface;
     return (React__default["default"].createElement("div", __assign$2({}, (ariaLabel && { "aria-label": ariaLabel }), { className: classNames((_b = {
                 "arc-Badge": true,
                 "arc-Badge--onDarkSurface": surface === "dark",
@@ -36751,9 +36882,9 @@ var Badge = function (_a) {
             React__default["default"].createElement(Text, { size: size === "default" ? "xs" : "m" }, children))));
 };
 
-const React = React__default["default"];
+const React$1 = React__default["default"];
 const BtIconCross = props =>
-  /*#__PURE__*/ React.createElement(
+  /*#__PURE__*/ React$1.createElement(
     "svg",
     Object.assign(
       {
@@ -36762,13 +36893,13 @@ const BtIconCross = props =>
       },
       props
     ),
-    /*#__PURE__*/ React.createElement("defs", null),
-    /*#__PURE__*/ React.createElement("path", {
+    /*#__PURE__*/ React$1.createElement("defs", null),
+    /*#__PURE__*/ React$1.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.createElement("path", {
+    /*#__PURE__*/ React$1.createElement("path", {
       d:
         "M20.85352,11.14648a.49983.49983,0,0,0-.707,0L16,15.293l-4.14648-4.14649a.5.5,0,0,0-.707.707L15.293,16l-4.14649,4.14648a.5.5,0,1,0,.707.707L16,16.707l4.14648,4.14649a.5.5,0,0,0,.707-.707L16.707,16l4.14649-4.14648A.49983.49983,0,0,0,20.85352,11.14648Z",
       fill: "currentColor"
@@ -36776,13 +36907,33 @@ const BtIconCross = props =>
   );
 var BtIconCross_2 = BtIconCross;
 
+const React = React__default["default"];
+const BtIconCrossFill = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm4.85352,18.14648a.5.5,0,1,1-.707.707L16,16.707l-4.14648,4.14649a.5.5,0,0,1-.707-.707L15.293,16l-4.14649-4.14648a.5.5,0,0,1,.707-.707L16,15.293l4.14648-4.14649a.5.5,0,0,1,.707.707L16.707,16Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCrossFill_2 = BtIconCrossFill;
+
 /**
  * use `Tag` to promote features and manage filtering.
  */
 var Tag = function (_a) {
     var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, props = __rest$2(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove"]);
-    var surface = React$a.useContext(Context$3).surface;
-    var _b = React$a.useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
+    var surface = React$b.useContext(Context$3).surface;
+    var _b = React$b.useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
     var onRemoveHandler = function () {
         setIsRemoved(function (p) { return !p; });
         onRemove && onRemove();
@@ -36805,7 +36956,8 @@ var Tag = function (_a) {
                 React__default["default"].createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
             React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))))),
         isRemovable && (React__default["default"].createElement("button", { className: "arc-Tag-icon arc-Tag-icon--removable", onClick: onRemoveHandler, "data-testid": "arc-Tag-icon-removable", "aria-live": "polite", "aria-roledescription": "remove tag" },
-            React__default["default"].createElement(Icon, { icon: BtIconCross_2, color: "brand", size: 20 })))));
+            React__default["default"].createElement(Icon, { icon: BtIconCross_2, color: "brand", size: 20 }),
+            React__default["default"].createElement(Icon, { icon: BtIconCrossFill_2, color: "brand", size: 20 })))));
 };
 
 /**
@@ -36819,10 +36971,10 @@ var VisuallyHidden = function (_a) {
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */
-var TextInput = React$a.forwardRef(function (_a, ref) {
+var TextInput = React$b.forwardRef(function (_a, ref) {
     var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = __rest$2(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText"]);
-    var surface = React$a.useContext(Context$3).surface;
-    var _j = React$a.useState(false), showPasswordToggle = _j[0], setShowPasswordToggle = _j[1];
+    var surface = React$b.useContext(Context$3).surface;
+    var _j = React$b.useState(false), showPasswordToggle = _j[0], setShowPasswordToggle = _j[1];
     var inferredInputProps = useNumericInput({
         inputMode: inputMode,
         pattern: pattern,
@@ -36853,6 +37005,45 @@ var TextInput = React$a.forwardRef(function (_a, ref) {
                                 : "Your password is hidden")))))))));
 });
 
+var TextArea = React$b.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 = React$b.useContext(Context$3).surface;
+    var ourRef = React$b.useRef(null);
+    var _j = React$b.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["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["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(Text, { tone: isDisabled ? "muted" : "default" },
+                React__default["default"].createElement("span", { className: "arc-TextArea-characterCount" },
+                    characterCount,
+                    " / ",
+                    maxLength)))) }, filterDataAttrs(props)),
+        React__default["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 `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) {
     var _b = _a.maxWidth, maxWidth = _b === void 0 ? 100 : _b, title = _a.title, children = _a.children;
@@ -36873,6 +37064,7 @@ exports.Columns = Columns;
 exports.Curve = Curve;
 exports.Disclosure = Disclosure;
 exports.Elevation = Elevation;
+exports.Filter = Filter;
 exports.FormControl = FormControl;
 exports.Group = Group;
 exports.Heading = Heading;
@@ -36893,6 +37085,7 @@ exports.SurfaceContext = Context$3;
 exports.Switch = Switch;
 exports.Tag = Tag;
 exports.Text = Text;
+exports.TextArea = TextArea;
 exports.TextInput = TextInput;
 exports.Truncate = Truncate;
 exports.UniversalHeader = UniversalHeader;