@arc-ui/components 11.4.2 → 11.6.0

package/dist/_shared/cjs/Checkbox-21d3c4f6.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var React = require('react');
+var BtIconTickAlt2Px = require('./BtIconTickAlt2Px-bdf06f8c.js');
+var BtIconAlert = require('./BtIconAlert-637db790.js');
+var index = require('./index-45bfb67b.js');
+var FormControl = require('./FormControl-9aaddd54.js');
+var Surface = require('./Surface-6da0a78e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ *  Use `Checkbox` to allow users to select individual options.
+ */
+var Checkbox = React.forwardRef(function (_a, ref) {
+    var _b = _a.checked, checked = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _e = _a.size, size = _e === void 0 ? "l" : _e, value = _a.value, _f = _a.checkboxAlignment, checkboxAlignment = _f === void 0 ? "center" : _f, props = filterDataAttrs.__rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "name", "onBlur", "onChange", "size", "value", "checkboxAlignment"]);
+    var requirementStatus = React.useContext(FormControl.Context).requirementStatus;
+    var surface = React.useContext(Surface.Context).surface;
+    var _g = FormControl.useAriaDescribedby({
+        id: id,
+        errorMessage: errorMessage
+    }), ariaDescribedby = _g.ariaDescribedby, idError = _g.idError;
+    var idLabel = "".concat(id, "-label");
+    var checkedProps = {};
+    if (typeof onChange === "function") {
+        checkedProps.checked = checked;
+    }
+    else if (checked && !onChange) {
+        checkedProps.defaultChecked = true;
+    }
+    if (requirementStatus === "required") {
+        isRequired = true;
+    }
+    return (React__default["default"].createElement("div", { className: index.classNames({
+            "arc-Checkbox": true,
+            "arc-Checkbox--disabled": isDisabled,
+            "arc-Checkbox--invalid": errorMessage,
+            "arc-Checkbox--small": size === "s",
+            "arc-Checkbox--onDarkSurface": surface === "dark"
+        }) },
+        React__default["default"].createElement("label", { id: idLabel, htmlFor: id, className: index.classNames("arc-Checkbox-label", {
+                "arc-Checkbox-label--top": checkboxAlignment === "top"
+            }) },
+            React__default["default"].createElement("input", filterDataAttrs.__assign({ "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.filterDataAttrs(props))),
+            React__default["default"].createElement("span", { className: "arc-Checkbox-box" },
+                React__default["default"].createElement(BtIconTickAlt2Px.BtIconTickAlt2Px_2, null)),
+            React__default["default"].createElement("span", filterDataAttrs.__assign({}, (checkboxAlignment === "top" && {
+                className: "arc-Checkbox-content--marginTop"
+            })),
+                label,
+                !isRequired && requirementStatus !== "optional" ? (React__default["default"].createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
+                helper && React__default["default"].createElement("span", { className: "arc-Checkbox-helper" }, helper))),
+        errorMessage && (React__default["default"].createElement("div", { id: idError, className: "arc-Checkbox-error" },
+            React__default["default"].createElement("span", { className: "arc-Checkbox-error--icon" },
+                React__default["default"].createElement(BtIconAlert.BtIconAlert_2, null)),
+            errorMessage))));
+});
+
+exports.Checkbox = Checkbox;

package/dist/_shared/cjs/Columns-e90798f8.d.ts

@@ -0,0 +1,76 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `Columns` to compose layouts on a 12-column grid.
+ */
+declare const Columns: FC<ColumnsProps> & {
+    Col: typeof Col;
+};
+declare const Col: FC<ColProps>;
+type Span = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type Offset = "0" | "24" | "48" | "72" | "96" | "120" | "144" | "168" | "192" | "216" | "240" | "264" | "288" | "312" | "336" | "360" | "384";
+interface ColProps {
+    /**
+     * Vertically align the Column.
+     */
+    align?: "top" | "center" | "bottom";
+    /**
+     * Content to display in the Column.
+     */
+    children?: ReactNode;
+    /**
+     * Should the Column be visible for debugging and documentation
+     * purposes?
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Overlay the column over the previous content on the default breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
+     */
+    offset?: Offset;
+    /**
+     * Overlay the column over the previous content on the S breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
+     */
+    offsetS?: Offset;
+    /**
+     * Overlay the column over the previous content on the M breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
+     */
+    offsetM?: Offset;
+    /**
+     * Overlay the column over the previous content on the L breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
+     */
+    offsetL?: Offset;
+    /**
+     * Overlay the column over the previous content on the XL breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
+     */
+    offsetXL?: Offset;
+    /**
+     * The number of columns to span on the default breakpoint and above, from 1 to 12.
+     */
+    span?: Span;
+    /**
+     * The number of columns to span on the S breakpoint and above, from 1 to 12.
+     */
+    spanS?: Span;
+    /**
+     * The number of columns to span on the M breakpoint and above, from 1 to 12.
+     */
+    spanM?: Span;
+    /**
+     * The number of columns to span on the L breakpoint and above, from 1 to 12.
+     */
+    spanL?: Span;
+    /**
+     * The number of columns to span on the XL breakpoint and above, from 1 to 12.
+     */
+    spanXL?: Span;
+}
+interface ColumnsProps {
+    /**
+     * Contents of the Columns. Should only contain `Columns.Col`.
+     */
+    children: ReactNode;
+    /**
+     * Should the Columns be gutterless?
+     */
+    isGutterless?: boolean;
+}
+export { Columns, Col, ColProps, ColumnsProps };

package/dist/_shared/cjs/Columns-e90798f8.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var index = require('./index-45bfb67b.js');
+var React = require('react');
+var suffixModifier = require('./suffix-modifier-1ee2da04.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `Columns` to compose layouts on a 12-column grid.
+ */
+var Columns = function (_a) {
+    var children = _a.children, _b = _a.isGutterless, isGutterless = _b === void 0 ? false : _b, props = filterDataAttrs.__rest(_a, ["children", "isGutterless"]);
+    React.useEffect(function () {
+        React__default["default"].Children.map(children, function (item) {
+            if (item && item.type !== Col) {
+                throw new Error("Illegal child passed to <Columns />. Ensure to only use <Columns.Col />.");
+            }
+        });
+    }, [children]);
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames({
+            "arc-Columns": true,
+            "arc-Columns--gutterless": isGutterless
+        }) }, filterDataAttrs.filterDataAttrs(props)),
+        React__default["default"].createElement("div", { className: "arc-Columns-inner" }, children)));
+};
+var Col = function (_a) {
+    var _b;
+    var align = _a.align, children = _a.children, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, offset = _a.offset, offsetS = _a.offsetS, offsetM = _a.offsetM, offsetL = _a.offsetL, offsetXL = _a.offsetXL, span = _a.span, spanS = _a.spanS, spanM = _a.spanM, spanL = _a.spanL, spanXL = _a.spanXL, props = filterDataAttrs.__rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames((_b = {},
+            _b["arc-Columns-col"] = true,
+            _b[suffixModifier.suffixModifier("arc-Columns-col--align", align || "")] = align,
+            _b["arc-Columns-col--".concat(span)] = typeof span !== "undefined",
+            _b["arc-Columns-col--s".concat(spanS)] = typeof spanS !== "undefined",
+            _b["arc-Columns-col--m".concat(spanM)] = typeof spanM !== "undefined",
+            _b["arc-Columns-col--l".concat(spanL)] = typeof spanL !== "undefined",
+            _b["arc-Columns-col--xL".concat(spanXL)] = typeof spanXL !== "undefined",
+            _b["arc-Columns-col--offset"] = typeof offset !== "undefined" ||
+                typeof offsetS !== "undefined" ||
+                typeof offsetM !== "undefined" ||
+                typeof offsetL !== "undefined" ||
+                typeof offsetXL !== "undefined",
+            _b["arc-Columns-col--offset".concat(offset)] = typeof offset !== "undefined",
+            _b["arc-Columns-col--offsetS".concat(offsetS)] = typeof offsetS !== "undefined",
+            _b["arc-Columns-col--offsetM".concat(offsetM)] = typeof offsetM !== "undefined",
+            _b["arc-Columns-col--offsetL".concat(offsetL)] = typeof offsetL !== "undefined",
+            _b["arc-Columns-col--offsetXL".concat(offsetXL)] = typeof offsetXL !== "undefined",
+            _b["arc-Columns-col--debugVisible"] = isDebugVisible,
+            _b)) }, filterDataAttrs.filterDataAttrs(props)), children));
+};
+Col.displayName = "Columns.Col";
+Columns.Col = Col;
+
+exports.Columns = Columns;

