@arc-ui/components 12.0.0-beta.13 → 12.0.0-beta.14.1

package/dist/_shared/esm/CardFooter-Dor2jbTF.js

@@ -1,73 +0,0 @@
-import React__default from 'react';
-import { c as classNames } from './index-5C0-U8cc.js';
-import { B as BtIconArrowRight } from './BtIconArrowRight.esm-26CZetOo.js';
-import { B as BtIconPlayFill } from './BtIconPlayFill.esm-Bi65YfLF.js';
-import { I as Icon } from './Icon-PQa1SRbJ.js';
-import { i as isDate, f as format } from './index-Cr6KeQLU.js';
-
-const BtIconPlay = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.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__default.createElement("path", {
-      d: "M20.83887,15.03955,13.66113,10.896A1.107,1.107,0,0,0,12,11.85449v8.2876a1.10534,1.10534,0,0,0,1.66113.95947L20.83887,16.957a1.10688,1.10688,0,0,0,0-1.91748Zm-.5,1.05176-7.17774,4.14453a.10437.10437,0,0,1-.10742-.00049A.10314.10314,0,0,1,13,20.14209v-8.2876a.10229.10229,0,0,1,.05371-.09277.10284.10284,0,0,1,.10742,0l7.17774,4.14307a.10421.10421,0,0,1,.05371.09375A.10285.10285,0,0,1,20.33887,16.09131Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconArrowRightFill = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M2,16A14,14,0,1,0,16,2,14,14,0,0,0,2,16Zm16.85352-4.35352L23.207,16l-4.35351,4.35352a.5.5,0,0,1-.707-.707L21.293,16.5H9.5a.5.5,0,0,1,0-1H21.293l-3.14649-3.14648a.5.5,0,0,1,.707-.707Z",
-      fill: "currentColor",
-    }),
-  );
-
-var CardFooter = function (_a) {
-    var metaText = _a.metaText, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isDarkPathway, isDarkPathway = _c === void 0 ? false : _c, _d = _a.showButton, showButton = _d === void 0 ? true : _d, _e = _a.isHovered, isHovered = _e === void 0 ? false : _e;
-    var icons = {
-        arrow: {
-            regular: BtIconArrowRight,
-            filled: BtIconArrowRightFill
-        },
-        play: {
-            regular: BtIconPlay,
-            filled: BtIconPlayFill
-        }
-    };
-    return (React__default.createElement("div", { className: classNames("arc-CardFooter", {
-            "arc-CardFooter--darkPathway": isDarkPathway
-        }) },
-        React__default.createElement("div", { className: "arc-CardFooter-metaTextContainer" }, metaText && (React__default.createElement("div", { className: "arc-CardFooter-metaText" }, isDate(metaText) ? (React__default.createElement("time", { dateTime: format(metaText, "yyyy-MM-dd") }, format(metaText, "d MMMM yyyy"))) : (React__default.createElement("span", null, metaText))))),
-        showButton && (React__default.createElement("div", null,
-            React__default.createElement("div", { className: "arc-CardFooter-button" },
-                React__default.createElement("div", { className: "arc-CardFooter-buttonIcon" },
-                    React__default.createElement("div", { className: classNames("arc-CardFooter-buttonIconRight", {
-                            "arc-CardFooter-buttonIconRight--isHovered": isHovered
-                        }) },
-                        React__default.createElement(Icon, { icon: icons[buttonIcon].regular })),
-                    React__default.createElement("div", { className: "arc-CardFooter-buttonIconLeft" },
-                        React__default.createElement(Icon, { icon: icons[buttonIcon].regular }))))))));
-};
-
-export { CardFooter as C };

package/dist/_shared/esm/CardHeading-DnkJg4cS.js

@@ -1,10 +0,0 @@
-import { a as __assign, f as filterAttrs } from './index-DMMRfg3O.js';
-import React__default from 'react';
-import { H as Heading } from './Heading-B4CveN1U.js';
-
-var CardHeading = function (_a) {
-    var onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onBlur = _a.onBlur, onFocus = _a.onFocus, href = _a.href, heading = _a.heading, _b = _a.size, size = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d;
-    return (React__default.createElement(Heading, { level: headingLevel, size: size }, href ? (React__default.createElement("a", __assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterAttrs(linkData)), heading)) : (heading)));
-};
-
-export { CardHeading as C };

