import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import * as React from 'react';
import { useId, useRef, useContext, useInsertionEffect, useMemo, Children, isValidElement, useState, createContext, forwardRef, useCallback, useLayoutEffect, useEffect } from 'react';
import { D as DurationDefault, e as DurationSlow } from './primitive-DXlHdTFb.js';
import { c as cx } from './index-De1g9FRV.js';
import { u as useReducedMotion } from './use-reduced-motion-CqjZZ5QB.js';
import { useTrackingId } from './useTrackingId.js';
import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
import { M as MotionConfigContext, a as isHTMLElement, u as useConstant, P as PresenceContext, b as usePresence, c as useIsomorphicLayoutEffect, L as LayoutGroupContext, m as motion } from './proxy-DEehATlA.js';
import { I as Icon } from './Icon-BMMbp40n.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';

import './Tab.css';/**
 * Measurement functionality has to be within a separate component
 * to leverage snapshot lifecycle.
 */
class PopChildMeasure extends React.Component {
    getSnapshotBeforeUpdate(prevProps) {
        const element = this.props.childRef.current;
        if (element && prevProps.isPresent && !this.props.isPresent) {
            const parent = element.offsetParent;
            const parentWidth = isHTMLElement(parent)
                ? parent.offsetWidth || 0
                : 0;
            const size = this.props.sizeRef.current;
            size.height = element.offsetHeight || 0;
            size.width = element.offsetWidth || 0;
            size.top = element.offsetTop;
            size.left = element.offsetLeft;
            size.right = parentWidth - size.width - size.left;
        }
        return null;
    }
    /**
     * Required with getSnapshotBeforeUpdate to stop React complaining.
     */
    componentDidUpdate() { }
    render() {
        return this.props.children;
    }
}
function PopChild({ children, isPresent, anchorX, root }) {
    const id = useId();
    const ref = useRef(null);
    const size = useRef({
        width: 0,
        height: 0,
        top: 0,
        left: 0,
        right: 0,
    });
    const { nonce } = useContext(MotionConfigContext);
    /**
     * We create and inject a style block so we can apply this explicit
     * sizing in a non-destructive manner by just deleting the style block.
     *
     * We can't apply size via render as the measurement happens
     * in getSnapshotBeforeUpdate (post-render), likewise if we apply the
     * styles directly on the DOM node, we might be overwriting
     * styles set via the style prop.
     */
    useInsertionEffect(() => {
        const { width, height, top, left, right } = size.current;
        if (isPresent || !ref.current || !width || !height)
            return;
        const x = anchorX === "left" ? `left: ${left}` : `right: ${right}`;
        ref.current.dataset.motionPopId = id;
        const style = document.createElement("style");
        if (nonce)
            style.nonce = nonce;
        const parent = root ?? document.head;
        parent.appendChild(style);
        if (style.sheet) {
            style.sheet.insertRule(`
          [data-motion-pop-id="${id}"] {
            position: absolute !important;
            width: ${width}px !important;
            height: ${height}px !important;
            ${x}px !important;
            top: ${top}px !important;
          }
        `);
        }
        return () => {
            if (parent.contains(style)) {
                parent.removeChild(style);
            }
        };
    }, [isPresent]);
    return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref }) }));
}