package/dist/_shared/cjs/{Curve-e72ce25b.js → Curve-b05589d8.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-78b35bc1.js');
-var index$1 = require('./index-45bfb67b.js');
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var index = require('./index-45bfb67b.js');
 var React = require('react');
-var suffixModifier = require('./suffix-modifier-edf7851e.js');
+var suffixModifier = require('./suffix-modifier-1ee2da04.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,8 +15,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 var Curve = function (_a) {
     var _b;
-    var bottomColor = _a.bottomColor, _c = _a.from, from = _c === void 0 ? "top" : _c, _d = _a.isInverted, isInverted = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "m" : _e, topColor = _a.topColor, props = index.__rest(_a, ["bottomColor", "from", "isInverted", "size", "topColor"]);
-    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {
+    var bottomColor = _a.bottomColor, _c = _a.from, from = _c === void 0 ? "top" : _c, _d = _a.isInverted, isInverted = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "m" : _e, topColor = _a.topColor, props = filterDataAttrs.__rest(_a, ["bottomColor", "from", "isInverted", "size", "topColor"]);
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames((_b = {
                 "arc-Curve": true
             },
             _b[suffixModifier.suffixModifier("arc-Curve--from", from)] = from && from !== "top",
@@ -24,7 +24,7 @@ var Curve = function (_a) {
             _b[suffixModifier.suffixModifier("arc-Curve--bottomColor", bottomColor || "")] = bottomColor,
             _b[suffixModifier.suffixModifier("arc-Curve--topColor", topColor || "")] = topColor,
             _b["arc-Curve--inverted"] = isInverted,
-            _b)) }, index.filterDataAttrs(props))));
+            _b)) }, filterDataAttrs.filterDataAttrs(props))));
 };
 
 exports.Curve = Curve;

