@arc-ui/components 11.5.0 → 11.7.0

package/dist/_shared/esm/index-699086a7.d.ts

@@ -0,0 +1,2 @@
+export { Item } from "./SiteHeader.rehydrator-382d1c03";
+export {};

package/dist/_shared/esm/index-74488a9f.d.ts

@@ -0,0 +1,2 @@
+export { SubNavItem } from "./SubNavItem-a84d1bf4";
+export { default as SubNavItemRehydrator } from "./SiteHeader.rehydrator-382d1c03";

package/dist/_shared/esm/index-c81c9401.d.ts

@@ -1,4 +1,4 @@
-export * from "./FormControl-0744f93f";
-export * from "../../Card/Card.esm";
+export * from "./FormControl-2fa7aae5";
+export * from "./Card-79b6eae0";
 export * from "./index.es-00cb3bcb";
-export * from "../../TextInput/TextInput.esm";
+export * from "./TextInput-62bb7dee";

package/dist/_shared/esm/index-e340924e.d.ts

@@ -0,0 +1,2 @@
+export { ItemGroup } from "./ItemGroup-5af4d600";
+export { default as ItemGroupRehydrator } from "./SiteHeader.rehydrator-382d1c03";

package/dist/_shared/esm/index-e6d20018.d.ts

@@ -0,0 +1,3 @@
+export { NavItem } from "./NavItem-df20237c";
+export { default as NavItemRehydrator, default as NavItemWithSubNavRehydrator } from "./SiteHeader.rehydrator-382d1c03";
+export { NavItemWithSubNav } from "./NavItemWithSubNav-65f21828";

package/dist/_shared/esm/index-eb06f640.d.ts

@@ -0,0 +1,2 @@
+export { Panel } from "./SiteHeader.rehydrator-382d1c03";
+export {};

package/dist/_shared/esm/index-f419cf04.d.ts

@@ -0,0 +1,2 @@
+export { Column } from "./SiteHeader.rehydrator-382d1c03";
+export {};

package/dist/_shared/esm/{index.module-599b86dd.js → index.module-216016b5.js}

@@ -1,4 +1,4 @@
-import { createContext, useMemo, createElement, useContext, useCallback, forwardRef, Children, isValidElement, cloneElement, Fragment, useEffect, useRef, useLayoutEffect, useState } from 'react';
+import { useCallback, createContext, useMemo, createElement, useContext, useLayoutEffect, useRef, useEffect, useState, forwardRef, Children, isValidElement, cloneElement, Fragment } from 'react';
 import { flushSync } from 'react-dom';
 
 function _extends() {
@@ -26,6 +26,29 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
     };
 }
 
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */ function $6ed0406888f73fc4$var$setRef(ref, value) {
+    if (typeof ref === 'function') ref(value);
+    else if (ref !== null && ref !== undefined) ref.current = value;
+}
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */ function $6ed0406888f73fc4$export$43e446d32b3d21af(...refs) {
+    return (node)=>refs.forEach((ref)=>$6ed0406888f73fc4$var$setRef(ref, node)
+        )
+    ;
+}
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */ function $6ed0406888f73fc4$export$c7b2cbe3552a0d05(...refs) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return useCallback($6ed0406888f73fc4$export$43e446d32b3d21af(...refs), refs);
+}
+
 /* -------------------------------------------------------------------------------------------------
  * createContextScope
  * -----------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$export$50c7b4e9d9f19c1(scopeName, createContextScopeDeps = []) {
@@ -124,26 +147,69 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
 }
 
 /**
- * Set a given ref to a given value
- * This utility takes care of different types of refs: callback refs and RefObject(s)
- */ function $6ed0406888f73fc4$var$setRef(ref, value) {
-    if (typeof ref === 'function') ref(value);
-    else if (ref !== null && ref !== undefined) ref.current = value;
-}
+ * On the server, React emits a warning when calling `useLayoutEffect`.
+ * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
+ * We use this safe version which suppresses the warning by replacing it with a noop on the server.
+ *
+ * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+ */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? useLayoutEffect : ()=>{};
+
 /**
- * A utility to compose multiple refs together
- * Accepts callback refs and RefObject(s)
- */ function $6ed0406888f73fc4$export$43e446d32b3d21af(...refs) {
-    return (node)=>refs.forEach((ref)=>$6ed0406888f73fc4$var$setRef(ref, node)
-        )
-    ;
+ * 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 = useRef(callback);
+    useEffect(()=>{
+        callbackRef.current = callback;
+    }); // https://github.com/facebook/react/issues/19240
+    return useMemo(()=>(...args)=>{
+            var _callbackRef$current;
+            return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);
+        }
+    , []);
 }
