@arc-ui/components 11.4.2 → 11.6.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,26 +1527,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 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("div", { className: classNames("arc-DisclosureMini-summary-icon", {
+                    "arc-DisclosureMini-summary-icon--small": size === "s"
+                }) },
+                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)))));
 };
@@ -1540,7 +1565,7 @@ 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 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 = useContext(Context$3).surface;
     var _f = useAriaDescribedby({
         disclosureText: disclosureText,
@@ -1575,23 +1600,26 @@ var FormControl = function (_a) {
                 requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
             helperUnderLabel && (React__default.createElement(React__default.Fragment, null, helper && (React__default.createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)))),
             children,
-            !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))))))));
+            React__default.createElement("div", { className: "arc-FormControl-info" },
+                !helperUnderLabel && (React__default.createElement("div", { className: "arc-FormControl-helperContainer" }, 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(React__default.Fragment, null,
+                    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))))),
+                supplementaryInfo && (React__default.createElement("div", { className: "arc-FormControl-supplementaryInfo" }, supplementaryInfo))))));
 };
 
 /**
  *  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 +1638,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 +1749,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,13 +1773,124 @@ 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));
 };
 
+var FilterControl = function (_a) {
+    var children = _a.children, onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b;
+    var surface = useContext(Context$3).surface;
+    var _c = useState(isSelected), selected = _c[0], setSelected = _c[1];
+    var onClickHandler = function () {
+        onClick && onClick();
+        setSelected(function (previousValue) { return !previousValue; });
+    };
+    return (React__default.createElement("button", { className: classNames("arc-FilterControl", {
+            "arc-FilterControl--onDarkSurface": surface === "dark",
+            "arc-FilterControl--selected": selected
+        }), onClick: onClickHandler, tabIndex: 0 },
+        React__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.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.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.createElement("div", __assign$2({ className: classNames("arc-FilterItems", {
+            "arc-FilterItems--list": displayType === "list",
+            "arc-FilterItems--grid": displayType === "grid"
+        }) }, filterDataAttrs(props)), displayType === "list"
+        ? React__default.Children.toArray(children).map(function (child, index, array) { return (React__default.createElement(React__default.Fragment, { key: index },
+            child,
+            index !== array.length - 1 && (React__default.createElement(React__default.Fragment, null,
+                React__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 = useState([]), selectedControls = _c[0], setSelectedControls = _c[1];
+    var controls = React__default.Children.toArray(children).find(function (child) { return React__default.isValidElement(child) && child.type === FilterControls; });
+    var items = React__default.Children.toArray(children).find(function (child) { return React__default.isValidElement(child) && child.type === FilterItems; });
+    useEffect(function () {
+        var initialSelectedControls = [];
+        if (controls && React__default.isValidElement(controls)) {
+            React__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.Children.toArray(items && React__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.createElement("div", __assign$2({ className: "arc-Filter" }, filterDataAttrs(props)),
+        React__default.createElement(FilterControls, { controlsAlignment: controlsAlignment }, controls &&
+            React__default.isValidElement(controls) &&
+            React__default.Children.map(controls.props.children, function (control, index) { return (React__default.createElement(FilterControl, { key: index, onClick: function () { return handleControlClick(control.props.children); }, isSelected: control.props.isSelected }, control.props.children)); })),
+        filteredItems.length === 0 ? (React__default.createElement(React__default.Fragment, null, error)) : (React__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.
  */
@@ -33753,11 +33876,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 +34365,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 +34381,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 +34392,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 +34473,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 +34554,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 +34687,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 +34708,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 +34747,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 +34776,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 +34811,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 +35829,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 +35840,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 +36455,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 +36489,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 +36565,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;
 
@@ -36725,9 +36856,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 +36867,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 +36881,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 +36930,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 })))));
 };
 
 /**
@@ -36827,11 +36979,50 @@ var TextInput = forwardRef(function (_a, ref) {
                                 : "Your password is hidden")))))))));
 });
 
+var TextArea = forwardRef(function (_a, ref) {
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = __rest$2(_a, ["defaultValue", "errorMessage", "helper", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText"]);
+    var surface = useContext(Context$3).surface;
+    var ourRef = useRef(null);
+    var _j = useState((value && value.length) || (defaultValue && defaultValue.length) || 0), characterCount = _j[0], setCharacterCount = _j[1];
+    var setSmartHeight = function (el) {
+        el.style.height = "auto";
+        el.style.height = "".concat(parseInt(getComputedStyle(el).getPropertyValue("border-width")) *
+            2 +
+            el.scrollHeight, "px");
+    };
+    var getTextAreaRef = function (elementRef) {
+        ourRef.current = elementRef;
+        if (ref && typeof ref === "object") {
+            ref.current = elementRef;
+        }
+        if (ref && typeof ref === "function") {
+            ref(elementRef);
+        }
+    };
+    var handleOnChange = function (e) {
+        resize === "auto" && ourRef.current && setSmartHeight(ourRef.current);
+        onChange && onChange(e);
+        setCharacterCount(e.target.value.length);
+    };
+    return (React__default.createElement(FormControl, __assign$2({ errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure, supplementaryInfo: maxLength &&
+            showCharacterCount && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Text, { tone: isDisabled ? "muted" : "default" },
+                React__default.createElement("span", { className: "arc-TextArea-characterCount" },
+                    characterCount,
+                    " / ",
+                    maxLength)))) }, filterDataAttrs(props)),
+        React__default.createElement("textarea", { id: id, className: classNames("arc-TextArea", {
+                "arc-TextArea--noResize": resize !== "manual",
+                "arc-TextArea--onDarkSurface": surface === "dark",
+                "arc-TextArea--invalid": errorMessage
+            }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef })));
+});
+
 /** Use `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;
     return (React__default.createElement("div", { className: "arc-Truncate", style: { maxWidth: "".concat(maxWidth, "%") }, title: title }, children));
 };
 
-export { Align, Badge, Base, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, Elevation, FormControl, Group, Heading, Icon, Image, Markup, Poster, RadioGroup, Rule, Section, Select, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, Surface, Context$3 as SurfaceContext, Switch, Tag, Text, TextInput, Truncate, UniversalHeader, VerticalSpace, VisuallyHidden };
+export { Align, Badge, Base, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, Elevation, Filter, FormControl, Group, Heading, Icon, Image, Markup, Poster, RadioGroup, Rule, Section, Select, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, Surface, Context$3 as SurfaceContext, Switch, Tag, Text, TextArea, TextInput, Truncate, UniversalHeader, VerticalSpace, VisuallyHidden };
 //# sourceMappingURL=index.es.js.map