package/dist/_shared/cjs/DisclosureMini-067e0319.d.ts

@@ -0,0 +1,37 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `DisclosureMini` to display content that is only visible when toggled into
+ * an "open" state.
+ */
+declare const DisclosureMini: FC<DisclosureMiniProps>;
+interface DisclosureMiniProps {
+    /**
+     * Content to display in the DisclosureMini.
+     */
+    children: ReactNode;
+    /**
+     * DisclosureMini ID.
+     */
+    id?: string;
+    /**
+     * The DisclosureMini summary text.
+     */
+    summary: string;
+    /**
+     * Should the Disclosure content be open by default?
+     */
+    isOpen?: boolean;
+    /**
+     * Position of the DisclosureMini icon?
+     */
+    iconPosition?: "left" | "right";
+    /**
+     * On Click handler for DisclosureMini summary disclosure.
+     */
+    onClick?: () => void;
+    /**
+     * Disclosure size.
+     */
+    size?: "s" | "l";
+}
+export { DisclosureMini, DisclosureMiniProps };

package/dist/_shared/cjs/DisclosureMini-067e0319.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var index = require('./index-45bfb67b.js');
+var React = require('react');
+var BtIconChevronDown2Px = require('./BtIconChevronDown2Px-8fb4e2eb.js');
+var Text = require('./Text-6f2827e6.js');
+var Surface = require('./Surface-6da0a78e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `DisclosureMini` to display content that is only visible when toggled into
+ * an "open" state.
+ */
+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 = filterDataAttrs.__rest(_a, ["children", "summary", "onClick", "id", "isOpen", "iconPosition", "size"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var _e = React.useState(false), disclousreState = _e[0], setDisclosureState = _e[1];
+    var handleOnClick = function () {
+        onClick && onClick();
+        setDisclosureState(function (prevState) { return !prevState; });
+    };
+    return (React__default["default"].createElement("details", filterDataAttrs.__assign({ "data-testid": "DisclosureMini", className: index.classNames({
+            "arc-DisclosureMini": true,
+            "arc-DisclosureMini--onDarkSurface": surface === "dark"
+        }), open: isOpen }, filterDataAttrs.filterDataAttrs(props)),
+        React__default["default"].createElement("summary", { "data-testid": "DisclosureMiniSummary", className: index.classNames("arc-DisclosureMini-summary", {
+                "arc-DisclosureMini-summary--icon-left": iconPosition === "left",
+                "arc-DisclosureMini-summary--icon-right": iconPosition === "right"
+            }), onClick: handleOnClick, "aria-expanded": disclousreState },
+            React__default["default"].createElement("div", { className: index.classNames("arc-DisclosureMini-summary-icon", {
+                    "arc-DisclosureMini-summary-icon--small": size === "s"
+                }) },
+                React__default["default"].createElement(BtIconChevronDown2Px.BtIconChevronDown2Px_2, null)),
+            React__default["default"].createElement(Text.Text, { size: size === "l" ? "m" : "s" }, summary)),
+        React__default["default"].createElement("div", { className: "arc-DisclosureMini-details" },
+            React__default["default"].createElement(Text.Text, { size: size === "l" ? "m" : "s" },
+                React__default["default"].createElement("span", { id: id }, children)))));
+};
+
+exports.DisclosureMini = DisclosureMini;

package/dist/_shared/cjs/Filter-f7d2fbda.d.ts

@@ -0,0 +1,83 @@
+import { FC, ReactNode } from "react";
+declare const FilterItems: FC<FilterItemsProps>;
+interface FilterItemsProps {
+    /**
+     * Render children of `<Filter.Items />`. This should only use `<Filter.Item />`
+     */
+    children: ReactNode;
+    /**
+     * Determine the display style of `<Filter.Item />`
+     */
+    displayType?: "grid" | "list";
+}
+declare const FilterItem: FC<FilterItemProps>;
+interface FilterItemProps {
+    /**
+     * Content to display within `Filter.Item`
+     */
+    children: ReactNode;
+    /**
+     * Attach Tags to content provided within `Filter.Item`
+     */
+    tags: string[];
+}
+declare const FilterControls: FC<FilterControlsProps>;
+interface FilterControlsProps {
+    /**
+     * Contents of the `<FilterControls />` Should contain `<FilterControl />`
+     */
+    children: ReactNode;
+    /**
+     * Detmine how to align <FilterControl /> with in <FilterControls />. Default `center`
+     */
+    controlsAlignment?: "left" | "right" | "center";
+}
+declare const FilterControl: FC<FilterControlProps>;
+interface FilterControlProps {
+    /**
+     * Name of the `<FilterControl />`
+     */
+    children: ReactNode;
+    /**
+     * Determine if the `<FilterControl />` is selected
+     */
+    isSelected?: boolean;
+    /**
+     * onClick handler
+     */
+    onClick?: () => void;
+}
+/** use `Filter` for interactive elements that filter and categorise page content. */
+declare const Filter: FC<FilterProps> & {
+    Item: typeof FilterItem;
+    Items: typeof FilterItems;
+    Control: typeof FilterControl;
+    Controls: typeof FilterControls;
+};
+interface FilterProps {
+    /**
+     * Contents of the `<Filter />` Should contain `<Filter.Item />`
+     */
+    children?: ReactNode;
+    /**
+     * onChange handler called everytime `<FilterControl />` is pressed
+     */
+    onChange?: (selectedControls: string[]) => void;
+    /**
+     * Detmine how to display the content within `<Filter.Items />`. Default is `grid`
+     */
+    displayType?: FilterItemsProps["displayType"];
+    /**
+     * Detmine how to align <Filter.Controls />. Default `center`
+     */
+    controlsAlignment?: FilterControlsProps["controlsAlignment"];
+    /**
+     * Detmine if the `<Filter.Control />` have to partially match or match all
+     */
+    logicType?: "AND" | "OR";
+    /**
+     * Detmine what is display when no items match the filtering criteria
+     */
+    error?: ReactNode;
+}
+export { FilterItems, FilterItemsProps, FilterItem, FilterItemProps, FilterControls, FilterControlsProps, FilterControl, FilterControlProps, Filter, FilterProps };

package/dist/_shared/cjs/Filter-f7d2fbda.js

@@ -0,0 +1,121 @@
+'use strict';
+
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var React = require('react');
+var Surface = require('./Surface-6da0a78e.js');
+var index = require('./index-45bfb67b.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var FilterControl = function (_a) {
+    var children = _a.children, onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b;
+    var surface = React.useContext(Surface.Context).surface;
+    var _c = React.useState(isSelected), selected = _c[0], setSelected = _c[1];
+    var onClickHandler = function () {
+        onClick && onClick();
+        setSelected(function (previousValue) { return !previousValue; });
+    };
+    return (React__default["default"].createElement("button", { className: index.classNames("arc-FilterControl", {
+            "arc-FilterControl--onDarkSurface": surface === "dark",
+            "arc-FilterControl--selected": selected
+        }), onClick: onClickHandler, tabIndex: 0 },
+        React__default["default"].createElement("div", { className: "arc-FilterControl-text" }, children)));
+};
+
+var FilterControls = function (_a) {
+    var children = _a.children, controlsAlignment = _a.controlsAlignment, props = filterDataAttrs.__rest(_a, ["children", "controlsAlignment"]);
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-FilterControls", {
+            "arc-FilterControls--alignLeft": controlsAlignment === "left",
+            "arc-FilterControls--alignRight": controlsAlignment === "right"
+        }) }, filterDataAttrs.filterDataAttrs(props)), children));
+};
+
+var FilterItem = function (_a) {
+    var children = _a.children, props = filterDataAttrs.__rest(_a, ["children"]);
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: "arc-FilterItem" }, filterDataAttrs.filterDataAttrs(props)), children));
+};
+
+var FilterItems = function (_a) {
+    var children = _a.children, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b, props = filterDataAttrs.__rest(_a, ["children", "displayType"]);
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-FilterItems", {
+            "arc-FilterItems--list": displayType === "list",
+            "arc-FilterItems--grid": displayType === "grid"
+        }) }, filterDataAttrs.filterDataAttrs(props)), displayType === "list"
+        ? React__default["default"].Children.toArray(children).map(function (child, index, array) { return (React__default["default"].createElement(React__default["default"].Fragment, { key: index },
+            child,
+            index !== array.length - 1 && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("div", { className: "arc-FilterItems-separator", "data-testid": "arc-FilterItems-separator" }))))); })
+        : children));
+};
+
+/** use `Filter` for interactive elements that filter and categorise page content. */
+var Filter = function (_a) {
+    var children = _a.children, onChange = _a.onChange, displayType = _a.displayType, controlsAlignment = _a.controlsAlignment, _b = _a.logicType, logicType = _b === void 0 ? "OR" : _b, error = _a.error, props = filterDataAttrs.__rest(_a, ["children", "onChange", "displayType", "controlsAlignment", "logicType", "error"]);
+    var _c = React.useState([]), selectedControls = _c[0], setSelectedControls = _c[1];
+    var controls = React__default["default"].Children.toArray(children).find(function (child) { return React__default["default"].isValidElement(child) && child.type === FilterControls; });
+    var items = React__default["default"].Children.toArray(children).find(function (child) { return React__default["default"].isValidElement(child) && child.type === FilterItems; });
+    React.useEffect(function () {
+        var initialSelectedControls = [];
+        if (controls && React__default["default"].isValidElement(controls)) {
+            React__default["default"].Children.forEach(controls.props.children, function (child) {
+                if (child.props.isSelected) {
+                    initialSelectedControls.push(child.props.children);
+                }
+            });
+        }
+        setSelectedControls(initialSelectedControls);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var handleControlClick = function (clickedControl) {
+        if (selectedControls.includes(clickedControl)) {
+            var updatedControls = selectedControls.filter(function (control) { return control !== clickedControl; });
+            setSelectedControls(updatedControls);
+            if (onChange) {
+                onChange(updatedControls);
+            }
+        }
+        else {
+            var updatedControls = filterDataAttrs.__spreadArray(filterDataAttrs.__spreadArray([], selectedControls, true), [clickedControl], false);
+            setSelectedControls(updatedControls);
+            if (onChange) {
+                onChange(updatedControls);
+            }
+        }
+    };
+    var filterItems = React__default["default"].Children.toArray(items && React__default["default"].isValidElement(items) && items.props.children);
+    var filteredItems = filterItems.filter(function (filteredItem) {
+        // If no tags are selected, show all items
+        if (selectedControls.length === 0) {
+            return true;
+        }
+        // If logicType is "AND", all selected tags should be present in the item's tags
+        if (logicType === "AND") {
+            return selectedControls.every(function (control) {
+                return filteredItem.props.tags.includes(control);
+            });
+        }
+        else {
+            // Check if item has tags property and if any selected tags are present in item's tags
+            return selectedControls.some(function (control) {
+                return filteredItem.props.tags.includes(control);
+            });
+        }
+    });
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: "arc-Filter" }, filterDataAttrs.filterDataAttrs(props)),
+        React__default["default"].createElement(FilterControls, { controlsAlignment: controlsAlignment }, controls &&
+            React__default["default"].isValidElement(controls) &&
+            React__default["default"].Children.map(controls.props.children, function (control, index) { return (React__default["default"].createElement(FilterControl, { key: index, onClick: function () { return handleControlClick(control.props.children); }, isSelected: control.props.isSelected }, control.props.children)); })),
+        filteredItems.length === 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null, error)) : (React__default["default"].createElement(FilterItems, { displayType: displayType }, filteredItems.map(function (item) { return item.props.children; })))));
+};
+Filter.Controls = FilterControls;
+Filter.Control = FilterControl;
+Filter.Items = FilterItems;
+Filter.Item = FilterItem;
+FilterControls.displayName = "Filter.Controls";
+FilterControl.displayName = "Filter.Control";
+FilterItems.displayName = "Filter.Items";
+FilterItem.displayName = "Filter.Item";
+
+exports.Filter = Filter;

