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

package/dist/_shared/esm/{index-3147c5b0.js → index-13458236.js}

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { h as $9f79659886946c16$export$e5c5a5f917a5871c } from './index-87a828b8.js';
+import { useContext, createContext } from 'react';
+import { g as $9f79659886946c16$export$e5c5a5f917a5871c } from './index-7f23bb37.js';
 
 const $1746a345f3d73bb7$var$useReactId = React['useId'.toString()] || (()=>undefined
 );
@@ -15,4 +16,10 @@ function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
     return deterministicId || (id ? `radix-${id}` : '');
 }
 
-export { $1746a345f3d73bb7$export$f680877a34711e37 as $ };
+const $f631663db3294ace$var$DirectionContext = /*#__PURE__*/ createContext(undefined);
+/* -----------------------------------------------------------------------------------------------*/ function $f631663db3294ace$export$b39126d51d94e6f3(localDir) {
+    const globalDir = useContext($f631663db3294ace$var$DirectionContext);
+    return localDir || globalDir || 'ltr';
+}
+
+export { $1746a345f3d73bb7$export$f680877a34711e37 as $, $f631663db3294ace$export$b39126d51d94e6f3 as a };

package/dist/_shared/esm/{index-65264b4e.js → index-2403936c.js}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { c as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, f as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from './index-87a828b8.js';
+import { $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, c as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, h as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from './index-7f23bb37.js';
 
 // We have resorted to returning slots directly rather than exposing primitives that can then
 // be slotted like `<CollectionItem as={Slot}>…</CollectionItem>`.

package/dist/_shared/esm/index-6bdce6c5.js

@@ -0,0 +1,69 @@
+import { useState, useRef, useMemo } from 'react';
+import { g as $9f79659886946c16$export$e5c5a5f917a5871c } from './index-7f23bb37.js';
+
+function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
+    const [size, setSize] = useState(undefined);
+    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        if (element) {
+            // provide size as early as possible
+            setSize({
+                width: element.offsetWidth,
+                height: element.offsetHeight
+            });
+            const resizeObserver = new ResizeObserver((entries)=>{
+                if (!Array.isArray(entries)) return;
+                 // Since we only observe the one element, we don't need to loop over the
+                // array
+                if (!entries.length) return;
+                const entry = entries[0];
+                let width;
+                let height;
+                if ('borderBoxSize' in entry) {
+                    const borderSizeEntry = entry['borderBoxSize']; // iron out differences between browsers
+                    const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+                    width = borderSize['inlineSize'];
+                    height = borderSize['blockSize'];
+                } else {
+                    // for browsers that don't support `borderBoxSize`
+                    // we calculate it ourselves to get the correct border box.
+                    width = element.offsetWidth;
+                    height = element.offsetHeight;
+                }
+                setSize({
+                    width: width,
+                    height: height
+                });
+            });
+            resizeObserver.observe(element, {
+                box: 'border-box'
+            });
+            return ()=>resizeObserver.unobserve(element)
+            ;
+        } else // We only want to reset to `undefined` when the element becomes `null`,
+        // not if it changes to another element.
+        setSize(undefined);
+    }, [
+        element
+    ]);
+    return size;
+}
+
+function $010c2913dbd2fe3d$export$5cae361ad82dce8b(value) {
+    const ref = useRef({
+        value: value,
+        previous: value
+    }); // We compare values before making an update to ensure that
+    // a change has been made. This ensures the previous value is
+    // persisted correctly between renders.
+    return useMemo(()=>{
+        if (ref.current.value !== value) {
+            ref.current.previous = ref.current.value;
+            ref.current.value = value;
+        }
+        return ref.current.previous;
+    }, [
+        value
+    ]);
+}
+
+export { $db6c3485150b8e66$export$1ab7ae714698c4b8 as $, $010c2913dbd2fe3d$export$5cae361ad82dce8b as a };

package/dist/_shared/esm/index-7868cc59.js