package/dist/_shared/esm/Checkbox-BsVIoYs3.js

@@ -1,86 +0,0 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './index-DMMRfg3O.js';
-import React__default, { forwardRef, useContext, useRef, useEffect } from 'react';
-import { c as classNames } from './index-5C0-U8cc.js';
-import { C as Context, u as useAriaDescribedby } from './FormControl-Dx4vj08j.js';
-import { C as Context$1 } from './Surface-DnIdJOp5.js';
-import { T as ThemeIcon } from './ThemeIcon-a0WvZRNE.js';
-import { V as VisuallyHidden } from './VisuallyHidden-DhtgCXQL.js';
-
-/**
- *  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, _e = _a.hideLabel, hideLabel = _e === void 0 ? false : _e, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _f = _a.size, size = _f === void 0 ? "m" : _f, value = _a.value, _g = _a.checkboxAlignment, checkboxAlignment = _g === void 0 ? "center" : _g, _h = _a.indeterminate, indeterminate = _h === void 0 ? false : _h, props = __rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "hideLabel", "name", "onBlur", "onChange", "size", "value", "checkboxAlignment", "indeterminate"]);
-    var requirementStatus = useContext(Context).requirementStatus;
-    var surface = useContext(Context$1).surface;
-    var _j = useAriaDescribedby({
-        id: id,
-        errorMessage: errorMessage
-    }), ariaDescribedby = _j.ariaDescribedby, idError = _j.idError;
-    var internalRef = useRef(null);
-    var synchronizeRefs = function (el) {
-        internalRef.current = el;
-        if (typeof ref === "object" && ref !== null) {
-            ref.current = el;
-        }
-        else if (typeof ref === "function") {
-            ref(el);
-        }
-    };
-    useEffect(function () {
-        if (internalRef.current) {
-            internalRef.current.indeterminate = indeterminate;
-        }
-    }, [indeterminate, checked]);
-    var tickSize = {
-        s: { width: 14, height: 11 },
-        m: { width: 18, height: 14 }
-    };
-    var idLabel = "".concat(id, "-label");
-    var checkedProps = {};
-    if (typeof onChange === "function") {
-        checkedProps.checked = checked;
-    }
-    else if (checked && !onChange) {
-        checkedProps.defaultChecked = true;
-    }
-    if (!checked && onChange) {
-        indeterminate = false;
-    }
-    if (requirementStatus === "required") {
-        isRequired = true;
-    }
-    return (React__default.createElement("div", { className: classNames({
-            "arc-Checkbox": true,
-            "arc-Checkbox--disabled": isDisabled,
-            "arc-Checkbox--invalid": errorMessage,
-            "arc-Checkbox--small": size === "s",
-            "arc-Checkbox--onDarkSurface": surface === "dark"
-        }) },
-        React__default.createElement("label", { id: idLabel, htmlFor: id, className: classNames("arc-Checkbox-label", {
-                "arc-Checkbox-label--top": checkboxAlignment === "top"
-            }) },
-            React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", "aria-checked": checked && !indeterminate
-                    ? "true"
-                    : indeterminate && checked
-                        ? "mixed"
-                        : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: synchronizeRefs, required: isRequired, type: "checkbox", value: value }, filterAttrs(props))),
-            React__default.createElement("span", { className: "arc-Checkbox-box" }, indeterminate ? (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none" },
-                React__default.createElement("rect", { x: "4", y: "8", width: "7.51", height: "1", rx: "0.5", fill: "currentColor" }))) : (React__default.createElement("svg", { style: tickSize[size], viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                React__default.createElement("path", { d: "M5.99459 14L0.350576 8.23277C0.126079 8.00285 0 7.69132 0 7.36653C0 7.04173 0.126079 6.7302 0.350576 6.50028C0.578979 6.27752 0.88258 6.15324 1.19832 6.15324C1.51405 6.15324 1.81765 6.27752 2.04606 6.50028L5.99459 10.535L15.9385 0.374054C16.0491 0.25703 16.1814 0.163688 16.3277 0.0994738C16.474 0.0352599 16.6313 0.00145997 16.7905 4.626e-05C16.9497 -0.00136745 17.1076 0.0296342 17.255 0.0912406C17.4023 0.152847 17.5362 0.243825 17.6488 0.358867C17.7614 0.473908 17.8504 0.610709 17.9107 0.761287C17.971 0.911865 18.0013 1.0732 18 1.23589C17.9986 1.39858 17.9655 1.55936 17.9026 1.70884C17.8398 1.85833 17.7485 1.99352 17.6339 2.10655L5.99459 14Z", fill: "currentColor" })))),
-            React__default.createElement("span", __assign({}, (checkboxAlignment === "top" && {
-                className: "arc-Checkbox-content--marginTop"
-            })), hideLabel ? (React__default.createElement(VisuallyHidden, null,
-                label,
-                !isRequired && requirementStatus !== "optional" ? (React__default.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
-                helper && (React__default.createElement("span", { className: "arc-Checkbox-helper" }, helper)))) : (React__default.createElement(React__default.Fragment, null,
-                label,
-                !isRequired && requirementStatus !== "optional" ? (React__default.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
-                helper && (React__default.createElement("span", { className: "arc-Checkbox-helper" }, helper)))))),
-        errorMessage && (React__default.createElement("div", { id: idError, className: "arc-Checkbox-error" },
-            React__default.createElement("span", { className: "arc-Checkbox-error--icon" },
-                React__default.createElement(ThemeIcon, { icon: "checkboxError" })),
-            errorMessage))));
-});
-
-export { Checkbox as C };

package/dist/_shared/esm/Columns-3lnyGVbo.js

@@ -1,42 +0,0 @@
-import { _ as __rest, a as __assign, f as filterAttrs, s as suffixModifier } from './index-DMMRfg3O.js';
-import { c as classNames } from './index-5C0-U8cc.js';
-import React__default from '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 = __rest(_a, ["children", "isGutterless"]);
-    return (React__default.createElement("div", __assign({ className: classNames({
-            "arc-Columns": true,
-            "arc-Columns--gutterless": isGutterless
-        }) }, filterAttrs(props)),
-        React__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 = __rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
-    return (React__default.createElement("div", __assign({ className: classNames((_b = {},
-            _b["arc-Columns-col"] = true,
-            _b[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)) }, filterAttrs(props)), children));
-};
-Columns.Col = Col;
-
-export { Columns as C };

package/dist/_shared/esm/ComboBox-BoNNJ010.js

@@ -1,288 +0,0 @@
-import { c as __spreadArray, a as __assign, _ as __rest, f as filterAttrs } from './index-DMMRfg3O.js';
-import { R as Root2, A as Anchor2, P as Portal, C as Content2 } from './index-65dylwyZ.js';
-import React__default, { forwardRef, useId, useRef, useReducer } from 'react';
-import { c as classNames } from './index-5C0-U8cc.js';
-import { u as useAriaDescribedby, F as FormControl } from './FormControl-Dx4vj08j.js';
-import { u as useThemeElement } from './index-_nBH8-GT.js';
-import { B as Box } from './Box-DTTKhpiV.js';
-import { I as Icon } from './Icon-PQa1SRbJ.js';
-import { T as ThemeIcon } from './ThemeIcon-a0WvZRNE.js';
-
-const BtIconChevronDown2Px = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.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 filterOptions = function (options, value) {
-    return options.filter(function (option) {
-        return value ? option.toLowerCase().includes(value.toLowerCase()) : true;
-    });
-};
-var getSelectedOptions = function (option, selectedOptions) {
-    return selectedOptions.indexOf(option) !== -1
-        ? selectedOptions.filter(function (selectedOption) { return selectedOption !== option; })
-        : __spreadArray(__spreadArray([], selectedOptions, true), [option], false);
-};
-var findOptionIndex = function (options, searchOption) {
-    return options.findIndex(function (option) { return option === searchOption; });
-};
-var isSelected = function (option, selectedOptions) {
-    return selectedOptions.some(function (selectedOption) { return option === selectedOption; });
-};
-
-var reducer = function (initialOptions) {
-    return function (state, action) {
-        switch (action.type) {
-            case "OPEN": {
-                var isMultiSelectable = action.payload.isMultiSelectable;
-                var selectedOptions = state.selectedOptions, options = state.options;
-                return __assign(__assign({}, state), { isExpanded: true, highlightedOptionIndex: isMultiSelectable && selectedOptions.length
-                        ? findOptionIndex(options, selectedOptions[selectedOptions.length - 1])
-                        : 0 });
-            }
-            case "CLOSE": {
-                return __assign(__assign({}, state), { isExpanded: false, highlightedOptionIndex: 0 });
-            }
-            case "INPUT_CHANGE": {
-                var _a = action.payload, value = _a.value, isAutocomplete = _a.isAutocomplete;
-                return __assign(__assign({}, state), { value: value, options: isAutocomplete
-                        ? filterOptions(initialOptions, value)
-                        : state.options, highlightedOptionIndex: 0, isExpanded: true });
-            }
-            case "SINGLE_SELECT": {
-                var _b = action.payload, selectedOption = _b.option, isAutocomplete = _b.isAutocomplete;
-                return __assign(__assign({}, state), { isExpanded: false, options: isAutocomplete
-                        ? filterOptions(initialOptions, selectedOption)
-                        : state.options, value: selectedOption });
-            }
-            case "MULTI_SELECT": {
-                var selectedOption = action.payload.option;
-                var selectedOptions = state.selectedOptions, options = state.options;
-                var newSelectedOptions = getSelectedOptions(selectedOption, selectedOptions);
-                return __assign(__assign({}, state), { value: "", options: initialOptions, highlightedOptionIndex: findOptionIndex(options, selectedOption), selectedOptions: newSelectedOptions });
-            }
-            case "MULTI_SELECT_REMOVE": {
-                var option_1 = action.payload.option;
-                var selectedOptions = state.selectedOptions;
-                return __assign(__assign({}, state), { selectedOptions: selectedOptions.filter(function (selectedOption) { return option_1 !== selectedOption; }) });
-            }
-            case "KEYDOWN": {
-                var _c = action.payload, key = _c.key, isAutocomplete = _c.isAutocomplete, isMultiSelectable = _c.isMultiSelectable;
-                var isExpanded = state.isExpanded, highlightedOptionIndex = state.highlightedOptionIndex, options = state.options, selectedOptions = state.selectedOptions;
-                if (key === "Escape" && isExpanded) {
-                    return __assign(__assign({}, state), { isExpanded: false, highlightedOptionIndex: 0 });
-                }
-                if (key === "ArrowDown" && isExpanded) {
-                    return __assign(__assign({}, state), { highlightedOptionIndex: highlightedOptionIndex === options.length - 1
-                            ? 0
-                            : highlightedOptionIndex + 1 });
-                }
-                if (key === "ArrowUp" && isExpanded) {
-                    return __assign(__assign({}, state), { highlightedOptionIndex: highlightedOptionIndex === 0
-                            ? options.length - 1
-                            : highlightedOptionIndex - 1 });
-                }
-                if (key === "ArrowDown" && !isExpanded) {
-                    return __assign(__assign({}, state), { isExpanded: true, highlightedOptionIndex: isMultiSelectable && selectedOptions.length
-                            ? findOptionIndex(options, selectedOptions[selectedOptions.length - 1])
-                            : 0 });
-                }
-                if (key === "ArrowUp" && !isExpanded) {
-                    return __assign(__assign({}, state), { isExpanded: true, highlightedOptionIndex: isMultiSelectable && selectedOptions.length
-                            ? findOptionIndex(options, selectedOptions[selectedOptions.length - 1])
-                            : options.length - 1 });
-                }
-                if (key === "Enter" && isExpanded) {
-                    if (isMultiSelectable) {
-                        var newSelectedOptionIds = getSelectedOptions(options[highlightedOptionIndex], selectedOptions);
-                        return __assign(__assign({}, state), { value: "", options: initialOptions, selectedOptions: newSelectedOptionIds });
-                    }
-                    else {
-                        return __assign(__assign({}, state), { isExpanded: false, options: isAutocomplete
-                                ? filterOptions(initialOptions, options[highlightedOptionIndex])
-                                : options, value: options[highlightedOptionIndex] });
-                    }
-                }
-                return state;
-            }
-            default:
-                return state;
-        }
-    };
-};
-
-var ComboBox = forwardRef(function (_a, ref) {
-    var name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, label = _a.label, helper = _a.helper, id = _a.id, initialOptions = _a.options, hideLabel = _a.hideLabel, isFluid = _a.isFluid, errorMessage = _a.errorMessage, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, listBoxAriaLabel = _a.listBoxAriaLabel, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.isMultiSelectable, isMultiSelectable = _d === void 0 ? false : _d, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.isAutocomplete, isAutocomplete = _g === void 0 ? false : _g, props = __rest(_a, ["name", "onBlur", "onFocus", "label", "helper", "id", "options", "hideLabel", "isFluid", "errorMessage", "disclosureTitle", "disclosureText", "onClickDisclosure", "listBoxAriaLabel", "defaultValue", "labelSize", "isMultiSelectable", "isDisabled", "isRequired", "isAutocomplete"]);
-    var listBoxId = useId();
-    var listItemRefs = useRef([]);
-    var containerRef = useRef(null);
-    var inputRef = useRef(null);
-    var _h = useThemeElement(), themeElement = _h[0], setThemeElement = _h[1];
-    var _j = useReducer(reducer(initialOptions), {
-        isExpanded: false,
-        value: defaultValue,
-        options: initialOptions,
-        highlightedOptionIndex: 0,
-        selectedOptions: []
-    }), _k = _j[0], isExpanded = _k.isExpanded, value = _k.value, options = _k.options, highlightedOptionIndex = _k.highlightedOptionIndex, selectedOptions = _k.selectedOptions, dispatch = _j[1];
-    var ariaDescribedby = useAriaDescribedby({
-        errorMessage: errorMessage,
-        id: id,
-        helper: helper,
-        disclosureText: disclosureText
-    }).ariaDescribedby;
-    var getTextInputRef = function (elementRef) {
-        inputRef.current = elementRef;
-        if (ref && typeof ref === "object") {
-            ref.current = elementRef;
-        }
-        if (ref && typeof ref === "function") {
-            ref(elementRef);
-        }
-    };
-    var setScrollPosition = function (listEl) {
-        var listItemEl = listItemRefs.current[highlightedOptionIndex];
-        if (listItemEl && listEl) {
-            var selectedOptionIsBelowOverFlow = listItemEl.offsetTop + listItemEl.offsetHeight >
-                listEl.offsetHeight + listEl.scrollTop;
-            var selectedOptionIsAboveOverFlow = listItemEl.offsetTop < listEl.scrollTop;
-            if (selectedOptionIsBelowOverFlow) {
-                listEl.scrollTop =
-                    listItemEl.offsetTop +
-                        listItemEl.offsetHeight -
-                        listEl.offsetHeight;
-            }
-            if (selectedOptionIsAboveOverFlow) {
-                listEl.scrollTop = listItemEl.offsetTop;
-            }
-        }
-    };
-    var onItemClick = function (itemOption) {
-        return function (e) {
-            var _a;
-            e.preventDefault();
-            if (isMultiSelectable) {
-                dispatch({
-                    type: "MULTI_SELECT",
-                    payload: {
-                        option: itemOption
-                    }
-                });
-            }
-            else {
-                dispatch({
-                    type: "SINGLE_SELECT",
-                    payload: {
-                        isAutocomplete: isAutocomplete,
-                        option: itemOption
-                    }
-                });
-            }
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        };
-    };
-    var onInputChange = function (e) {
-        dispatch({
-            type: "INPUT_CHANGE",
-            payload: {
-                isAutocomplete: isAutocomplete,
-                value: e.target.value
-            }
-        });
-    };
-    var onInputClick = function () {
-        isAutocomplete &&
-            dispatch({
-                type: "OPEN",
-                payload: {
-                    isMultiSelectable: isMultiSelectable
-                }
-            });
-    };
-    var onInteractOutside = function (e) {
-        if (containerRef.current &&
-            !containerRef.current.contains(e.currentTarget)) {
-            dispatch({
-                type: "CLOSE"
-            });
-        }
-    };
-    var onInputKeyDown = function (e) {
-        dispatch({
-            type: "KEYDOWN",
-            payload: {
-                key: e.key,
-                isAutocomplete: isAutocomplete,
-                isMultiSelectable: isMultiSelectable
-            }
-        });
-    };
-    var onMultiSelectRemove = function (option) { return function (e) {
-        var _a;
-        e.preventDefault();
-        e.stopPropagation();
-        dispatch({
-            type: "MULTI_SELECT_REMOVE",
-            payload: {
-                option: option
-            }
-        });
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }; };
-    var onOpenAutoFocus = function (e) {
-        var _a;
-        e.preventDefault();
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    return (React__default.createElement("div", { ref: setThemeElement, className: classNames("arc-ComboBox", {
-            "arc-ComboBox--constrained": !isFluid
-        }) },
-        React__default.createElement("div", { ref: containerRef },
-            React__default.createElement(Root2, { open: isExpanded },
-                React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
-                    React__default.createElement("div", { onClick: onInputClick, className: classNames("arc-ComboBox-container", {
-                            "arc-ComboBox-container--cursor": isAutocomplete
-                        }) },
-                        React__default.createElement("div", { className: classNames("arc-ComboBox-inputWrapper", {
-                                "arc-ComboBox-inputWrapper--multiSelect": isMultiSelectable
-                            }) },
-                            selectedOptions.length > 0 &&
-                                selectedOptions.map(function (option, i) { return (React__default.createElement("div", { className: "arc-ComboBox-tag", key: "".concat(listBoxId, "-selectedOption-").concat(i) },
-                                    React__default.createElement("span", null, option),
-                                    React__default.createElement("button", { className: "arc-ComboBox-tagButton", "aria-label": "".concat(option, ", press space or enter to remove"), onClick: onMultiSelectRemove(option) },
-                                        React__default.createElement(ThemeIcon, { icon: "tagRemove", color: "brand", size: 20 })))); }),
-                            React__default.createElement("input", __assign({ className: "arc-ComboBox-input", ref: getTextInputRef, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", type: "text", role: "combobox", autoComplete: "off", "aria-autocomplete": "list", "aria-controls": listBoxId, "aria-expanded": isExpanded, "aria-activedescendant": highlightedOptionIndex
-                                    ? "".concat(listBoxId, "-").concat(highlightedOptionIndex)
-                                    : undefined, id: id, name: name, onFocus: onFocus, onBlur: onBlur, onChange: onInputChange, onKeyDown: onInputKeyDown, disabled: isDisabled, required: isRequired, value: value }, filterAttrs(props)))),
-                        isAutocomplete && (React__default.createElement("div", { className: classNames("arc-ComboBox-inputIcon", {
-                                "arc-ComboBox-inputIcon--expanded": isExpanded
-                            }) },
-                            React__default.createElement(Icon, { isPresentationIcon: true, icon: BtIconChevronDown2Px, size: 24 }))))),
-                React__default.createElement(Anchor2, null),
-                React__default.createElement(Portal, { container: themeElement },
-                    React__default.createElement(Content2, { align: "start", sideOffset: 5, onInteractOutside: onInteractOutside, onOpenAutoFocus: onOpenAutoFocus },
-                        React__default.createElement("div", { className: "arc-ComboBox-listboxContainer" },
-                            React__default.createElement(Box, { elevationLevel: "1" },
-                                React__default.createElement("ul", { ref: setScrollPosition, id: listBoxId, className: "arc-ComboBox-list", role: "listbox", "aria-label": listBoxAriaLabel, "aria-multiselectable": isMultiSelectable }, options.length ? (options.map(function (option, i) { return (React__default.createElement("li", { id: "".concat(listBoxId, "-").concat(i), ref: function (el) { return (listItemRefs.current[i] = el); }, key: option, className: classNames("arc-ComboBox-listItem", {
-                                        "arc-ComboBox-listItem--highlighted": i === highlightedOptionIndex
-                                    }), onMouseDown: onItemClick(option), role: "option", "aria-selected": isSelected(option, selectedOptions) },
-                                    React__default.createElement("div", { className: "arc-ComboBox-listItemText" }, option),
-                                    React__default.createElement("div", { className: classNames("arc-ComboBox-listItemIcon", {
-                                            "arc-ComboBox-listItemIcon--visible": isSelected(option, selectedOptions)
-                                        }) },
-                                        React__default.createElement(ThemeIcon, { size: 20, icon: "selectIndicator" })))); })) : (React__default.createElement("li", { className: "arc-ComboBox-listItem", role: "option", "aria-selected": false, "aria-disabled": true }, "No matches found")))))))))));
-});
-
-export { ComboBox as C };