const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, root }) => {
    const presenceChildren = useConstant(newChildrenMap);
    const id = useId();
    let isReusedContext = true;
    let context = useMemo(() => {
        isReusedContext = false;
        return {
            id,
            initial,
            isPresent,
            custom,
            onExitComplete: (childId) => {
                presenceChildren.set(childId, true);
                for (const isComplete of presenceChildren.values()) {
                    if (!isComplete)
                        return; // can stop searching when any is incomplete
                }
                onExitComplete && onExitComplete();
            },
            register: (childId) => {
                presenceChildren.set(childId, false);
                return () => presenceChildren.delete(childId);
            },
        };
    }, [isPresent, presenceChildren, onExitComplete]);
    /**
     * If the presence of a child affects the layout of the components around it,
     * we want to make a new context value to ensure they get re-rendered
     * so they can detect that layout change.
     */
    if (presenceAffectsLayout && isReusedContext) {
        context = { ...context };
    }
    useMemo(() => {
        presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
    }, [isPresent]);
    /**
     * If there's no `motion` components to fire exit animations, we want to remove this
     * component immediately.
     */
    React.useEffect(() => {
        !isPresent &&
            !presenceChildren.size &&
            onExitComplete &&
            onExitComplete();
    }, [isPresent]);
    if (mode === "popLayout") {
        children = (jsx(PopChild, { isPresent: isPresent, anchorX: anchorX, root: root, children: children }));
    }
    return (jsx(PresenceContext.Provider, { value: context, children: children }));
};
function newChildrenMap() {
    return new Map();
}

const getChildKey = (child) => child.key || "";
function onlyElements(children) {
    const filtered = [];
    // We use forEach here instead of map as map mutates the component key by preprending `.$`
    Children.forEach(children, (child) => {
        if (isValidElement(child))
            filtered.push(child);
    });
    return filtered;
}

/**
 * `AnimatePresence` enables the animation of components that have been removed from the tree.
 *
 * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
 *
 * Any `motion` components that have an `exit` property defined will animate out when removed from
 * the tree.
 *
 * ```jsx
 * import { motion, AnimatePresence } from 'framer-motion'
 *
 * export const Items = ({ items }) => (
 *   <AnimatePresence>
 *     {items.map(item => (
 *       <motion.div
 *         key={item.id}
 *         initial={{ opacity: 0 }}
 *         animate={{ opacity: 1 }}
 *         exit={{ opacity: 0 }}
 *       />
 *     ))}
 *   </AnimatePresence>
 * )
 * ```
 *
 * You can sequence exit animations throughout a tree using variants.
 *
 * If a child contains multiple `motion` components with `exit` props, it will only unmount the child
 * once all `motion` components have finished animating out. Likewise, any components using
 * `usePresence` all need to call `safeToRemove`.
 *
 * @public
 */