@@ -0,0 +1,129 @@
+import { Children, cloneElement, useState, useRef, useEffect, useCallback, useReducer } from 'react';
+import { flushSync } from 'react-dom';
+import { c as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, g as $9f79659886946c16$export$e5c5a5f917a5871c } from './index-7f23bb37.js';
+
+function $fe963b355347cc68$export$3e6543de14f8614f(initialState, machine) {
+    return useReducer((state, event)=>{
+        const nextState = machine[state][event];
+        return nextState !== null && nextState !== void 0 ? nextState : state;
+    }, initialState);
+}
+
+
+const $921a889cee6df7e8$export$99c2b779aa4e8b8b = (props)=>{
+    const { present: present , children: children  } = props;
+    const presence = $921a889cee6df7e8$var$usePresence(present);
+    const child = typeof children === 'function' ? children({
+        present: presence.isPresent
+    }) : Children.only(children);
+    const ref = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(presence.ref, child.ref);
+    const forceMount = typeof children === 'function';
+    return forceMount || presence.isPresent ? /*#__PURE__*/ cloneElement(child, {
+        ref: ref
+    }) : null;
+};
+$921a889cee6df7e8$export$99c2b779aa4e8b8b.displayName = 'Presence';
+/* -------------------------------------------------------------------------------------------------
+ * usePresence
+ * -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$usePresence(present) {
+    const [node1, setNode] = useState();
+    const stylesRef = useRef({});
+    const prevPresentRef = useRef(present);
+    const prevAnimationNameRef = useRef('none');
+    const initialState = present ? 'mounted' : 'unmounted';
+    const [state, send] = $fe963b355347cc68$export$3e6543de14f8614f(initialState, {
+        mounted: {
+            UNMOUNT: 'unmounted',
+            ANIMATION_OUT: 'unmountSuspended'
+        },
+        unmountSuspended: {
+            MOUNT: 'mounted',
+            ANIMATION_END: 'unmounted'
+        },
+        unmounted: {
+            MOUNT: 'mounted'
+        }
+    });
+    useEffect(()=>{
+        const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
+        prevAnimationNameRef.current = state === 'mounted' ? currentAnimationName : 'none';
+    }, [
+        state
+    ]);
+    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        const styles = stylesRef.current;
+        const wasPresent = prevPresentRef.current;
+        const hasPresentChanged = wasPresent !== present;
+        if (hasPresentChanged) {
+            const prevAnimationName = prevAnimationNameRef.current;
+            const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(styles);
+            if (present) send('MOUNT');
+            else if (currentAnimationName === 'none' || (styles === null || styles === void 0 ? void 0 : styles.display) === 'none') // If there is no exit animation or the element is hidden, animations won't run
+            // so we unmount instantly
+            send('UNMOUNT');
+            else {
+                /**
+         * When `present` changes to `false`, we check changes to animation-name to
+         * determine whether an animation has started. We chose this approach (reading
+         * computed styles) because there is no `animationrun` event and `animationstart`
+         * fires after `animation-delay` has expired which would be too late.
+         */ const isAnimating = prevAnimationName !== currentAnimationName;
+                if (wasPresent && isAnimating) send('ANIMATION_OUT');
+                else send('UNMOUNT');
+            }
+            prevPresentRef.current = present;
+        }
+    }, [
+        present,
+        send
+    ]);
+    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        if (node1) {
+            /**
+       * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
+       * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
+       * make sure we only trigger ANIMATION_END for the currently active animation.
+       */ const handleAnimationEnd = (event)=>{
+                const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
+                const isCurrentAnimation = currentAnimationName.includes(event.animationName);
+                if (event.target === node1 && isCurrentAnimation) // With React 18 concurrency this update is applied
+                // a frame after the animation ends, creating a flash of visible content.
+                // By manually flushing we ensure they sync within a frame, removing the flash.
+                flushSync(()=>send('ANIMATION_END')
+                );
+            };
+            const handleAnimationStart = (event)=>{
+                if (event.target === node1) // if animation occurred, store its name as the previous animation.
+                prevAnimationNameRef.current = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
+            };
+            node1.addEventListener('animationstart', handleAnimationStart);
+            node1.addEventListener('animationcancel', handleAnimationEnd);
+            node1.addEventListener('animationend', handleAnimationEnd);
+            return ()=>{
+                node1.removeEventListener('animationstart', handleAnimationStart);
+                node1.removeEventListener('animationcancel', handleAnimationEnd);
+                node1.removeEventListener('animationend', handleAnimationEnd);
+            };
+        } else // Transition to the unmounted state if the node is removed prematurely.
+        // We avoid doing so during cleanup as the node may change but still exist.
+        send('ANIMATION_END');
+    }, [
+        node1,
+        send
+    ]);
+    return {
+        isPresent: [
+            'mounted',
+            'unmountSuspended'
+        ].includes(state),
+        ref: useCallback((node)=>{
+            if (node) stylesRef.current = getComputedStyle(node);
+            setNode(node);
+        }, [])
+    };
+}
+/* -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$getAnimationName(styles) {
+    return (styles === null || styles === void 0 ? void 0 : styles.animationName) || 'none';
+}
+
+export { $921a889cee6df7e8$export$99c2b779aa4e8b8b as $ };

package/dist/_shared/esm/{index.module-50b2c98a.js → index-7f23bb37.js}

@@ -1,7 +1,21 @@
-import { createContext, useMemo, createElement, useContext, useCallback, forwardRef, Children, isValidElement, cloneElement, Fragment, useEffect, useRef, useLayoutEffect, useState } from 'react';
-import { _ as _extends } from './extends-8cc61aad.js';
+import { createContext, useMemo, createElement, useContext, useCallback, forwardRef, Children, isValidElement, cloneElement, Fragment, useLayoutEffect, useEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
 function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEventHandler, { checkForDefaultPrevented: checkForDefaultPrevented = true  } = {}) {
     return function handleEvent(event) {
         originalEventHandler === null || originalEventHandler === void 0 || originalEventHandler(event);
@@ -161,7 +175,7 @@ $5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';
     const { children: children , ...slotProps } = props;
     if (/*#__PURE__*/ isValidElement(children)) return /*#__PURE__*/ cloneElement(children, {
         ...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
-        ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref)
+        ref: forwardedRef ? $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref) : children.ref
     });
     return Children.count(children) > 1 ? Children.only(null) : null;
 });