-/**
- * A custom hook that composes multiple refs
- * Accepts callback refs and RefObject(s)
- */ function $6ed0406888f73fc4$export$c7b2cbe3552a0d05(...refs) {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    return useCallback($6ed0406888f73fc4$export$43e446d32b3d21af(...refs), refs);
+
+function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop: prop , defaultProp: defaultProp , onChange: onChange = ()=>{}  }) {
+    const [uncontrolledProp, setUncontrolledProp] = $71cd76cc60e0454e$var$useUncontrolledState({
+        defaultProp: defaultProp,
+        onChange: onChange
+    });
+    const isControlled = prop !== undefined;
+    const value1 = isControlled ? prop : uncontrolledProp;
+    const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
+    const setValue = useCallback((nextValue)=>{
+        if (isControlled) {
+            const setter = nextValue;
+            const value = typeof nextValue === 'function' ? setter(prop) : nextValue;
+            if (value !== prop) handleChange(value);
+        } else setUncontrolledProp(nextValue);
+    }, [
+        isControlled,
+        prop,
+        setUncontrolledProp,
+        handleChange
+    ]);
+    return [
+        value1,
+        setValue
+    ];
+}
+function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp: defaultProp , onChange: onChange  }) {
+    const uncontrolledState = useState(defaultProp);
+    const [value] = uncontrolledState;
+    const prevValueRef = useRef(value);
+    const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
+    useEffect(()=>{
+        if (prevValueRef.current !== value) {
+            handleChange(value);
+            prevValueRef.current = value;
+        }
+    }, [
+        value,
+        prevValueRef,
+        handleChange
+    ]);
+    return uncontrolledState;
 }
 
 /* -------------------------------------------------------------------------------------------------
@@ -301,88 +367,4 @@ 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 = useRef(callback);
-    useEffect(()=>{
-        callbackRef.current = callback;
-    }); // https://github.com/facebook/react/issues/19240
-    return useMemo(()=>(...args)=>{
-            var _callbackRef$current;
-            return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);
-        }
-    , []);
-}
-
-/**
- * On the server, React emits a warning when calling `useLayoutEffect`.
- * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
- * We use this safe version which suppresses the warning by replacing it with a noop on the server.
- *
- * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
- */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? useLayoutEffect : ()=>{};
-
-function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop: prop , defaultProp: defaultProp , onChange: onChange = ()=>{}  }) {
-    const [uncontrolledProp, setUncontrolledProp] = $71cd76cc60e0454e$var$useUncontrolledState({
-        defaultProp: defaultProp,
-        onChange: onChange
-    });
-    const isControlled = prop !== undefined;
-    const value1 = isControlled ? prop : uncontrolledProp;
-    const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
-    const setValue = useCallback((nextValue)=>{
-        if (isControlled) {
-            const setter = nextValue;
-            const value = typeof nextValue === 'function' ? setter(prop) : nextValue;
-            if (value !== prop) handleChange(value);
-        } else setUncontrolledProp(nextValue);
-    }, [
-        isControlled,
-        prop,
-        setUncontrolledProp,
-        handleChange
-    ]);
-    return [
-        value1,
-        setValue
-    ];
-}
-function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp: defaultProp , onChange: onChange  }) {
-    const uncontrolledState = useState(defaultProp);
-    const [value] = uncontrolledState;
-    const prevValueRef = useRef(value);
-    const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
-    useEffect(()=>{
-        if (prevValueRef.current !== value) {
-            handleChange(value);
-            prevValueRef.current = value;
-        }
-    }, [
-        value,
-        prevValueRef,
-        handleChange
-    ]);
-    return uncontrolledState;
-}
-
-function $010c2913dbd2fe3d$export$5cae361ad82dce8b(value) {
-    const ref = 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 useMemo(()=>{
-        if (ref.current.value !== value) {
-            ref.current.previous = ref.current.value;
-            ref.current.value = value;
-        }
-        return ref.current.previous;
-    }, [
-        value
-    ]);
-}
-
-export { $c512c27ab02ef895$export$50c7b4e9d9f19c1 as $, _extends as _, $6ed0406888f73fc4$export$c7b2cbe3552a0d05 as a, $5e63c961fc1ce211$export$8c6ed5c666ac1360 as b, $b1b2314f5f9a1d84$export$25bec8c6f54ee79a as c, $8927f6f2acc4f386$export$250ffa63cdc0d034 as d, $e42e1063c40fb3ef$export$b9ecd428b558ff10 as e, $8927f6f2acc4f386$export$6d1a0317bde7de7f as f, $9f79659886946c16$export$e5c5a5f917a5871c as g, $71cd76cc60e0454e$export$6f32135080cb4c3 as h, $010c2913dbd2fe3d$export$5cae361ad82dce8b as i };
+export { $6ed0406888f73fc4$export$c7b2cbe3552a0d05 as $, _extends as _, $9f79659886946c16$export$e5c5a5f917a5871c as a, $c512c27ab02ef895$export$50c7b4e9d9f19c1 as b, $71cd76cc60e0454e$export$6f32135080cb4c3 as c, $5e63c961fc1ce211$export$8c6ed5c666ac1360 as d, $8927f6f2acc4f386$export$250ffa63cdc0d034 as e, $e42e1063c40fb3ef$export$b9ecd428b558ff10 as f, $b1b2314f5f9a1d84$export$25bec8c6f54ee79a as g, $8927f6f2acc4f386$export$6d1a0317bde7de7f as h };