package/dist/_shared/cjs/{FormControl-d4d9c665.d.ts → FormControl-9aaddd54.d.ts}

@@ -1,33 +1,6 @@
 /// <reference types="react" />
 import React from "react";
-import { FC, ReactNode } from "react";
-/**
- * Use `FormControlDisclosure` to display content that is only visible when toggled into
- * an "open" state.
- */
-declare const FormControlDisclosure: FC<FormControlDisclosureProps>;
-interface FormControlDisclosureProps {
-    /**
-     * Content to display in the FormControlDisclosure.
-     */
-    children: ReactNode;
-    /**
-     * FormControlDisclosure ID.
-     */
-    id?: string;
-    /**
-     * The FormControlDisclosure summary text.
-     */
-    summary: string;
-    /**
-     * On Click handler for FormControlDisclosure summary disclosure.
-     */
-    onClick?: () => void;
-    /**
-     * Disclosure size.
-     */
-    size?: "s" | "l";
-}
+import { FC } from "react";
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.
  */
@@ -114,9 +87,13 @@ interface FormControlProps {
      * onClick handler for FormControlDisclosure
      */
     onClickDisclosure?: () => void;
+    /**
+     * Optional additional information for the FormControl.
+     */
+    supplementaryInfo?: React.ReactNode;
     /**
      * Position helper text under label. This is set to `false` by default.
      */
     helperUnderLabel?: boolean;
 }
-export { FormControlDisclosure, FormControlDisclosureProps, useAriaDescribedby, FormControl, FormControlProps, Context as FormControlContext };
+export { useAriaDescribedby, FormControl, FormControlProps, Context as FormControlContext };