@@ -205,13 +219,23 @@ function $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
     };
 }
 
+/**
+ * On the server, React emits a warning when calling `useLayoutEffect`.
+ * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
+ * We use this safe version which suppresses the warning by replacing it with a noop on the server.
+ *
+ * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+ */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? useLayoutEffect : ()=>{};
+
 const $8927f6f2acc4f386$var$NODES = [
     'a',
     'button',
     'div',
+    'form',
     'h2',
     'h3',
     'img',
+    'input',
     'label',
     'li',
     'nav',
@@ -299,14 +323,6 @@ const $8927f6f2acc4f386$var$NODES = [
     , []);
 }
 
-/**
- * On the server, React emits a warning when calling `useLayoutEffect`.
- * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
- * We use this safe version which suppresses the warning by replacing it with a noop on the server.
- *
- * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
- */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? useLayoutEffect : ()=>{};
-
 function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop: prop , defaultProp: defaultProp , onChange: onChange = ()=>{}  }) {
     const [uncontrolledProp, setUncontrolledProp] = $71cd76cc60e0454e$var$useUncontrolledState({
         defaultProp: defaultProp,
@@ -350,22 +366,4 @@ function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp: defaultProp ,
     return uncontrolledState;
 }
 
-function $010c2913dbd2fe3d$export$5cae361ad82dce8b(value) {
-    const ref = useRef({
-        value: value,
-        previous: value
-    }); // We compare values before making an update to ensure that
-    // a change has been made. This ensures the previous value is
-    // persisted correctly between renders.
-    return useMemo(()=>{
-        if (ref.current.value !== value) {
-            ref.current.previous = ref.current.value;
-            ref.current.value = value;
-        }
-        return ref.current.previous;
-    }, [
-        value
-    ]);
-}
-
-export { $c512c27ab02ef895$export$50c7b4e9d9f19c1 as $, $6ed0406888f73fc4$export$c7b2cbe3552a0d05 as a, $5e63c961fc1ce211$export$8c6ed5c666ac1360 as b, $b1b2314f5f9a1d84$export$25bec8c6f54ee79a as c, $8927f6f2acc4f386$export$250ffa63cdc0d034 as d, $e42e1063c40fb3ef$export$b9ecd428b558ff10 as e, $8927f6f2acc4f386$export$6d1a0317bde7de7f as f, $9f79659886946c16$export$e5c5a5f917a5871c as g, $71cd76cc60e0454e$export$6f32135080cb4c3 as h, $010c2913dbd2fe3d$export$5cae361ad82dce8b as i };
+export { $c512c27ab02ef895$export$50c7b4e9d9f19c1 as $, _extends as _, $8927f6f2acc4f386$export$250ffa63cdc0d034 as a, $e42e1063c40fb3ef$export$b9ecd428b558ff10 as b, $6ed0406888f73fc4$export$c7b2cbe3552a0d05 as c, $71cd76cc60e0454e$export$6f32135080cb4c3 as d, $b1b2314f5f9a1d84$export$25bec8c6f54ee79a as e, $8927f6f2acc4f386$export$6d1a0317bde7de7f as f, $9f79659886946c16$export$e5c5a5f917a5871c as g, $5e63c961fc1ce211$export$8c6ed5c666ac1360 as h };

package/dist/_shared/esm/index-a41a5e50.js

@@ -0,0 +1,41 @@
+import { useEffect, forwardRef, createElement } from 'react';
+import { e as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, a as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends } from './index-7f23bb37.js';
+
+/**
+ * Listens for when the escape key is down
+ */ function $addc16e1bbe58fd0$export$3a72a57244d6e765(onEscapeKeyDownProp, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
+    const onEscapeKeyDown = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onEscapeKeyDownProp);
+    useEffect(()=>{
+        const handleKeyDown = (event)=>{
+            if (event.key === 'Escape') onEscapeKeyDown(event);
+        };
+        ownerDocument.addEventListener('keydown', handleKeyDown);
+        return ()=>ownerDocument.removeEventListener('keydown', handleKeyDown)
+        ;
+    }, [
+        onEscapeKeyDown,
+        ownerDocument
+    ]);
+}
+
+const $ea1ef594cf570d83$export$439d29a4e110a164 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({}, props, {
+        ref: forwardedRef,
+        style: {
+            // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
+            position: 'absolute',
+            border: 0,
+            width: 1,
+            height: 1,
+            padding: 0,
+            margin: -1,
+            overflow: 'hidden',
+            clip: 'rect(0, 0, 0, 0)',
+            whiteSpace: 'nowrap',
+            wordWrap: 'normal',
+            ...props.style
+        }
+    }));
+});
+
+export { $addc16e1bbe58fd0$export$3a72a57244d6e765 as $, $ea1ef594cf570d83$export$439d29a4e110a164 as a };

