@arc-ui/components 12.0.0-alpha.0 → 12.0.0-beta.11

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

@@ -0,0 +1,73 @@
+import React__default from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+import { B as BtIconArrowRight } from './BtIconArrowRight.esm-93da96bb.js';
+import { B as BtIconPlayFill } from './BtIconPlayFill.esm-05fc0344.js';
+import { I as Icon } from './Icon-21868dfc.js';
+import { i as isDate, f as format } from './index-ce6dee84.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-befd1ace.js

@@ -0,0 +1,10 @@
+import { a as __assign, f as filterDataAttrs } from './index.es-dce6c01d.js';
+import React__default from 'react';
+import { H as Heading } from './Heading-3427a6f3.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 }, filterDataAttrs(linkData)), heading)) : (heading)));
+};
+
+export { CardHeading as C };

package/dist/_shared/esm/Checkbox-72a24e02.js

@@ -0,0 +1,86 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-dce6c01d.js';
+import React__default, { forwardRef, useContext, useRef, useEffect } from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+import { C as Context, u as useAriaDescribedby } from './FormControl-496f7c47.js';
+import { C as Context$1 } from './Surface-a19b8f20.js';
+import { T as ThemeIcon } from './ThemeIcon-933104d6.js';
+import { V as VisuallyHidden } from './VisuallyHidden-ecde5867.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 }, filterDataAttrs(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-d96b7425.js → Columns-119dc33d.js}

@@ -1,20 +1,12 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs, s as suffixModifier } from './index.es-dce6c01d.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import React__default, { useEffect } from 'react';
-import { s as suffixModifier } from './suffix-modifier-3d548e45.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"]);
-    useEffect(function () {
-        React__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.createElement("div", __assign({ className: classNames({
             "arc-Columns": true,
             "arc-Columns--gutterless": isGutterless

package/dist/_shared/esm/ConditionalWrapper-b85979de.js

@@ -0,0 +1,8 @@
+import React__default from 'react';
+
+var ConditionalWrapper = function (_a) {
+    var condition = _a.condition, wrapper = _a.wrapper, fallback = _a.fallback, children = _a.children;
+    return (React__default.createElement(React__default.Fragment, null, condition ? wrapper(children) : fallback ? fallback(children) : children));
+};
+
+export { ConditionalWrapper as C };

package/dist/_shared/esm/ContentSwitcher-1fe3fef1.js

@@ -0,0 +1,93 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-dce6c01d.js';
+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-b051f161.js';
+import { T as Text } from './Text-65f0a980.js';
+import { c as classNames } from './index-2e73c2e9.js';
+
+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 }, filterDataAttrs(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 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 handleScroll = function () {
+        checkOverflow();
+    };
+    useEffect(function () {
+        requestAnimationFrame(checkOverflow);
+        var list = listRef.current;
+        if (list) {
+            list.addEventListener("scroll", handleScroll);
+        }
+        return function () {
+            if (list) {
+                list.removeEventListener("scroll", handleScroll);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    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 }, filterDataAttrs(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" },
+            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 }, filterDataAttrs(props)), children)));
+};
+ContentSwitcher.Tab = ContentSwitcherTab;
+ContentSwitcher.List = ContentSwitcherList;
+ContentSwitcher.Content = ContentSwitcherContent;
+
+export { ContentSwitcher as C };

package/dist/_shared/esm/ContentSwitcherDropdown-a57303d9.js

@@ -0,0 +1,58 @@
+import { _ as __rest, g as getTextWidth, a as __assign, f as filterDataAttrs } from './index.es-dce6c01d.js';
+import React__default, { useState, isValidElement } from 'react';
+import { $ as $cc7e05a45900e73f$export$be92b6f5f03c0fe9, a as $cc7e05a45900e73f$export$41fb9f06171c75f4, b as $cc7e05a45900e73f$export$4c8d1a57a761ef94, c as $cc7e05a45900e73f$export$f04a61298a47a40f, d as $cc7e05a45900e73f$export$602eac185826482c, e as $cc7e05a45900e73f$export$7c6e2c02157bb7d2, f as $cc7e05a45900e73f$export$2f60d3ec9ad468f2, g as $cc7e05a45900e73f$export$d5c6c08dc2d3ca7, h as $cc7e05a45900e73f$export$6d08773d2e66f8f2, i as $cc7e05a45900e73f$export$d6e5bf9c43ea9319, j as $cc7e05a45900e73f$export$c3468e2714d175fa, k as $cc7e05a45900e73f$export$bf1aedc3039c8d63 } from './index-fd573342.js';
+import { T as ThemeIcon } from './ThemeIcon-933104d6.js';
+import { u as useThemeElement } from './index-77f860f1.js';
+import { c as classNames } from './index-2e73c2e9.js';
+
+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($cc7e05a45900e73f$export$be92b6f5f03c0fe9, { 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
+                }
+            }), filterDataAttrs(props)),
+                React__default.createElement($cc7e05a45900e73f$export$41fb9f06171c75f4, { className: "arc-ContentSwitcherDropdown-selectTrigger", "aria-label": ariaLabel },
+                    React__default.createElement($cc7e05a45900e73f$export$4c8d1a57a761ef94, null),
+                    React__default.createElement($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "arc-ContentSwitcherDropdown-selectTriggerIcon" },
+                        React__default.createElement(ThemeIcon, { size: 24, icon: "selectTrigger" })))),
+            React__default.createElement($cc7e05a45900e73f$export$602eac185826482c, { container: themeElement },
+                React__default.createElement($cc7e05a45900e73f$export$7c6e2c02157bb7d2, { className: "arc-ContentSwitcherDropdown-selectContent", sideOffset: 8, position: "popper" },
+                    React__default.createElement($cc7e05a45900e73f$export$2f60d3ec9ad468f2, null),
+                    React__default.createElement($cc7e05a45900e73f$export$d5c6c08dc2d3ca7, null, tabs.map(function (item, index) { return (React__default.createElement($cc7e05a45900e73f$export$6d08773d2e66f8f2, { value: item.value, key: index, className: "arc-ContentSwitcherDropdown-selectItem", id: "arc-content-switcher-dropdown-trigger-".concat(item.value) },
+                        React__default.createElement($cc7e05a45900e73f$export$d6e5bf9c43ea9319, null, item.label),
+                        React__default.createElement($cc7e05a45900e73f$export$c3468e2714d175fa, null,
+                            React__default.createElement(ThemeIcon, { size: 24, icon: "selectIndicator" })))); })),
+                    React__default.createElement($cc7e05a45900e73f$export$bf1aedc3039c8d63, 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 }, filterDataAttrs(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 };