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

package/lib/_shared/esm/ComboBox-Cww79__R.mjs

@@ -0,0 +1,288 @@
+import { b as __spreadArray, a as __assign, _ as __rest, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import React__default, { forwardRef, useId, useRef, useReducer } from 'react';
+import { R as Root2, A as Anchor2, P as Portal, C as Content2 } from './index-sjWSIoCo.mjs';
+import { c as classNames } from './index-5C0-U8cc.mjs';
+import { u as useAriaDescribedby, F as FormControl } from './FormControl-B9fp1ilz.mjs';
+import { u as useThemeElement } from './index-DKUZMeu5.mjs';
+import { B as Box } from './Box-BYm_GTct.mjs';
+import { I as Icon } from './Icon-B626JGP1.mjs';
+import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
+
+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 };

package/lib/_shared/esm/ContentSwitcher-CWxxoWTA.mjs

@@ -0,0 +1,103 @@
+import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
+import { $ as $69cb30bb0017df05$export$41fb9f06171c75f4, a as $69cb30bb0017df05$export$7c6e2c02157bb7d2, b as $69cb30bb0017df05$export$54c2e3dc7acea9f5, c as $69cb30bb0017df05$export$be92b6f5f03c0fe9 } from './index-CVbKsmi-.mjs';
+import { T as Text } from './Text-CBlnm5CT.mjs';
+import { d as debounce } from './debounce-mCD9-ufA.mjs';
+import { c as classNames } from './index-5C0-U8cc.mjs';
+
+var ContentSwitcherTab = forwardRef(function (_a, ref) {
+    var label = _a.label, value = _a.value, onClick = _a.onClick, props = __rest(_a, ["label", "value", "onClick"]);
+    return (React__default.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, __assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick }, filterAttrs(props)),
+        React__default.createElement(Text, { size: "m" }, label)));
+});
+
+var ContentSwitcherContent = function (_a) {
+    var children = _a.children, value = _a.value;
+    return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-ContentSwitcherContent", value: value }, children));
+};
+
+var ContentSwitcherList = function (_a) {
+    var children = _a.children, type = _a.type, isJustified = _a.isJustified, ariaLabel = _a.ariaLabel, isInset = _a.isInset, props = __rest(_a, ["children", "type", "isJustified", "ariaLabel", "isInset"]);
+    var _b = useState(false), rightOverflow = _b[0], setRightOverflow = _b[1];
+    var _c = useState(false), leftOverflow = _c[0], setLeftOverflow = _c[1];
+    var _d = useState(0), contentSwitcherListWidth = _d[0], setContentSwitcherListWidth = _d[1];
+    var tabRefs = useRef([]);
+    var listRef = useRef(null);
+    var checkOverflow = function () {
+        if (listRef.current) {
+            setRightOverflow(listRef.current.scrollLeft + listRef.current.clientWidth <
+                listRef.current.scrollWidth - 1);
+            setLeftOverflow(listRef.current.scrollLeft > 0);
+        }
+    };
+    var scrollTabIntoView = function (tabRef) {
+        if (tabRef.current && listRef.current) {
+            var scrollLeft = tabRef.current.offsetLeft -
+                listRef.current.clientWidth / 2 +
+                tabRef.current.clientWidth / 2;
+            listRef.current.scrollTo({
+                left: scrollLeft,
+                behavior: "smooth",
+            });
+        }
+    };
+    var handleResize = debounce(function () {
+        if (listRef.current) {
+            setContentSwitcherListWidth(listRef.current.clientWidth);
+        }
+    }, 100);
+    useEffect(function () {
+        var list = listRef.current;
+        var updateLayout = function () {
+            checkOverflow();
+            handleResize();
+        };
+        // Initial check on mount
+        updateLayout();
+        if (list) {
+            list.addEventListener("scroll", checkOverflow);
+            window.addEventListener("resize", updateLayout);
+        }
+        return function () {
+            if (list) {
+                list.removeEventListener("scroll", checkOverflow);
+            }
+            window.removeEventListener("resize", updateLayout);
+        };
+    }, [children, checkOverflow, handleResize]);
+    return (React__default.createElement("span", { className: classNames("arc-ContentSwitcherList-wrapper", {
+            "arc-ContentSwitcherList-wrapper--isInset": isInset,
+        }) },
+        React__default.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, __assign({ className: classNames("arc-ContentSwitcherList", {
+                "arc-ContentSwitcherList--contained": type === "contained",
+                "arc-ContentSwitcherList--isJustified": isJustified,
+            }), ref: listRef, "aria-label": ariaLabel }, filterAttrs(props)),
+            React__default.createElement("div", { className: "arc-ContentSwitcherList-inner" }, React__default.Children.map(children, function (child, index) {
+                if (tabRefs) {
+                    return React__default.cloneElement(child, {
+                        ref: function (el) { return (tabRefs.current[index] = el); },
+                        onClick: function () {
+                            return scrollTabIntoView({ current: tabRefs.current[index] });
+                        },
+                    });
+                }
+                else {
+                    return null;
+                }
+            }))),
+        React__default.createElement("span", { className: "arc-ContentSwitcherList-overflowWrapper", style: { width: contentSwitcherListWidth } },
+            leftOverflow && (React__default.createElement("div", { className: "arc-ContentSwitcherList--leftOverflow", "data-testid": "arc-ContentSwitcherList--leftOverflow" })),
+            rightOverflow && (React__default.createElement("div", { className: "arc-ContentSwitcherList--rightOverflow", "data-testid": "arc-ContentSwitcherList--rightOverflow" })))));
+};
+
+/** Use `ContentSwitcher` to allow users to navigate between different sections of relevant content. */
+var ContentSwitcher = function (_a) {
+    var children = _a.children, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, activationMode = _a.activationMode, value = _a.value, props = __rest(_a, ["children", "defaultValue", "onValueChange", "activationMode", "value"]);
+    return (React__default.createElement("span", { className: "arc-ContentSwitcher" },
+        React__default.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, __assign({ className: "arc-ContentSwitcher-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode, value: value }, filterAttrs(props)), children)));
+};
+ContentSwitcher.Tab = ContentSwitcherTab;
+ContentSwitcher.List = ContentSwitcherList;
+ContentSwitcher.Content = ContentSwitcherContent;
+
+export { ContentSwitcher as C, ContentSwitcherTab as a, ContentSwitcherList as b, ContentSwitcherContent as c };

package/lib/_shared/esm/ContentSwitcherDropdown-CSsewSNR.mjs

@@ -0,0 +1,69 @@
+import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import React__default, { useState, isValidElement } from 'react';
+import { c as classNames } from './index-5C0-U8cc.mjs';
+import { R as Root2, T as Trigger, V as Value, I as Icon, P as Portal, C as Content2, S as ScrollUpButton, a as Viewport, b as Item, c as ItemText, d as ItemIndicator, e as ScrollDownButton } from './index-uZWnqtCw.mjs';
+import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
+import { u as useThemeElement } from './index-DKUZMeu5.mjs';
+
+// src/get-text-width/get-text-width.ts
+var getTextWidth = (text, font) => {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (context) {
+    context.font = getComputedStyle(document.body).font;
+    return context.measureText(text).width;
+  }
+  return 0;
+};
+
+var ContentSwitcherDropdown = function (_a) {
+    var defaultValue = _a.defaultValue, tabs = _a.tabs, onValueChange = _a.onValueChange, children = _a.children, _b = _a.isInset, isInset = _b === void 0 ? false : _b, value = _a.value, ariaLabel = _a.ariaLabel, _c = _a.isFluid, isFluid = _c === void 0 ? false : _c, width = _a.width, props = __rest(_a, ["defaultValue", "tabs", "onValueChange", "children", "isInset", "value", "ariaLabel", "isFluid", "width"]);
+    var initialValue = defaultValue || tabs[0].value;
+    var _d = useThemeElement(), themeElement = _d[0], setThemeElement = _d[1];
+    var _e = useState(initialValue), uncontrolledValue = _e[0], setUncontrolledValue = _e[1];
+    var isControlled = typeof value !== "undefined";
+    var selectValue = isControlled ? value : uncontrolledValue;
+    var onValueChangeHandler = function (value) {
+        onValueChange && onValueChange(value);
+        setUncontrolledValue(value);
+    };
+    var LongestLabelWidth = getTextWidth(tabs.reduce(function (longest, current) {
+        return current.label.length > longest.length ? current.label : longest;
+    }, ""));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Root2, { defaultValue: defaultValue, onValueChange: onValueChangeHandler, value: selectValue },
+            React__default.createElement("span", __assign({ className: classNames("arc-ContentSwitcherDropdown-selectTriggerWrapper", {
+                    "arc-ContentSwitcherDropdown-selectTriggerWrapper--isInset": isInset,
+                    "arc-ContentSwitcherDropdown-selectTriggerWrapper--isFluid": isFluid,
+                }), ref: setThemeElement }, (!isFluid && {
+                style: {
+                    width: width ? width : LongestLabelWidth + 84,
+                },
+            }), filterAttrs(props)),
+                React__default.createElement(Trigger, { className: "arc-ContentSwitcherDropdown-selectTrigger", "aria-label": ariaLabel },
+                    React__default.createElement(Value, null),
+                    React__default.createElement(Icon, { className: "arc-ContentSwitcherDropdown-selectTriggerIcon" },
+                        React__default.createElement(ThemeIcon, { size: 24, icon: "selectTrigger" })))),
+            React__default.createElement(Portal, { container: themeElement },
+                React__default.createElement(Content2, { className: "arc-ContentSwitcherDropdown-selectContent", sideOffset: 8, position: "popper" },
+                    React__default.createElement(ScrollUpButton, null),
+                    React__default.createElement(Viewport, null, tabs.map(function (item, index) { return (React__default.createElement(Item, { value: item.value, key: index, className: "arc-ContentSwitcherDropdown-selectItem", id: "arc-content-switcher-dropdown-trigger-".concat(item.value) },
+                        React__default.createElement(ItemText, null, item.label),
+                        React__default.createElement(ItemIndicator, null,
+                            React__default.createElement(ThemeIcon, { size: 24, icon: "selectIndicator" })))); })),
+                    React__default.createElement(ScrollDownButton, null)))),
+        React__default.Children.map(children, function (child) {
+            if (!isValidElement(child)) {
+                return null;
+            }
+            var isActive = child.props.value === selectValue;
+            return (React__default.createElement("div", __assign({ role: "tabpanel", className: "arc-ContentSwitcherDropdown-content", id: "arc-content-switcher-dropdown-content-".concat(child.props.value), "aria-labelledby": "arc-content-switcher-dropdown-trigger-".concat(child.props.value), "data-state": isActive ? "active" : "inactive", tabIndex: 0, hidden: !isActive }, filterAttrs(child.props)), child));
+        })));
+};
+var ContentSwitcherDropdownContent = function (_a) {
+    var children = _a.children;
+    return React__default.createElement(React__default.Fragment, null, children);
+};
+ContentSwitcherDropdown.Content = ContentSwitcherDropdownContent;
+
+export { ContentSwitcherDropdown as C };