const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, anchorX = "left", root }) => {
    const [isParentPresent, safeToRemove] = usePresence(propagate);
    /**
     * Filter any children that aren't ReactElements. We can only track components
     * between renders with a props.key.
     */
    const presentChildren = useMemo(() => onlyElements(children), [children]);
    /**
     * Track the keys of the currently rendered children. This is used to
     * determine which children are exiting.
     */
    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
    /**
     * If `initial={false}` we only want to pass this to components in the first render.
     */
    const isInitialRender = useRef(true);
    /**
     * A ref containing the currently present children. When all exit animations
     * are complete, we use this to re-render the component with the latest children
     * *committed* rather than the latest children *rendered*.
     */
    const pendingPresentChildren = useRef(presentChildren);
    /**
     * Track which exiting children have finished animating out.
     */
    const exitComplete = useConstant(() => new Map());
    /**
     * Save children to render as React state. To ensure this component is concurrent-safe,
     * we check for exiting children via an effect.
     */
    const [diffedChildren, setDiffedChildren] = useState(presentChildren);
    const [renderedChildren, setRenderedChildren] = useState(presentChildren);
    useIsomorphicLayoutEffect(() => {
        isInitialRender.current = false;
        pendingPresentChildren.current = presentChildren;
        /**
         * Update complete status of exiting children.
         */
        for (let i = 0; i < renderedChildren.length; i++) {
            const key = getChildKey(renderedChildren[i]);
            if (!presentKeys.includes(key)) {
                if (exitComplete.get(key) !== true) {
                    exitComplete.set(key, false);
                }
            }
            else {
                exitComplete.delete(key);
            }
        }
    }, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
    const exitingChildren = [];
    if (presentChildren !== diffedChildren) {
        let nextChildren = [...presentChildren];
        /**
         * Loop through all the currently rendered components and decide which
         * are exiting.
         */
        for (let i = 0; i < renderedChildren.length; i++) {
            const child = renderedChildren[i];
            const key = getChildKey(child);
            if (!presentKeys.includes(key)) {
                nextChildren.splice(i, 0, child);
                exitingChildren.push(child);
            }
        }
        /**
         * If we're in "wait" mode, and we have exiting children, we want to
         * only render these until they've all exited.
         */
        if (mode === "wait" && exitingChildren.length) {
            nextChildren = exitingChildren;
        }
        setRenderedChildren(onlyElements(nextChildren));
        setDiffedChildren(presentChildren);
        /**
         * Early return to ensure once we've set state with the latest diffed
         * children, we can immediately re-render.
         */
        return null;
    }
    if (process.env.NODE_ENV !== "production" &&
        mode === "wait" &&
        renderedChildren.length > 1) {
        console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
    }
    /**
     * If we've been provided a forceRender function by the LayoutGroupContext,
     * we can use it to force a re-render amongst all surrounding components once
     * all components have finished animating out.
     */
    const { forceRender } = useContext(LayoutGroupContext);
    return (jsx(Fragment, { children: renderedChildren.map((child) => {
            const key = getChildKey(child);
            const isPresent = propagate && !isParentPresent
                ? false
                : presentChildren === renderedChildren ||
                    presentKeys.includes(key);
            const onExit = () => {
                if (exitComplete.has(key)) {
                    exitComplete.set(key, true);
                }
                else {
                    return;
                }
                let isEveryExitComplete = true;
                exitComplete.forEach((isExitComplete) => {
                    if (!isExitComplete)
                        isEveryExitComplete = false;
                });
                if (isEveryExitComplete) {
                    forceRender?.();
                    setRenderedChildren(pendingPresentChildren.current);
                    propagate && safeToRemove?.();
                    onExitComplete && onExitComplete();
                }
            };
            return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial
                    ? undefined
                    : false, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, root: root, onExitComplete: isPresent ? undefined : onExit, anchorX: anchorX, children: child }, key));
        }) }));
};

const initialValue = {
  current: 0,
  focus: 0
};
const TabContext = createContext(initialValue);

const tab = "_tab_2y36m_1";
const fill = "_fill_2y36m_41";
const inner = "_inner_2y36m_89";
const indicator = "_indicator_2y36m_107";
const scroller = "_scroller_2y36m_137";
const right = "_right_2y36m_148";
const left = "_left_2y36m_148";
const styles = {
	tab: tab,
	fill: fill,
	"tab-button": "_tab-button_2y36m_45",
	inner: inner,
	indicator: indicator,
	"tab-list": "_tab-list_2y36m_117",
	scroller: scroller,
	right: right,
	left: left,
	"overflow-prev": "_overflow-prev_2y36m_174",
	"overflow-next": "_overflow-next_2y36m_175",
	"tab-panel": "_tab-panel_2y36m_222"
};

