import { _ as _extends$1 } from '../extends-C4cduGrv.js';
import { _ as _objectWithoutProperties } from '../objectWithoutProperties-TXwlfNxG.js';
import React__default, { useContext, useState, useCallback, useMemo, useRef, useEffect, Children, createContext } from 'react';
import { _ as _typeof } from '../typeof-CgC7Bq6K.js';
import PropTypes from 'prop-types';
import { a as useForceUpdate, d as usePrevious, u as useIsomorphicLayoutEffect, c as createNamedContext, n as noop, i as isNumber, f as forwardRefWithAs, e as memoWithAs, h as useControlledSwitchWarning, m as makeId, j as useControlledState, k as isFunction, l as checkStyles, b as useForkedRef, o as getElementComputedStyle, p as useEventCallback, w as wrapEvent, q as boolOrBoolString, r as cloneValidElement, s as useUpdateEffect } from '../utils.esm-CKyxlHOy.js';
import { u as useId } from '../auto-id.esm-Cly76abB.js';
import cx from 'classnames';
import '../warning-s9zGJbnw.js';

function _extends() {
  _extends = Object.assign || 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 _objectWithoutPropertiesLoose$1(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function createDescendantContext(name, initialValue) {
  if (initialValue === void 0) {
    initialValue = {};
  }

  var descendants = [];
  return createNamedContext(name, _extends({
    descendants: descendants,
    registerDescendant: noop,
    unregisterDescendant: noop
  }, initialValue));
}
/**
 * This hook registers our descendant by passing it into an array. We can then
 * search that array by to find its index when registering it in the component.
 * We use this for focus management, keyboard navigation, and typeahead
 * functionality for some components.
 *
 * The hook accepts the element node and (optionally) a key. The key is useful
 * if multiple descendants have identical text values and we need to
 * differentiate siblings for some reason.
 *
 * Our main goals with this are:
 *   1) maximum composability,
 *   2) minimal API friction
 *   3) SSR compatibility*
 *   4) concurrent safe
 *   5) index always up-to-date with the tree despite changes
 *   6) works with memoization of any component in the tree (hopefully)
 *
 * * As for SSR, the good news is that we don't actually need the index on the
 * server for most use-cases, as we are only using it to determine the order of
 * composed descendants for keyboard navigation. However, in the few cases where
 * this is not the case, we can require an explicit index from the app.
 */


function useDescendant(descendant, context, indexProp) {
  var forceUpdate = useForceUpdate();

  var _useContext = useContext(context),
      registerDescendant = _useContext.registerDescendant,
      unregisterDescendant = _useContext.unregisterDescendant,
      descendants = _useContext.descendants; // This will initially return -1 because we haven't registered the descendant
  // on the first render. After we register, this will then return the correct
  // index on the following render and we will re-register descendants
  // so that everything is up-to-date before the user interacts with a
  // collection.


  var index = indexProp !== null && indexProp !== void 0 ? indexProp : descendants.findIndex(function (item) {
    return item.element === descendant.element;
  });
  var previousDescendants = usePrevious(descendants); // We also need to re-register descendants any time ANY of the other
  // descendants have changed. My brain was melting when I wrote this and it
  // feels a little off, but checking in render and using the result in the
  // effect's dependency array works well enough.

  var someDescendantsHaveChanged = descendants.some(function (descendant, index) {
    var _previousDescendants$;

    return descendant.element !== (previousDescendants === null || previousDescendants === void 0 ? void 0 : (_previousDescendants$ = previousDescendants[index]) === null || _previousDescendants$ === void 0 ? void 0 : _previousDescendants$.element);
  }); // Prevent any flashing

  useIsomorphicLayoutEffect(function () {
    if (!descendant.element) forceUpdate();
    registerDescendant(_extends({}, descendant, {
      index: index
    }));
    return function () {
      return unregisterDescendant(descendant.element);
    }; // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [forceUpdate, index, registerDescendant, someDescendantsHaveChanged, unregisterDescendant].concat(Object.values(descendant)));
  return index;
}

function useDescendantsInit() {
  return useState([]);
}

function useDescendants(ctx) {
  return useContext(ctx).descendants;
}

function DescendantProvider(_ref) {
  var Ctx = _ref.context,
      children = _ref.children,
      items = _ref.items,
      set = _ref.set;
  var registerDescendant = useCallback(function (_ref2) {
    var element = _ref2.element,
        explicitIndex = _ref2.index,
        rest = _objectWithoutPropertiesLoose$1(_ref2, ["element", "index"]);

    if (!element) {
      return;
    }

    set(function (items) {
      var newItems;

      if (explicitIndex != null) {
        newItems = [].concat(items, [_extends({}, rest, {
          element: element,
          index: explicitIndex
        })]);
      } else if (items.length === 0) {
        // If there are no items, register at index 0 and bail.
        newItems = [].concat(items, [_extends({}, rest, {
          element: element,
          index: 0
        })]);
      } else if (items.find(function (item) {
        return item.element === element;
      })) {
        // If the element is already registered, just use the same array
        newItems = items;
      } else {
        // When registering a descendant, we need to make sure we insert in
        // into the array in the same order that it appears in the DOM. So as
        // new descendants are added or maybe some are removed, we always know
        // that the array is up-to-date and correct.
        //
        // So here we look at our registered descendants and see if the new
        // element we are adding appears earlier than an existing descendant's
        // DOM node via `node.compareDocumentPosition`. If it does, we insert
        // the new element at this index. Because `registerDescendant` will be
        // called in an effect every time the descendants state value changes,
        // we should be sure that this index is accurate when descendent
        // elements come or go from our component.
        var index = items.findIndex(function (item) {
          if (!item.element || !element) {
            return false;
          } // Does this element's DOM node appear before another item in the
          // array in our DOM tree? If so, return true to grab the index at
          // this point in the array so we know where to insert the new
          // element.


          return Boolean(item.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING);
        });

        var newItem = _extends({}, rest, {
          element: element,
          index: index
        }); // If an index is not found we will push the element to the end.


        if (index === -1) {
          newItems = [].concat(items, [newItem]);
        } else {
          newItems = [].concat(items.slice(0, index), [newItem], items.slice(index));
        }
      }

      return newItems.map(function (item, index) {
        return _extends({}, item, {
          index: index
        });
      });
    });
  }, // set is a state setter initialized by the useDescendants hook.
  // We can safely ignore the lint warning here because it will not change
  // between renders.
  // eslint-disable-next-line react-hooks/exhaustive-deps
  []);
  var unregisterDescendant = useCallback(function (element) {
    if (!element) {
      return;
    }

    set(function (items) {
      return items.filter(function (item) {
        return element !== item.element;
      });
    });
  }, // set is a state setter initialized by the useDescendants hook.
  // We can safely ignore the lint warning here because it will not change
  // between renders.
  // eslint-disable-next-line react-hooks/exhaustive-deps
  []);
  return /*#__PURE__*/React__default.createElement(Ctx.Provider, {
    value: useMemo(function () {
      return {
        descendants: items,
        registerDescendant: registerDescendant,
        unregisterDescendant: unregisterDescendant
      };
    }, [items, registerDescendant, unregisterDescendant])
  }, children);
}
/**
 * Testing this as an abstraction for compound components that use keyboard
 * navigation. Hoping this will help us prevent bugs and mismatched behavior
 * across various components, but it may also prove to be too messy of an
 * abstraction in the end.
 *
 * Currently used in:
 *   - Tabs
 *   - Accordion
 *
 * @param context
 * @param options
 */


function useDescendantKeyDown(context, options) {
  var _useContext2 = useContext(context),
      descendants = _useContext2.descendants;

  var callback = options.callback,
      currentIndex = options.currentIndex,
      filter = options.filter,
      _options$key = options.key,
      key = _options$key === void 0 ? "index" : _options$key,
      _options$orientation = options.orientation,
      orientation = _options$orientation === void 0 ? "vertical" : _options$orientation,
      _options$rotate = options.rotate,
      rotate = _options$rotate === void 0 ? true : _options$rotate,
      _options$rtl = options.rtl,
      rtl = _options$rtl === void 0 ? false : _options$rtl;
  var index = currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1;
  return function handleKeyDown(event) {
    if (!["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(event.key)) {
      return;
    } // If we use a filter function, we need to re-index our descendants array
    // so that filtered descendent elements aren't selected.


    var selectableDescendants = filter ? descendants.filter(filter) : descendants; // Current index should map to the updated array vs. the original
    // descendants array.

    if (filter) {
      index = selectableDescendants.findIndex(function (descendant) {
        return descendant.index === currentIndex;
      });
    } // We need some options for any of this to work!


    if (!selectableDescendants.length) {
      return;
    }

    function getNextOption() {
      var atBottom = index === selectableDescendants.length - 1;
      return atBottom ? rotate ? getFirstOption() : selectableDescendants[index] : selectableDescendants[(index + 1) % selectableDescendants.length];
    }

    function getPreviousOption() {
      var atTop = index === 0;
      return atTop ? rotate ? getLastOption() : selectableDescendants[index] : selectableDescendants[(index - 1 + selectableDescendants.length) % selectableDescendants.length];
    }

    function getFirstOption() {
      return selectableDescendants[0];
    }

    function getLastOption() {
      return selectableDescendants[selectableDescendants.length - 1];
    }

    switch (event.key) {
      case "ArrowDown":
        if (orientation === "vertical" || orientation === "both") {
          event.preventDefault();
          var next = getNextOption();
          callback(key === "option" ? next : next[key]);
        }

        break;

      case "ArrowUp":
        if (orientation === "vertical" || orientation === "both") {
          event.preventDefault();
          var prev = getPreviousOption();
          callback(key === "option" ? prev : prev[key]);
        }

        break;

      case "ArrowLeft":
        if (orientation === "horizontal" || orientation === "both") {
          event.preventDefault();
          var nextOrPrev = (rtl ? getNextOption : getPreviousOption)();
          callback(key === "option" ? nextOrPrev : nextOrPrev[key]);
        }

        break;

      case "ArrowRight":
        if (orientation === "horizontal" || orientation === "both") {
          event.preventDefault();
          var prevOrNext = (rtl ? getPreviousOption : getNextOption)();
          callback(key === "option" ? prevOrNext : prevOrNext[key]);
        }

        break;

      case "PageUp":
        event.preventDefault();
        var prevOrFirst = (event.ctrlKey ? getPreviousOption : getFirstOption)();
        callback(key === "option" ? prevOrFirst : prevOrFirst[key]);
        break;

      case "Home":
        event.preventDefault();
        var first = getFirstOption();
        callback(key === "option" ? first : first[key]);
        break;

      case "PageDown":
        event.preventDefault();
        var nextOrLast = (event.ctrlKey ? getNextOption : getLastOption)();
        callback(key === "option" ? nextOrLast : nextOrLast[key]);
        break;

      case "End":
        event.preventDefault();
        var last = getLastOption();
        callback(key === "option" ? last : last[key]);
        break;
    }
  };
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

var TabsDescendantsContext = /*#__PURE__*/createDescendantContext("TabsDescendantsContext");
var TabPanelDescendantsContext = /*#__PURE__*/createDescendantContext("TabPanelDescendantsContext");
var TabsContext = /*#__PURE__*/createNamedContext("TabsContext", {});
var TabsKeyboardActivation;

(function (TabsKeyboardActivation) {
  TabsKeyboardActivation["Auto"] = "auto";
  TabsKeyboardActivation["Manual"] = "manual";
})(TabsKeyboardActivation || (TabsKeyboardActivation = {}));

var TabsOrientation;

(function (TabsOrientation) {
  TabsOrientation["Horizontal"] = "horizontal";
  TabsOrientation["Vertical"] = "vertical";
})(TabsOrientation || (TabsOrientation = {})); ////////////////////////////////////////////////////////////////////////////////

/**
 * Tabs
 *
 * The parent component of the tab interface.
 *
 * @see Docs https://reach.tech/tabs#tabs
 */


var Tabs$1 = /*#__PURE__*/forwardRefWithAs(function Tabs(_ref, ref) {
  var _props$id;

  var _ref$as = _ref.as,
      Comp = _ref$as === void 0 ? "div" : _ref$as,
      children = _ref.children,
      defaultIndex = _ref.defaultIndex,
      _ref$orientation = _ref.orientation,
      orientation = _ref$orientation === void 0 ? TabsOrientation.Horizontal : _ref$orientation,
      _ref$index = _ref.index,
      controlledIndex = _ref$index === void 0 ? undefined : _ref$index,
      _ref$keyboardActivati = _ref.keyboardActivation,
      keyboardActivation = _ref$keyboardActivati === void 0 ? TabsKeyboardActivation.Auto : _ref$keyboardActivati,
      onChange = _ref.onChange,
      _ref$readOnly = _ref.readOnly,
      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
      props = _objectWithoutPropertiesLoose(_ref, ["as", "children", "defaultIndex", "orientation", "index", "keyboardActivation", "onChange", "readOnly"]);

  var isControlled = useRef(controlledIndex != null);
  useControlledSwitchWarning(controlledIndex, "index", "Tabs");

  var _id = useId(props.id);

  var id = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : makeId("tabs", _id); // We only manage focus if the user caused the update vs. a new controlled
  // index coming in.

  var userInteractedRef = useRef(false);
  var selectedPanelRef = useRef(null);
  var isRTL = useRef(false);

  var _useControlledState = useControlledState(controlledIndex, defaultIndex !== null && defaultIndex !== void 0 ? defaultIndex : 0),
      selectedIndex = _useControlledState[0],
      setSelectedIndex = _useControlledState[1];

  var _useState = useState(-1),
      focusedIndex = _useState[0],
      setFocusedIndex = _useState[1];

  var _useDescendantsInit = useDescendantsInit(),
      tabs = _useDescendantsInit[0],
      setTabs = _useDescendantsInit[1];

  var context = useMemo(function () {
    return {
      focusedIndex: focusedIndex,
      id: id,
      isControlled: isControlled.current,
      isRTL: isRTL,
      keyboardActivation: keyboardActivation,
      onFocusPanel: function onFocusPanel() {
        if (selectedPanelRef.current && isFunction(selectedPanelRef.current.focus)) {
          selectedPanelRef.current.focus();
        }
      },
      onSelectTab: readOnly ? noop : function (index) {
        userInteractedRef.current = true;
        onChange && onChange(index);
        setSelectedIndex(index);
      },
      onSelectTabWithKeyboard: readOnly ? noop : function (index) {
        userInteractedRef.current = true;

        switch (keyboardActivation) {
          case TabsKeyboardActivation.Manual:
            var tabElement = tabs[index] && tabs[index].element;

            if (tabElement && isFunction(tabElement.focus)) {
              tabElement.focus();
            }

            return;

          case TabsKeyboardActivation.Auto:
          default:
            onChange && onChange(index);
            setSelectedIndex(index);
            return;
        }
      },
      orientation: orientation,
      selectedIndex: selectedIndex,
      selectedPanelRef: selectedPanelRef,
      setFocusedIndex: setFocusedIndex,
      setSelectedIndex: setSelectedIndex,
      userInteractedRef: userInteractedRef
    };
  }, [focusedIndex, id, keyboardActivation, onChange, orientation, readOnly, selectedIndex, setSelectedIndex, tabs]);
  useEffect(function () {
    return checkStyles("tabs");
  }, []);
  return /*#__PURE__*/React__default.createElement(DescendantProvider, {
    context: TabsDescendantsContext,
    items: tabs,
    set: setTabs
  }, /*#__PURE__*/React__default.createElement(TabsContext.Provider, {
    value: context
  }, /*#__PURE__*/React__default.createElement(Comp, Object.assign({}, props, {
    ref: ref,
    "data-reach-tabs": "",
    "data-orientation": orientation,
    id: props.id
  }), isFunction(children) ? children({
    focusedIndex: focusedIndex,
    id: id,
    selectedIndex: selectedIndex
  }) : children)));
});

if (process.env.NODE_ENV !== "production") {
  Tabs$1.displayName = "Tabs";
  Tabs$1.propTypes = {
    children: PropTypes.node.isRequired,
    onChange: PropTypes.func,
    orientation: /*#__PURE__*/PropTypes.oneOf( /*#__PURE__*/Object.values(TabsOrientation)),
    index: function index(props, name, compName, location, propName) {
      var val = props[name];

      if (props.index > -1 && props.onChange == null && props.readOnly !== true) {
        return new Error("You provided a value prop to `" + compName + "` without an `onChange` handler. This will render a read-only tabs element. If the tabs should be mutable use `defaultIndex`. Otherwise, set `onChange`.");
      } else if (val != null && !isNumber(val)) {
        return new Error("Invalid prop `" + propName + "` supplied to `" + compName + "`. Expected `number`, received `" + (Array.isArray(val) ? "array" : _typeof(val)) + "`.");
      }

      return null;
    },
    defaultIndex: PropTypes.number
  };
} ////////////////////////////////////////////////////////////////////////////////

/**
 * TabList
 *
 * The parent component of the tabs.
 *
 * @see Docs https://reach.tech/tabs#tablist
 */


var TabListImpl = /*#__PURE__*/forwardRefWithAs(function TabList(_ref2, forwardedRef) {
  var children = _ref2.children,
      _ref2$as = _ref2.as,
      Comp = _ref2$as === void 0 ? "div" : _ref2$as,
      onKeyDown = _ref2.onKeyDown,
      props = _objectWithoutPropertiesLoose(_ref2, ["children", "as", "onKeyDown"]);

  var _useContext = useContext(TabsContext),
      focusedIndex = _useContext.focusedIndex,
      isControlled = _useContext.isControlled,
      isRTL = _useContext.isRTL,
      keyboardActivation = _useContext.keyboardActivation,
      onSelectTabWithKeyboard = _useContext.onSelectTabWithKeyboard,
      orientation = _useContext.orientation,
      selectedIndex = _useContext.selectedIndex,
      setSelectedIndex = _useContext.setSelectedIndex;

  var tabs = useDescendants(TabsDescendantsContext);
  var ownRef = useRef(null);
  var ref = useForkedRef(forwardedRef, ownRef);
  useEffect(function () {
    if (ownRef.current && (ownRef.current.ownerDocument && ownRef.current.ownerDocument.dir === "rtl" || getElementComputedStyle(ownRef.current, "direction") === "rtl")) {
      isRTL.current = true;
    }
  }, [isRTL]);
  var handleKeyDown = useEventCallback(wrapEvent(onKeyDown, useDescendantKeyDown(TabsDescendantsContext, {
    currentIndex: keyboardActivation === TabsKeyboardActivation.Manual ? focusedIndex : selectedIndex,
    orientation: orientation,
    rotate: true,
    callback: onSelectTabWithKeyboard,
    filter: function filter(tab) {
      return !tab.disabled;
    },
    rtl: isRTL.current
  })));
  useIsomorphicLayoutEffect(function () {
    var _tabs$selectedIndex; // In the event an uncontrolled component's selected index is disabled,
    // (this should only happen if the first tab is disabled and no default
    // index is set), we need to override the selection to the next selectable
    // index value.


    if (!isControlled && boolOrBoolString((_tabs$selectedIndex = tabs[selectedIndex]) === null || _tabs$selectedIndex === void 0 ? void 0 : _tabs$selectedIndex.disabled)) {
      var next = tabs.find(function (tab) {
        return !tab.disabled;
      });

      if (next) {
        setSelectedIndex(next.index);
      }
    }
  }, [tabs, isControlled, selectedIndex, setSelectedIndex]);
  return /*#__PURE__*/React__default.createElement(Comp // The element that serves as the container for the set of tabs has role
  // `tablist`
  // https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel
  , Object.assign({
    // The element that serves as the container for the set of tabs has role
    // `tablist`
    // https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel
    role: "tablist",
    "aria-orientation": orientation
  }, props, {
    "data-reach-tab-list": "",
    ref: ref,
    onKeyDown: handleKeyDown
  }), Children.map(children, function (child, index) {
    // TODO: Remove in 1.0
    return cloneValidElement(child, {
      isSelected: index === selectedIndex
    });
  }));
});

if (process.env.NODE_ENV !== "production") {
  TabListImpl.displayName = "TabList";
  TabListImpl.propTypes = {
    as: PropTypes.any,
    children: PropTypes.node
  };
}

var TabList$1 = /*#__PURE__*/memoWithAs(TabListImpl);

if (process.env.NODE_ENV !== "production") {
  TabList$1.displayName = "TabList";
}
/**
 * Tab
 *
 * The interactive element that changes the selected panel.
 *
 * @see Docs https://reach.tech/tabs#tab
 */


var Tab$1 = /*#__PURE__*/forwardRefWithAs(function Tab(_ref3, forwardedRef) {
  var children = _ref3.children;
      _ref3.isSelected;
      var _ref3$as = _ref3.as,
      Comp = _ref3$as === void 0 ? "button" : _ref3$as,
      indexProp = _ref3.index,
      disabled = _ref3.disabled,
      onBlur = _ref3.onBlur,
      onFocus = _ref3.onFocus,
      props = _objectWithoutPropertiesLoose(_ref3, ["children", "isSelected", "as", "index", "disabled", "onBlur", "onFocus"]);

  var _useContext2 = useContext(TabsContext),
      tabsId = _useContext2.id,
      onSelectTab = _useContext2.onSelectTab,
      orientation = _useContext2.orientation,
      selectedIndex = _useContext2.selectedIndex,
      userInteractedRef = _useContext2.userInteractedRef,
      setFocusedIndex = _useContext2.setFocusedIndex;

  var ownRef = useRef(null);
  var ref = useForkedRef(forwardedRef, ownRef);
  var index = useDescendant({
    element: ownRef.current,
    disabled: !!disabled
  }, TabsDescendantsContext, indexProp);
  var htmlType = Comp === "button" && props.type == null ? "button" : props.type;
  var isSelected = index === selectedIndex;

  function onSelect() {
    onSelectTab(index);
  }

  useUpdateEffect(function () {
    if (isSelected && ownRef.current && userInteractedRef.current) {
      userInteractedRef.current = false;

      if (isFunction(ownRef.current.focus)) {
        ownRef.current.focus();
      }
    }
  }, [isSelected, userInteractedRef]);
  var handleFocus = useEventCallback(wrapEvent(onFocus, function () {
    setFocusedIndex(index);
  }));
  var handleBlur = useEventCallback(wrapEvent(onBlur, function () {
    setFocusedIndex(-1);
  }));
  return /*#__PURE__*/React__default.createElement(Comp // Each element with role `tab` has the property `aria-controls` referring
  // to its associated `tabpanel` element.
  // https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel
  , Object.assign({
    "aria-controls": makeId(tabsId, "panel", index),
    "aria-disabled": disabled,
    "aria-selected": isSelected,
    // Each element that serves as a tab has role `tab` and is contained
    // within the element with role `tablist`.
    // https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel
    role: "tab",
    tabIndex: isSelected ? 0 : -1
  }, props, {
    ref: ref,
    "data-reach-tab": "",
    "data-orientation": orientation,
    "data-selected": isSelected ? "" : undefined,
    disabled: disabled,
    id: makeId(tabsId, "tab", index),
    onClick: onSelect,
    onFocus: handleFocus,
    onBlur: handleBlur,
    type: htmlType
  }), children);
});

if (process.env.NODE_ENV !== "production") {
  Tab$1.displayName = "Tab";
  Tab$1.propTypes = {
    children: PropTypes.node,
    disabled: PropTypes.bool
  };
} ////////////////////////////////////////////////////////////////////////////////

/**
 * TabPanels
 *
 * The parent component of the panels.
 *
 * @see Docs https://reach.tech/tabs#tabpanels
 */


var TabPanelsImpl = /*#__PURE__*/forwardRefWithAs(function TabPanels(_ref4, forwardedRef) {
  var children = _ref4.children,
      _ref4$as = _ref4.as,
      Comp = _ref4$as === void 0 ? "div" : _ref4$as,
      props = _objectWithoutPropertiesLoose(_ref4, ["children", "as"]);

  var ownRef = useRef();
  var ref = useForkedRef(ownRef, forwardedRef);

  var _useDescendantsInit2 = useDescendantsInit(),
      tabPanels = _useDescendantsInit2[0],
      setTabPanels = _useDescendantsInit2[1];

  return /*#__PURE__*/React__default.createElement(DescendantProvider, {
    context: TabPanelDescendantsContext,
    items: tabPanels,
    set: setTabPanels
  }, /*#__PURE__*/React__default.createElement(Comp, Object.assign({}, props, {
    ref: ref,
    "data-reach-tab-panels": ""
  }), children));
});

if (process.env.NODE_ENV !== "production") {
  TabPanelsImpl.displayName = "TabPanels";
  TabPanelsImpl.propTypes = {
    as: PropTypes.any,
    children: PropTypes.node
  };
}

var TabPanels$1 = /*#__PURE__*/memoWithAs(TabPanelsImpl);

if (process.env.NODE_ENV !== "production") {
  TabPanels$1.displayName = "TabPanels";
}
/**
 * TabPanel
 *
 * The panel that displays when it's corresponding tab is active.
 *
 * @see Docs https://reach.tech/tabs#tabpanel
 */


var TabPanel$1 = /*#__PURE__*/forwardRefWithAs(function TabPanel(_ref5, forwardedRef) {
  var children = _ref5.children;
      _ref5["aria-label"];
      var _ref5$as = _ref5.as,
      Comp = _ref5$as === void 0 ? "div" : _ref5$as,
      props = _objectWithoutPropertiesLoose(_ref5, ["children", "aria-label", "as"]);

  var _useContext3 = useContext(TabsContext),
      selectedPanelRef = _useContext3.selectedPanelRef,
      selectedIndex = _useContext3.selectedIndex,
      tabsId = _useContext3.id;

  var ownRef = useRef(null);
  var index = useDescendant({
    element: ownRef.current
  }, TabPanelDescendantsContext);
  var id = makeId(tabsId, "panel", index); // Because useDescendant will always return -1 on the first render,
  // `isSelected` will briefly be false for all tabs. We set a tab panel's
  // hidden attribute based `isSelected` being false, meaning that all tabs
  // are initially hidden. This makes it impossible for consumers to do
  // certain things, like focus an element inside the active tab panel when
  // the page loads. So what we can do is track that a panel is "ready" to be
  // hidden once effects are run (descendants work their magic in
  // useLayoutEffect, so we can set our ref in useEffecct to run later). We
  // can use a ref instead of state because we're always geting a re-render
  // anyway thanks to descendants. This is a little more coupled to the
  // implementation details of descendants than I'd like, but we'll add a test
  // to (hopefully) catch any regressions.

  var isSelected = index === selectedIndex;
  var readyToHide = useRef(false);
  var hidden = readyToHide.current ? !isSelected : false;
  React__default.useEffect(function () {
    readyToHide.current = true;
  }, []);
  var ref = useForkedRef(forwardedRef, ownRef, isSelected ? selectedPanelRef : null);
  return /*#__PURE__*/React__default.createElement(Comp // Each element with role `tabpanel` has the property `aria-labelledby`
  // referring to its associated tab element.
  , Object.assign({
    "aria-labelledby": makeId(tabsId, "tab", index),
    hidden: hidden,
    // Each element that contains the content panel for a tab has role
    // `tabpanel`.
    // https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel
    role: "tabpanel",
    tabIndex: isSelected ? 0 : -1
  }, props, {
    ref: ref,
    "data-reach-tab-panel": "",
    id: id
  }), children);
});

if (process.env.NODE_ENV !== "production") {
  TabPanel$1.displayName = "TabPanel";
  TabPanel$1.propTypes = {
    as: PropTypes.any,
    children: PropTypes.node
  };
} ////////////////////////////////////////////////////////////////////////////////

var _excluded = ["children", "className", "isSelected"],
    _excluded2 = ["children", "className", "orientation"],
    _excluded3 = ["children", "className"],
    _excluded4 = ["children", "className"],
    _excluded5 = ["children", "className"];

var byAxis = function byAxis(axis, verticalPref, horizontalPref) {
  return axis === "horizontal" ? horizontalPref : verticalPref;
};

var TabContext = /*#__PURE__*/createContext();
function Tab(_ref) {
  var children = _ref.children,
      className = _ref.className,
      isSelected = _ref.isSelected,
      props = _objectWithoutProperties(_ref, _excluded);

  var orientation = useContext(TabContext);
  className = cx(className, "block whitespace-no-wrap p-3 font-semibold text-sm text-left", {
    "text-gray-700 hover:text-gray-800": !isSelected,
    "border-b-2 border-transparent focus:outline-none": orientation === "horizontal",
    "focus:outline-blue rounded-sm": orientation === "vertical",
    "bg-gray-50 text-gray-800": isSelected && orientation === 'vertical',
    "border-red-500 text-red-500": isSelected && orientation === 'horizontal'
  });
  return /*#__PURE__*/React__default.createElement(Tab$1, _extends$1({
    className: className,
    style: {
      minWidth: byAxis(orientation, "100px", null)
    }
  }, props), children);
}
function Tabs(_ref2) {
  var children = _ref2.children,
      className = _ref2.className,
      _ref2$orientation = _ref2.orientation,
      orientation = _ref2$orientation === void 0 ? "vertical" : _ref2$orientation,
      props = _objectWithoutProperties(_ref2, _excluded2);

  className = cx(className, byAxis(orientation, "flex", ""));
  return /*#__PURE__*/React__default.createElement(Tabs$1, _extends$1({
    className: className
  }, props, {
    orientation: orientation
  }), /*#__PURE__*/React__default.createElement(TabContext.Provider, {
    value: orientation
  }, children));
}
function TabList(_ref3) {
  var children = _ref3.children,
      className = _ref3.className,
      props = _objectWithoutProperties(_ref3, _excluded3);

  var orientation = useContext(TabContext);
  className = cx(className, byAxis(orientation, "flex-col", "flex"));
  return /*#__PURE__*/React__default.createElement(TabList$1, _extends$1({
    className: className
  }, props), children);
}
function TabPanels(_ref4) {
  var children = _ref4.children,
      className = _ref4.className,
      props = _objectWithoutProperties(_ref4, _excluded4);

  var orientation = useContext(TabContext);
  className = cx(className, byAxis(orientation, "flex-grow", ""));
  return /*#__PURE__*/React__default.createElement(TabPanels$1, _extends$1({
    className: className
  }, props), children);
}
function TabPanel(_ref5) {
  var children = _ref5.children,
      className = _ref5.className,
      props = _objectWithoutProperties(_ref5, _excluded5);

  className = cx(className, "focus:outline-none");
  return /*#__PURE__*/React__default.createElement(TabPanel$1, _extends$1({
    className: className
  }, props), children);
}

export { Tab, TabList, TabPanel, TabPanels, Tabs };