package/dist/_shared/esm/index.module-88179159.js

@@ -0,0 +1,21 @@
+import { useMemo, useRef } from 'react';
+
+function $010c2913dbd2fe3d$export$5cae361ad82dce8b(value) {
+    const ref = 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 useMemo(()=>{
+        if (ref.current.value !== value) {
+            ref.current.previous = ref.current.value;
+            ref.current.value = value;
+        }
+        return ref.current.previous;
+    }, [
+        value
+    ]);
+}
+
+export { $010c2913dbd2fe3d$export$5cae361ad82dce8b as $ };

package/dist/index.es.js

@@ -930,7 +930,7 @@ var Surface = function (_a) {
         surface = "dark";
     }
     return (React__default.createElement(Provider$4, { value: { surface: surface } },
-        React__default.createElement("div", __assign$2({ className: classNames((_b = {
+        React__default.createElement("div", __assign$2({ "data-testid": "arc-surface", className: classNames((_b = {
                     "arc-Surface": true
                 },
                 _b["arc-Surface--".concat(background &&
@@ -1546,7 +1546,9 @@ var DisclosureMini = function (_a) {
                 "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("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-DisclosureMini-details" },
@@ -1554,24 +1556,6 @@ var DisclosureMini = function (_a) {
                 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
 };
@@ -1581,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,
@@ -1616,12 +1600,13 @@ 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(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))))))));
+            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))))));
 };
 
 /**
@@ -1797,6 +1782,115 @@ var Elevation = function (_a) {
             _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.
  */
@@ -36696,6 +36790,24 @@ 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;
@@ -36867,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