const TabButton = forwardRef(
  (props, ref) => {
    const buttonRef = useRef(null);
    const shouldReduceMotion = useReducedMotion();
    const {
      current,
      items,
      setCurrent,
      focus,
      setFocus,
      onKeyDownHandler: focusController,
      uid
    } = useContext(TabContext);
    const {
      onClick,
      children,
      onFocus,
      onKeyDown,
      controls,
      id,
      className,
      style,
      ...rest
    } = props;
    const index$1 = items && Array.prototype.indexOf.call(items, buttonRef.current);
    const onClickHandler = (e) => {
      if (index$1 === void 0) return;
      onClick?.(e, index$1);
      setCurrent?.(index$1);
      setFocus?.(index$1);
      items?.[index$1].focus();
    };
    const onKeyDownHandler = (e) => {
      focusController?.(e);
      onKeyDown?.(e);
    };
    const data = {
      id,
      controls
    };
    const trackingId = useTrackingId({
      name: "TabButton",
      data,
      hasOverride: !!rest["data-tracking-id"]
    });
    const tabButtonClassNames = cx(styles["tab-button"], className);
    return /* @__PURE__ */ jsxs(
      "button",
      {
        "data-tracking-id": trackingId,
        type: "button",
        role: "tab",
        "data-anv": "tab-button",
        id,
        className: tabButtonClassNames,
        "aria-selected": items?.[current].id === id,
        "aria-controls": controls,
        onClick: onClickHandler,
        onKeyDown: onKeyDownHandler,
        tabIndex: items?.[focus].id === id ? 0 : -1,
        ...rest,
        ref: useMergeRefs([buttonRef, ref]),
        children: [
          /* @__PURE__ */ jsx("span", { className: styles["inner"], children }),
          items?.[current].id === id && /* @__PURE__ */ jsx(
            motion.span,
            {
              layoutId: uid,
              className: styles["indicator"],
              transition: {
                duration: shouldReduceMotion ? 0 : +DurationDefault.value.replace("ms", "") / 1e3
              }
            }
          )
        ]
      }
    );
  }
);
TabButton.displayName = "TabButton";

const SvgArrowBack = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0l-6.59 6.59a.996.996 0 0 0 0 1.41l6.59 6.59a.996.996 0 1 0 1.41-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z" }));

const SvgArrowForward = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59a.996.996 0 0 0 0-1.41l-6.58-6.6a.996.996 0 1 0-1.41 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z" }));

const TabList = forwardRef(
  (props, ref) => {
    const {
      className,
      children,
      onKeyDown,
      "aria-label": ariaLabel,
      "aria-labelledby": ariaLabelledBy,
      ...rest
    } = props;
    const { goToPrev, gotoNext, dir } = useContext(TabContext);
    const [leftOverflow, setLeftOverflow] = useState(false);
    const [rightOverflow, setRightOverflow] = useState(false);
    const scrollRef = useRef(null);
    const calculateOverflow = useCallback(
      (el) => {
        const leftOverflows = dir === "ltr" ? el.scrollLeft > 0 : el.scrollLeft > el.offsetWidth - el.scrollWidth + 1;
        const rightOverflows = dir === "ltr" ? el.scrollLeft < el.scrollWidth - el.offsetWidth : el.scrollLeft < 0;
        setLeftOverflow(leftOverflows);
        setRightOverflow(rightOverflows);
      },
      [dir]
    );
    useLayoutEffect(() => {
      if (!scrollRef.current) return;
      const observer = new ResizeObserver((entries) => {
        for (const entry of entries) {
          calculateOverflow(entry.target);
        }
      });
      observer.observe(scrollRef.current);
      return () => {
        observer.disconnect();
      };
    }, [calculateOverflow]);
    const overflowPosition = (e) => {
      const target = e.target;
      calculateOverflow(target);
    };
    const tabListClassNames = cx(styles["tab-list"], className);
    const scrollerClassNames = cx(styles["scroller"], {
      [styles["left"]]: leftOverflow,
      [styles["right"]]: rightOverflow
    });
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ...rest,
        className: tabListClassNames,
        "data-anv": "tab-list",
        ref,
        children: [
          (dir === "ltr" ? leftOverflow : rightOverflow) && /* @__PURE__ */ jsx(
            "button",
            {
              tabIndex: -1,
              onClick: () => goToPrev?.(false),
              className: styles["overflow-prev"],
              "aria-label": "Previous tab",
              children: /* @__PURE__ */ jsx(Icon, { svg: SvgArrowBack, "aria-hidden": true, size: "medium" })
            }
          ),
          /* @__PURE__ */ jsx(
            "div",
            {
              onScroll: overflowPosition,
              onKeyDown,
              className: scrollerClassNames,
              role: "tablist",
              tabIndex: -1,
              "aria-label": ariaLabel,
              "aria-labelledby": ariaLabelledBy,
              ref: scrollRef,
              children
            }
          ),
          (dir === "ltr" ? rightOverflow : leftOverflow) && /* @__PURE__ */ jsx(
            "button",
            {
              tabIndex: -1,
              onClick: () => gotoNext?.(false),
              className: styles["overflow-next"],
              "aria-label": "Next tab",
              children: /* @__PURE__ */ jsx(Icon, { svg: SvgArrowForward, "aria-hidden": true, size: "medium" })
            }
          )
        ]
      }
    );
  }
);
TabList.displayName = "TabList";