package/dist/_shared/esm/{Tabs-39d24a7d.js → index-b051f161.js}

@@ -1,19 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
-import React__default, { useContext, createContext, forwardRef, createElement, useRef, useState, useEffect, useCallback } from 'react';
-import { _ as _extends } from './extends-8cc61aad.js';
-import { c as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, d as $71cd76cc60e0454e$export$6f32135080cb4c3, $ as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, b as $8927f6f2acc4f386$export$250ffa63cdc0d034, g as $e42e1063c40fb3ef$export$b9ecd428b558ff10, e as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-87a828b8.js';
-import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-65264b4e.js';
-import { $ as $1746a345f3d73bb7$export$f680877a34711e37 } from './index-3147c5b0.js';
-import { I as Icon } from './Icon-9ecaaeab.js';
-import { C as Context } from './Surface-0ca6817d.js';
-import { c as classNames } from './index-2e73c2e9.js';
-import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
-
-const $f631663db3294ace$var$DirectionContext = /*#__PURE__*/ createContext(undefined);
-/* -----------------------------------------------------------------------------------------------*/ function $f631663db3294ace$export$b39126d51d94e6f3(localDir) {
-    const globalDir = useContext($f631663db3294ace$var$DirectionContext);
-    return localDir || globalDir || 'ltr';
-}
+import { $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, b as $e42e1063c40fb3ef$export$b9ecd428b558ff10, c as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, d as $71cd76cc60e0454e$export$6f32135080cb4c3, e as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a } from './index-7f23bb37.js';
+import { forwardRef, useEffect, createElement, useRef, useState, useCallback } from 'react';
+import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-2403936c.js';
+import { $ as $1746a345f3d73bb7$export$f680877a34711e37, a as $f631663db3294ace$export$b39126d51d94e6f3 } from './index-13458236.js';
+import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-7868cc59.js';
 
 const $d7bdfb9eb0fdf311$var$ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
 const $d7bdfb9eb0fdf311$var$EVENT_OPTIONS = {
@@ -382,81 +371,4 @@ const $69cb30bb0017df05$export$54c2e3dc7acea9f5 = $69cb30bb0017df05$export$9712d
 const $69cb30bb0017df05$export$41fb9f06171c75f4 = $69cb30bb0017df05$export$8114b9fdfdf9f3ba;
 const $69cb30bb0017df05$export$7c6e2c02157bb7d2 = $69cb30bb0017df05$export$bd905d70e8fd2ebb;
 
-var Tab = function (_a) {
-    var label = _a.label, value = _a.value, icon = _a.icon, iconActive = _a.iconActive, props = __rest(_a, ["label", "value", "icon", "iconActive"]);
-    var surface = useContext(Context).surface;
-    return (React__default.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, __assign({ className: classNames("arc-Tab-trigger", {
-            "arc-Tab-trigger--onDarkSurface": surface === "dark",
-            "arc-Tab-trigger--hasIcon": icon || iconActive
-        }), value: value }, filterDataAttrs(props)),
-        icon && (React__default.createElement("div", { className: "arc-Tab-triggerIcon", "data-testid": "arc-Tab-TriggerIcon" },
-            React__default.createElement(Icon, { icon: icon }))),
-        iconActive && (React__default.createElement("div", { className: "arc-Tab-triggerIcon arc-Tab-triggerIcon--active", "data-testid": "arc-Tab-TriggerIconActive" },
-            React__default.createElement(Icon, { icon: iconActive }))),
-        React__default.createElement("span", { className: "arc-Tab-triggerText" }, label)));
-};
-
-var TabContent = function (_a) {
-    var children = _a.children, value = _a.value;
-    return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-Tab-content", value: value }, children));
-};
-
-var TabsList = function (_a) {
-    var children = _a.children, type = _a.type, isJustified = _a.isJustified, ariaLabel = _a.ariaLabel, props = __rest(_a, ["children", "type", "isJustified", "ariaLabel"]);
-    var surface = useContext(Context).surface;
-    var tabsRef = useRef(null);
-    var _b = useState(false), rightOverflow = _b[0], setRightOverflow = _b[1];
-    var _c = useState(false), leftOverflow = _c[0], setLeftOverflow = _c[1];
-    var checkOverflow = function (element) {
-        if (element) {
-            if (element.scrollWidth > element.clientWidth) {
-                setRightOverflow(true);
-            }
-            if (element.scrollLeft + 10 >=
-                element.scrollWidth - element.clientWidth) {
-                setRightOverflow(false);
-            }
-            if (element.scrollLeft >= 1) {
-                setLeftOverflow(true);
-            }
-            else {
-                setLeftOverflow(false);
-            }
-        }
-    };
-    useEffect(function () {
-        checkOverflow(tabsRef.current);
-    }, []);
-    var scrollTabs = function (scrollAmount) {
-        if (tabsRef.current) {
-            tabsRef.current.scrollLeft += scrollAmount;
-        }
-    };
-    var onScroll = function (event) {
-        checkOverflow(event.currentTarget);
-    };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, __assign({ onScroll: onScroll, className: classNames("arc-Tabs", {
-                "arc-Tabs--contained": type === "contained",
-                "arc-Tabs--isJustified": isJustified,
-                "arc-Tabs--onDarkSurface": surface === "dark"
-            }), ref: tabsRef, "aria-label": ariaLabel }, filterDataAttrs(props)), children),
-        leftOverflow && (React__default.createElement("button", { className: classNames("arc-Tabs-overflowIcon arc-Tabs-overflowIcon--left", {
-                "arc-Tabs-overflowIcon--onDarkSurface": surface === "dark"
-            }), onClick: function () { return scrollTabs(-300); }, "aria-label": "Scroll Tabs Left", "data-testid": "arc-Tabs-overflowIconLeft" },
-            React__default.createElement(ThemeIcon, { icon: "tabsPrevious", size: 40, color: "brand" }))),
-        rightOverflow && (React__default.createElement("button", { className: classNames("arc-Tabs-overflowIcon", {
-                "arc-Tabs-overflowIcon--onDarkSurface": surface === "dark"
-            }), onClick: function () { return scrollTabs(300); }, "aria-label": "Scroll Tabs Right", "data-testid": "arc-Tabs-overflowIconRight" },
-            React__default.createElement(ThemeIcon, { icon: "tabsNext", size: 40, color: "brand" })))));
-};
-
-var Tabs = function (_a) {
-    var children = _a.children, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, activationMode = _a.activationMode, props = __rest(_a, ["children", "defaultValue", "onValueChange", "activationMode"]);
-    return (React__default.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, __assign({ className: "arc-Tabs-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode }, filterDataAttrs(props)), children));
-};
-Tabs.Tab = Tab;
-Tabs.List = TabsList;
-Tabs.Content = TabContent;
-
-export { Tabs as T };
+export { $69cb30bb0017df05$export$41fb9f06171c75f4 as $, $69cb30bb0017df05$export$7c6e2c02157bb7d2 as a, $69cb30bb0017df05$export$54c2e3dc7acea9f5 as b, $69cb30bb0017df05$export$be92b6f5f03c0fe9 as c };