@arc-ui/components 11.4.2 → 11.5.0

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import * as React$a from 'react';
+import * as React$b from 'react';
 import React__default, { createContext, useContext, useRef, useState, useEffect, forwardRef, useMemo, createElement, useCallback, Children, isValidElement, cloneElement, Fragment, useLayoutEffect, useId } from 'react';
 
 /*! *****************************************************************************
@@ -853,9 +853,9 @@ function debounce(func, wait, options) {
 
 var debounce_1 = debounce;
 
-const React$9 = React__default;
+const React$a = React__default;
 const BtIconChevronLeft2Px = props =>
-  /*#__PURE__*/ React$9.createElement(
+  /*#__PURE__*/ React$a.createElement(
     "svg",
     Object.assign(
       {
@@ -864,8 +864,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"
@@ -873,9 +873,9 @@ const BtIconChevronLeft2Px = props =>
   );
 var BtIconChevronLeft2Px_2 = BtIconChevronLeft2Px;
 
-const React$8 = React__default;
+const React$9 = React__default;
 const BtIconChevronRight2Px = props =>
-  /*#__PURE__*/ React$8.createElement(
+  /*#__PURE__*/ React$9.createElement(
     "svg",
     Object.assign(
       {
@@ -884,8 +884,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"
@@ -893,9 +893,9 @@ const BtIconChevronRight2Px = props =>
   );
 var BtIconChevronRight2Px_2 = BtIconChevronRight2Px;
 
-const React$7 = React__default;
+const React$8 = React__default;
 const ArcIconArc = props =>
-  /*#__PURE__*/ React$7.createElement(
+  /*#__PURE__*/ React$8.createElement(
     "svg",
     Object.assign(
       {
@@ -904,7 +904,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"
@@ -1097,9 +1097,9 @@ var BrandLogo = function (_a) {
         } }, filterDataAttrs(props)), label ? React__default.createElement("span", { className: "arc-BrandLogo-text" }, label) : null));
 };
 
-const React$6 = React__default;
+const React$7 = React__default;
 const BtIconChevronLeftMid = props =>
-  /*#__PURE__*/ React$6.createElement(
+  /*#__PURE__*/ React$7.createElement(
     "svg",
     Object.assign(
       {
@@ -1109,7 +1109,7 @@ const BtIconChevronLeftMid = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$6.createElement("path", {
+    /*#__PURE__*/ React$7.createElement("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d:
@@ -1119,9 +1119,9 @@ const BtIconChevronLeftMid = props =>
   );
 var BtIconChevronLeftMid_2 = BtIconChevronLeftMid;
 
-const React$5 = React__default;
+const React$6 = React__default;
 const BtIconChevronRightMid = props =>
-  /*#__PURE__*/ React$5.createElement(
+  /*#__PURE__*/ React$6.createElement(
     "svg",
     Object.assign(
       {
@@ -1131,7 +1131,7 @@ const BtIconChevronRightMid = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$5.createElement("path", {
+    /*#__PURE__*/ React$6.createElement("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d:
@@ -1438,9 +1438,9 @@ var CardLink = function (_a) {
             React__default.createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid_2, size: 24 })))));
 };
 
-const React$4 = React__default;
+const React$5 = React__default;
 const BtIconTickAlt2Px = props =>
-  /*#__PURE__*/ React$4.createElement(
+  /*#__PURE__*/ React$5.createElement(
     "svg",
     Object.assign(
       {
@@ -1449,8 +1449,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"
@@ -1458,9 +1458,9 @@ const BtIconTickAlt2Px = props =>
   );
 var BtIconTickAlt2Px_2 = BtIconTickAlt2Px;
 
-const React$3 = React__default;
+const React$4 = React__default;
 const BtIconAlert = props =>
-  /*#__PURE__*/ React$3.createElement(
+  /*#__PURE__*/ React$4.createElement(
     "svg",
     Object.assign(
       {
@@ -1469,17 +1469,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"
@@ -1487,6 +1487,26 @@ const BtIconAlert = props =>
   );
 var BtIconAlert_2 = BtIconAlert;
 
+const React$3 = React__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.
  */
@@ -1507,30 +1527,51 @@ 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 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 = useContext(Context$3).surface;
-    var _c = useState(false), disclousreState = _c[0], setDisclosureState = _c[1];
+    var _e = useState(false), disclousreState = _e[0], setDisclosureState = _e[1];
     var handleOnClick = function () {
         onClick && onClick();
         setDisclosureState(function (prevState) { return !prevState; });
     };
-    return (React__default.createElement("details", __assign$2({ className: classNames({
-            "arc-FormControlDisclosure": true,
-            "arc-FormControlDisclosure--onDarkSurface": surface === "dark"
-        }) }, filterDataAttrs(props), { "data-testid": "FormControlDisclosure" }),
-        React__default.createElement("summary", { className: "arc-FormControlDisclosure-summary", onClick: handleOnClick, "aria-expanded": disclousreState },
-            React__default.createElement("span", { className: "arc-FormControlDisclosure-summary-icon" },
-                React__default.createElement(BtIconChevronRightMid_2, null)),
+    return (React__default.createElement("details", __assign$2({ "data-testid": "DisclosureMini", className: classNames({
+            "arc-DisclosureMini": true,
+            "arc-DisclosureMini--onDarkSurface": surface === "dark"
+        }), open: isOpen }, filterDataAttrs(props)),
+        React__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.createElement("span", { className: "arc-DisclosureMini-summary-icon" },
+                React__default.createElement(BtIconChevronDown2Px_2, null)),
             React__default.createElement(Text, { size: size === "l" ? "m" : "s" }, summary)),
-        React__default.createElement("div", { className: "arc-FormControlDisclosure-details" },
+        React__default.createElement("div", { className: "arc-DisclosureMini-details" },
             React__default.createElement(Text, { size: size === "l" ? "m" : "s" },
                 React__default.createElement("span", { id: id }, children)))));
 };
 
+/**
+ * Use `VerticalSpace` to create vertical space between components.
+ */
+var VerticalSpace = function (_a) {
+    var _b;
+    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, sizeS = _a.sizeS, sizeM = _a.sizeM, sizeL = _a.sizeL, sizeXL = _a.sizeXL, props = __rest$2(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL"]);
+    return (React__default.createElement("div", __assign$2({ className: classNames((_b = {
+                "arc-VerticalSpace": true
+            },
+            _b["arc-VerticalSpace--size".concat(size)] = size,
+            _b["arc-VerticalSpace--sizeS".concat(sizeS)] = sizeS && sizeS,
+            _b["arc-VerticalSpace--sizeM".concat(sizeM)] = sizeM && sizeM,
+            _b["arc-VerticalSpace--sizeL".concat(sizeL)] = sizeL && sizeL,
+            _b["arc-VerticalSpace--sizeXL".concat(sizeXL)] = sizeXL && sizeXL,
+            _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
+            _b)) }, filterDataAttrs(props))));
+};
+
 var defaultContext$2 = {
     requirementStatus: null
 };
@@ -1578,20 +1619,22 @@ var FormControl = function (_a) {
             !helperUnderLabel && (React__default.createElement(React__default.Fragment, null, errorMessage ? (React__default.createElement("div", { className: "arc-FormControl-error", id: idError },
                 React__default.createElement("span", { className: "arc-FormControl-error--icon" },
                     React__default.createElement(BtIconAlert_2, null)),
-                errorMessage)) : disclosureTitle ? (React__default.createElement(FormControlDisclosure, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))));
+                errorMessage)) : disclosureTitle ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(VerticalSpace, { size: "12" }),
+                React__default.createElement(DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText))) : (helper && (React__default.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))));
 };
 
 /**
  *  Use `Checkbox` to allow users to select individual options.
  */
 var Checkbox = 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 _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 = useContext(Context$2).requirementStatus;
     var surface = useContext(Context$3).surface;
-    var _f = useAriaDescribedby({
+    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") {
@@ -1610,11 +1653,15 @@ var Checkbox = forwardRef(function (_a, ref) {
             "arc-Checkbox--small": size === "s",
             "arc-Checkbox--onDarkSurface": surface === "dark"
         }) },
-        React__default.createElement("label", { id: idLabel, htmlFor: id, className: "arc-Checkbox-label" },
+        React__default.createElement("label", { id: idLabel, htmlFor: id, className: classNames("arc-Checkbox-label", {
+                "arc-Checkbox-label--top": checkboxAlignment === "top"
+            }) },
             React__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.createElement("span", { className: "arc-Checkbox-box" },
                 React__default.createElement(BtIconTickAlt2Px_2, null)),
-            React__default.createElement("span", null,
+            React__default.createElement("span", __assign$2({}, (checkboxAlignment === "top" && {
+                className: "arc-Checkbox-content--marginTop"
+            })),
                 label,
                 !isRequired && requirementStatus !== "optional" ? (React__default.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
                 helper && React__default.createElement("span", { className: "arc-Checkbox-helper" }, helper))),
@@ -1717,26 +1764,6 @@ var Curve = function (_a) {
             _b)) }, filterDataAttrs(props))));
 };
 
-const React$2 = React__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.
@@ -1761,9 +1788,11 @@ 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.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));
 };
@@ -33753,11 +33782,11 @@ function $d3863c46a17e8a28$var$removeLinks(items) {
  * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
  */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? useLayoutEffect : ()=>{};
 
-const $1746a345f3d73bb7$var$useReactId = React$a['useId'.toString()] || (()=>undefined
+const $1746a345f3d73bb7$var$useReactId = React$b['useId'.toString()] || (()=>undefined
 );
 let $1746a345f3d73bb7$var$count = 0;
 function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
-    const [id, setId] = React$a.useState($1746a345f3d73bb7$var$useReactId()); // React versions older than 18 will have client-side ids only.
+    const [id, setId] = React$b.useState($1746a345f3d73bb7$var$useReactId()); // React versions older than 18 will have client-side ids only.
     $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
         if (!deterministicId) setId((reactId)=>reactId !== null && reactId !== void 0 ? reactId : String($1746a345f3d73bb7$var$count++)
         );
@@ -34242,7 +34271,7 @@ var SideCar$1 = function (_a) {
     if (!Target) {
         throw new Error('Sidecar medium not found');
     }
-    return React$a.createElement(Target, __assign({}, rest));
+    return React$b.createElement(Target, __assign({}, rest));
 };
 SideCar$1.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -34258,9 +34287,9 @@ var nothing = function () {
 /**
  * Removes scrollbar from the page and contain the scroll within the Lock
  */
-var RemoveScroll = React$a.forwardRef(function (props, parentRef) {
-    var ref = React$a.useRef(null);
-    var _a = React$a.useState({
+var RemoveScroll = React$b.forwardRef(function (props, parentRef) {
+    var ref = React$b.useRef(null);
+    var _a = React$b.useState({
         onScrollCapture: nothing,
         onWheelCapture: nothing,
         onTouchMoveCapture: nothing,
@@ -34269,9 +34298,9 @@ var RemoveScroll = React$a.forwardRef(function (props, parentRef) {
     var SideCar = sideCar;
     var containerRef = useMergeRefs([ref, parentRef]);
     var containerProps = __assign$1(__assign$1({}, rest), callbacks);
-    return (React$a.createElement(React$a.Fragment, null,
-        enabled && (React$a.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),
-        forwardProps ? (React$a.cloneElement(React$a.Children.only(children), __assign$1(__assign$1({}, containerProps), { ref: containerRef }))) : (React$a.createElement(Container, __assign$1({}, containerProps, { className: className, ref: containerRef }), children))));
+    return (React$b.createElement(React$b.Fragment, null,
+        enabled && (React$b.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),
+        forwardProps ? (React$b.cloneElement(React$b.Children.only(children), __assign$1(__assign$1({}, containerProps), { ref: containerRef }))) : (React$b.createElement(Container, __assign$1({}, containerProps, { className: className, ref: containerRef }), children))));
 });
 RemoveScroll.defaultProps = {
     enabled: true,
@@ -34350,7 +34379,7 @@ var stylesheetSingleton = function () {
 var styleHookSingleton = function () {
     var sheet = stylesheetSingleton();
     return function (styles, isDynamic) {
-        React$a.useEffect(function () {
+        React$b.useEffect(function () {
             sheet.add(styles);
             return function () {
                 sheet.remove();
@@ -34431,8 +34460,8 @@ var RemoveScrollBar = function (props) {
      however it will be used only by the "first" invocation
      due to singleton nature of <Style
      */
-    var gap = React$a.useMemo(function () { return getGapWidth(gapMode); }, [gapMode]);
-    return React$a.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
+    var gap = React$b.useMemo(function () { return getGapWidth(gapMode); }, [gapMode]);
+    return React$b.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
 };
 
 var passiveSupported = false;
@@ -34564,16 +34593,16 @@ var generateStyle = function (id) { return "\n  .block-interactivity-".concat(id
 var idCounter = 0;
 var lockStack = [];
 function RemoveScrollSideCar(props) {
-    var shouldPreventQueue = React$a.useRef([]);
-    var touchStartRef = React$a.useRef([0, 0]);
-    var activeAxis = React$a.useRef();
-    var id = React$a.useState(idCounter++)[0];
-    var Style = React$a.useState(function () { return styleSingleton(); })[0];
-    var lastProps = React$a.useRef(props);
-    React$a.useEffect(function () {
+    var shouldPreventQueue = React$b.useRef([]);
+    var touchStartRef = React$b.useRef([0, 0]);
+    var activeAxis = React$b.useRef();
+    var id = React$b.useState(idCounter++)[0];
+    var Style = React$b.useState(function () { return styleSingleton(); })[0];
+    var lastProps = React$b.useRef(props);
+    React$b.useEffect(function () {
         lastProps.current = props;
     }, [props]);
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         if (props.inert) {
             document.body.classList.add("block-interactivity-".concat(id));
             var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
@@ -34585,7 +34614,7 @@ function RemoveScrollSideCar(props) {
         }
         return;
     }, [props.inert, props.lockRef.current, props.shards]);
-    var shouldCancelEvent = React$a.useCallback(function (event, parent) {
+    var shouldCancelEvent = React$b.useCallback(function (event, parent) {
         if ('touches' in event && event.touches.length === 2) {
             return !lastProps.current.allowPinchZoom;
         }
@@ -34624,7 +34653,7 @@ function RemoveScrollSideCar(props) {
         var cancelingAxis = activeAxis.current || currentAxis;
         return handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true);
     }, []);
-    var shouldPrevent = React$a.useCallback(function (_event) {
+    var shouldPrevent = React$b.useCallback(function (_event) {
         var event = _event;
         if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) {
             // not the last active
@@ -34653,24 +34682,24 @@ function RemoveScrollSideCar(props) {
             }
         }
     }, []);
-    var shouldCancel = React$a.useCallback(function (name, delta, target, should) {
+    var shouldCancel = React$b.useCallback(function (name, delta, target, should) {
         var event = { name: name, delta: delta, target: target, should: should };
         shouldPreventQueue.current.push(event);
         setTimeout(function () {
             shouldPreventQueue.current = shouldPreventQueue.current.filter(function (e) { return e !== event; });
         }, 1);
     }, []);
-    var scrollTouchStart = React$a.useCallback(function (event) {
+    var scrollTouchStart = React$b.useCallback(function (event) {
         touchStartRef.current = getTouchXY(event);
         activeAxis.current = undefined;
     }, []);
-    var scrollWheel = React$a.useCallback(function (event) {
+    var scrollWheel = React$b.useCallback(function (event) {
         shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
     }, []);
-    var scrollTouchMove = React$a.useCallback(function (event) {
+    var scrollTouchMove = React$b.useCallback(function (event) {
         shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
     }, []);
-    React$a.useEffect(function () {
+    React$b.useEffect(function () {
         lockStack.push(Style);
         props.setCallbacks({
             onScrollCapture: scrollWheel,
@@ -34688,14 +34717,14 @@ function RemoveScrollSideCar(props) {
         };
     }, []);
     var removeScrollBar = props.removeScrollBar, inert = props.inert;
-    return (React$a.createElement(React$a.Fragment, null,
-        inert ? React$a.createElement(Style, { styles: generateStyle(id) }) : null,
-        removeScrollBar ? React$a.createElement(RemoveScrollBar, { gapMode: "margin" }) : null));
+    return (React$b.createElement(React$b.Fragment, null,
+        inert ? React$b.createElement(Style, { styles: generateStyle(id) }) : null,
+        removeScrollBar ? React$b.createElement(RemoveScrollBar, { gapMode: "margin" }) : null));
 }
 
 var SideCar = exportSidecar(effectCar, RemoveScrollSideCar);
 
-var ReactRemoveScroll = React$a.forwardRef(function (props, ref) { return (React$a.createElement(RemoveScroll, __assign$1({}, props, { ref: ref, sideCar: SideCar }))); });
+var ReactRemoveScroll = React$b.forwardRef(function (props, ref) { return (React$b.createElement(RemoveScroll, __assign$1({}, props, { ref: ref, sideCar: SideCar }))); });
 ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var $01b9c$RemoveScroll = ReactRemoveScroll;
 
@@ -35706,9 +35735,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;
+const React$2 = React__default;
 const BtIconChevronUp2Px = props =>
-  /*#__PURE__*/ React$1.createElement(
+  /*#__PURE__*/ React$2.createElement(
     "svg",
     Object.assign(
       {
@@ -35717,8 +35746,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"
@@ -36332,6 +36361,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.createElement(React__default.Fragment, __assign$2({}, filterDataAttrs(props)), children));
+};
+
 var MenuButton = function (_a) {
     var _b;
     var menuOpen = _a.menuOpen, setMenuOpen = _a.setMenuOpen;
@@ -36361,6 +36395,7 @@ var SiteHeader = function (_a) {
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item &&
+                item.type !== NodeItem &&
                 item.type !== NavItem &&
                 item.type !== NavItemWithSubNav &&
                 item.type !== Fragment) {
@@ -36436,12 +36471,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;
 
@@ -36659,24 +36696,6 @@ function $6be4966fd9bbc698$var$getState(checked) {
 const $6be4966fd9bbc698$export$be92b6f5f03c0fe9 = $6be4966fd9bbc698$export$b5d5cf8927ab7262;
 const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07bf653ea69106;
 
-/**
- * Use `VerticalSpace` to create vertical space between components.
- */
-var VerticalSpace = function (_a) {
-    var _b;
-    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, sizeS = _a.sizeS, sizeM = _a.sizeM, sizeL = _a.sizeL, sizeXL = _a.sizeXL, props = __rest$2(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL"]);
-    return (React__default.createElement("div", __assign$2({ className: classNames((_b = {
-                "arc-VerticalSpace": true
-            },
-            _b["arc-VerticalSpace--size".concat(size)] = size,
-            _b["arc-VerticalSpace--sizeS".concat(sizeS)] = sizeS && sizeS,
-            _b["arc-VerticalSpace--sizeM".concat(sizeM)] = sizeM && sizeM,
-            _b["arc-VerticalSpace--sizeL".concat(sizeL)] = sizeL && sizeL,
-            _b["arc-VerticalSpace--sizeXL".concat(sizeXL)] = sizeXL && sizeXL,
-            _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
-            _b)) }, filterDataAttrs(props))));
-};
-
 /** 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;
@@ -36725,9 +36744,9 @@ var Badge = function (_a) {
             React__default.createElement(Text, { size: size === "default" ? "xs" : "m" }, children))));
 };
 
-const React = React__default;
+const React$1 = React__default;
 const BtIconCross = props =>
-  /*#__PURE__*/ React.createElement(
+  /*#__PURE__*/ React$1.createElement(
     "svg",
     Object.assign(
       {
@@ -36736,13 +36755,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"
@@ -36750,6 +36769,26 @@ const BtIconCross = props =>
   );
 var BtIconCross_2 = BtIconCross;
 
+const React = React__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.
  */
@@ -36779,7 +36818,8 @@ var Tag = function (_a) {
                 React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
             React__default.createElement("div", { className: "arc-Tag-label" }, children))))),
         isRemovable && (React__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.createElement(Icon, { icon: BtIconCross_2, color: "brand", size: 20 })))));
+            React__default.createElement(Icon, { icon: BtIconCross_2, color: "brand", size: 20 }),
+            React__default.createElement(Icon, { icon: BtIconCrossFill_2, color: "brand", size: 20 })))));
 };
 
 /**