const TabPanel = forwardRef(
  (props, ref) => {
    const { id, className, ...rest } = props;
    const { current, items } = useContext(TabContext);
    let labelledby;
    items?.forEach((el) => {
      const controlId = el.getAttribute("aria-controls");
      if (controlId === id) {
        labelledby = el.id;
      }
    });
    const currentId = items?.[current]?.getAttribute("aria-controls");
    const isCurrent = currentId === id;
    const tabPanelClassNames = cx(styles["tab-panel"], className);
    if (!isCurrent) return null;
    return /* @__PURE__ */ jsx(
      motion.div,
      {
        className: tabPanelClassNames,
        transition: {
          opacity: {
            duration: +DurationSlow.value.replace("ms", "") / 1e3
          }
        },
        initial: { opacity: 0 },
        animate: { opacity: 1 },
        exit: { opacity: 0 },
        layout: true,
        ...rest,
        role: "tabpanel",
        "data-anv": "tab-panel",
        id,
        "aria-labelledby": labelledby,
        tabIndex: 0,
        ref
      }
    );
  }
);
TabPanel.displayName = "TabPanel";

const Tab = Object.assign(
  forwardRef(function TabInner(props, ref) {
    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
    const {
      defaultIndex,
      index,
      onIndexChange,
      className,
      style,
      fill,
      ...rest
    } = componentProps;
    const tabRef = useRef(null);
    const [items, setItems] = useState();
    const [current, setCurrent] = useOptionallyControlledState({
      controlledValue: index,
      defaultValue: defaultIndex ?? 0,
      onChange: onIndexChange
    });
    const isControlled = index !== void 0;
    const [focus, setFocus] = useState(defaultIndex ?? 0);
    const [dir, setDir] = useState("ltr");
    const uid = useId();
    useEffect(() => {
      setItems(tabRef.current?.querySelectorAll("[role=tab]:not([disabled])"));
    }, [tabRef]);
    useEffect(() => {
      if (tabRef.current?.closest("[dir]")?.getAttribute("dir") === "rtl") {
        setDir("rtl");
      } else {
        setDir("ltr");
      }
    }, []);
    useEffect(() => {
      if (!isControlled) return;
      const tablistEl = tabRef.current?.querySelector("[role=tablist]");
      const hasFocusInTablist = tablistEl?.contains(document.activeElement) ?? false;
      if (!hasFocusInTablist) setFocus(index);
    }, [index, isControlled]);
    useEffect(() => {
      if (!tabRef.current) return;
      const mutationCallback = () => {
        setItems(
          tabRef.current?.querySelectorAll("[role=tab]:not([disabled])")
        );
      };
      const observer = new MutationObserver(mutationCallback);
      observer.observe(tabRef.current, {
        childList: true,
        // Observe changes to child elements
        subtree: true,
        // Observe changes to descendants of the target
        attributes: true,
        // Observe changes to attributes
        characterData: true
        // Observe changes to text content
      });
      return () => {
        observer.disconnect();
      };
    }, []);
    const focusScroller = (node) => {
      node?.scrollIntoView({
        behavior: "smooth",
        block: "nearest",
        inline: "center"
      });
    };
    const gotoNext = useCallback(
      (_refocus = true) => {
        if (focus + 1 === items?.length) {
          setFocus?.(0);
          items?.[0].focus();
          focusScroller(items?.[0]);
          return;
        }
        setFocus?.(focus + 1);
        items?.[focus + 1].focus();
        focusScroller(items?.[focus + 1]);
      },
      [focus, items]
    );
    const goToPrev = useCallback(
      (_refocus = true) => {
        if (focus === 0) {
          const lastItemIndex = items ? items?.length - 1 : 0;
          setFocus?.(lastItemIndex);
          items?.[lastItemIndex].focus();
          focusScroller(items?.[lastItemIndex]);
          return;
        }
        setFocus?.(focus - 1);
        items?.[focus - 1].focus();
        focusScroller(items?.[focus - 1]);
      },
      [focus, items]
    );
    const onKeyDownHandler = useCallback(
      (e) => {
        switch (e.code) {
          case "Enter":
          case "Space":
            setCurrent?.(focus);
            break;
          case "ArrowRight":
            e.preventDefault();
            if (dir === "ltr") {
              gotoNext();
            } else {
              goToPrev();
            }
            break;
          case "ArrowLeft":
            e.preventDefault();
            if (dir === "ltr") {
              goToPrev();
            } else {
              gotoNext();
            }
            break;
        }
      },
      [dir, focus, goToPrev, gotoNext, setCurrent]
    );
    const value = useMemo(
      () => ({
        current,
        setCurrent,
        focus,
        setFocus,
        items,
        uid,
        onKeyDownHandler,
        gotoNext,
        goToPrev,
        dir
      }),
      [
        current,
        setCurrent,
        focus,
        goToPrev,
        gotoNext,
        items,
        onKeyDownHandler,
        uid,
        dir
      ]
    );
    const tabClassNames = cx(styles["tab"], className, {
      [styles["fill"]]: fill
    });
    const styleCombined = {
      ...style,
      ...layoutStyles
    };
    return /* @__PURE__ */ jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx(
      motion.div,
      {
        transition: { duration: 0 },
        layout: true,
        className: tabClassNames,
        "data-anv": "tab",
        style: styleCombined,
        ...rest,
        ref: useMergeRefs([tabRef, ref])
      }
    ) }) });
  }),
  {
    /**
     * TabButton component for individual tab navigation buttons.
     *
     * Features:
     * - Automatic ARIA attributes for accessibility
     * - Visual indicator for active state
     * - Keyboard navigation support
     * - Smooth animations with reduced motion support
     * - Proper focus management
     * - RTL language support
     * - Automatic tracking ID generation for analytics
     *
     * @example
     * <Tab.Button id="tab1" controls="panel1" onClick={(e, index) => console.log('Tab clicked:', index)}>
     *   First Tab
     * </Tab.Button>
     */
    Button: TabButton,
    /**
     * TabList component for containing and managing tab buttons.
     *
     * Features:
     * - Horizontal scrolling for overflow tabs
     * - Navigation arrows for overflow content
     * - RTL language support
     * - Automatic overflow detection
     * - Proper ARIA roles for accessibility
     * - Smooth scrolling behavior
     * - Visual indicator positioning
     *
     * @example
     * <Tab.List>
     *   <Tab.Button id="tab1" controls="panel1">First Tab</Tab.Button>
     *   <Tab.Button id="tab2" controls="panel2">Second Tab</Tab.Button>
     *   <Tab.Button id="tab3" controls="panel3">Third Tab</Tab.Button>
     * </Tab.List>
     */
    List: TabList,
    /**
     * TabPanel component for displaying tab content.
     *
     * Features:
     * - Automatic visibility based on active tab
     * - Smooth fade animations
     * - Proper ARIA attributes for accessibility
     * - Automatic association with tab buttons
     * - Focus management
     * - Layout animations
     *
     * @example
     * <Tab.Panel id="panel1">
     *   <h2>First Tab Content</h2>
     *   <p>This is the content for the first tab.</p>
     * </Tab.Panel>
     */
    Panel: TabPanel
  }
);
Tab.displayName = "Tab";

export { Tab as T };
//# sourceMappingURL=Tab-CewPzmuK.js.map
