text: 'use strict';
  
  Object.defineProperty(exports, '__esModule', { value: true });
  
  function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
  
  var React = require('react');
  var React__default = _interopDefault(React);
  var PropTypes = _interopDefault(require('prop-types'));
  var descendants = require('@reach/descendants');
  var utils = require('@reach/utils');
  var autoId = require('@reach/auto-id');
  
  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__*/descendants.createDescendantContext("TabsDescendantsContext");
  var TabPanelDescendantsContext = /*#__PURE__*/descendants.createDescendantContext("TabPanelDescendantsContext");
  var TabsContext = /*#__PURE__*/utils.createNamedContext("TabsContext", {});
  
  (function (TabsKeyboardActivation) {
    TabsKeyboardActivation["Auto"] = "auto";
    TabsKeyboardActivation["Manual"] = "manual";
  })(exports.TabsKeyboardActivation || (exports.TabsKeyboardActivation = {}));
  
  (function (TabsOrientation) {
    TabsOrientation["Horizontal"] = "horizontal";
    TabsOrientation["Vertical"] = "vertical";
  })(exports.TabsOrientation || (exports.TabsOrientation = {})); ////////////////////////////////////////////////////////////////////////////////
  
  /**
   * Tabs
   *
   * The parent component of the tab interface.
   *
   * @see Docs https://reacttraining.com/reach-ui/tabs#tabs
   */
  
  
  var Tabs = /*#__PURE__*/utils.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 ? exports.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 ? exports.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 = React.useRef(controlledIndex != null);
    utils.useControlledSwitchWarning(controlledIndex, "index", "Tabs");
  
    var _id = autoId.useId(props.id);
  
    var id = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : utils.makeId("tabs", _id); // We only manage focus if the user caused the update vs. a new controlled
    // index coming in.
  
    var userInteractedRef = React.useRef(false);
    var selectedPanelRef = React.useRef(null);
    var isRTL = React.useRef(false);
  
    var _useControlledState = utils.useControlledState(controlledIndex, defaultIndex !== null && defaultIndex !== void 0 ? defaultIndex : 0),
        selectedIndex = _useControlledState[0],
        setSelectedIndex = _useControlledState[1];
  
    var _useState = React.useState(-1),
        focusedIndex = _useState[0],
        setFocusedIndex = _useState[1];
  
    var _useDescendants = descendants.useDescendants(),
        tabs = _useDescendants[0],
        setTabs = _useDescendants[1];
  
    var context = React.useMemo(function () {
      return {
        focusedIndex: focusedIndex,
        id: id,
        isControlled: isControlled.current,
        isRTL: isRTL,
        keyboardActivation: keyboardActivation,
        onFocusPanel: function onFocusPanel() {
          var _selectedPanelRef$cur;
  
          (_selectedPanelRef$cur = selectedPanelRef.current) === null || _selectedPanelRef$cur === void 0 ? void 0 : _selectedPanelRef$cur.focus();
        },
        onSelectTab: readOnly ? utils.noop : function (index) {
          userInteractedRef.current = true;
          onChange && onChange(index);
          setSelectedIndex(index);
        },
        onSelectTabWithKeyboard: readOnly ? utils.noop : function (index) {
          var _tabs$index$element;
  
          userInteractedRef.current = true;
  
          switch (keyboardActivation) {
            case exports.TabsKeyboardActivation.Manual:
              (_tabs$index$element = tabs[index].element) === null || _tabs$index$element === void 0 ? void 0 : _tabs$index$element.focus();
              return;
  
            case exports.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]);
    React.useEffect(function () {
      return utils.checkStyles("tabs");
    }, []);
    return React__default.createElement(descendants.DescendantProvider, {
      context: TabsDescendantsContext,
      items: tabs,
      set: setTabs
    }, React__default.createElement(TabsContext.Provider, {
      value: context
    }, React__default.createElement(Comp, Object.assign({}, props, {
      ref: ref,
      "data-reach-tabs": "",
      "data-orientation": orientation,
      id: props.id
    }), utils.isFunction(children) ? children({
      focusedIndex: focusedIndex,
      id: id,
      selectedIndex: selectedIndex
    }) : children)));
  });
  
  {
    Tabs.displayName = "Tabs";
    Tabs.propTypes = {
      children: PropTypes.node.isRequired,
      onChange: PropTypes.func,
      orientation: /*#__PURE__*/PropTypes.oneOf( /*#__PURE__*/Object.values(exports.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 (props[name] != null && !utils.isNumber(props[name])) {
          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://reacttraining.com/reach-ui/tabs#tablist
   */
  
  
  var TabListImpl = /*#__PURE__*/utils.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 = React.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 _useContext2 = React.useContext(TabsDescendantsContext),
        tabs = _useContext2.descendants;
  
    var ownRef = React.useRef(null);
    var ref = utils.useForkedRef(forwardedRef, ownRef);
    React.useEffect(function () {
      if (ownRef.current && (ownRef.current.ownerDocument && ownRef.current.ownerDocument.dir === "rtl" || utils.getElementComputedStyle(ownRef.current, "direction") === "rtl")) {
        isRTL.current = true;
      }
    }, [isRTL]);
    var handleKeyDown = utils.useEventCallback(utils.wrapEvent(onKeyDown, descendants.useDescendantKeyDown(TabsDescendantsContext, {
      currentIndex: keyboardActivation === exports.TabsKeyboardActivation.Manual ? focusedIndex : selectedIndex,
      orientation: orientation,
      rotate: true,
      callback: onSelectTabWithKeyboard,
      filter: function filter(tab) {
        return !tab.disabled;
      },
      rtl: isRTL.current
    })));
    utils.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 && utils.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 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
    }), React.Children.map(children, function (child, index) {
      // TODO: Remove in 1.0
      return utils.cloneValidElement(child, {
        isSelected: index === selectedIndex
      });
    }));
  });
  var TabList = /*#__PURE__*/React.memo(TabListImpl);
  
  {
    TabList.displayName = "TabList";
    TabListImpl.displayName = "TabList";
    TabListImpl.propTypes = {
      as: PropTypes.any,
      children: PropTypes.node
    };
  }
  
  /**
   * Tab
   *
   * The interactive element that changes the selected panel.
   *
   * @see Docs https://reacttraining.com/reach-ui/tabs#tab
   */
  
  var Tab = /*#__PURE__*/utils.forwardRefWithAs(function Tab(_ref3, forwardedRef) {
    var children = _ref3.children,
        _ = _ref3.isSelected,
        _ref3$as = _ref3.as,
        Comp = _ref3$as === void 0 ? "button" : _ref3$as,
        disabled = _ref3.disabled,
        onBlur = _ref3.onBlur,
        onFocus = _ref3.onFocus,
        props = _objectWithoutPropertiesLoose(_ref3, ["children", "isSelected", "as", "disabled", "onBlur", "onFocus"]);
  
    var _useContext3 = React.useContext(TabsContext),
        tabsId = _useContext3.id,
        onSelectTab = _useContext3.onSelectTab,
        orientation = _useContext3.orientation,
        selectedIndex = _useContext3.selectedIndex,
        userInteractedRef = _useContext3.userInteractedRef,
        setFocusedIndex = _useContext3.setFocusedIndex;
  
    var ownRef = React.useRef(null);
    var ref = utils.useForkedRef(forwardedRef, ownRef);
    var index = descendants.useDescendant({
      element: ownRef.current,
      context: TabsDescendantsContext,
      disabled: !!disabled
    });
    var isSelected = index === selectedIndex;
  
    function onSelect() {
      onSelectTab(index);
    }
  
    utils.useUpdateEffect(function () {
      if (isSelected && ownRef.current && userInteractedRef.current) {
        userInteractedRef.current = false;
        ownRef.current.focus();
      }
    }, [isSelected]);
    var handleFocus = utils.useEventCallback(utils.wrapEvent(onFocus, function () {
      setFocusedIndex(index);
    }));
    var handleBlur = utils.useEventCallback(utils.wrapEvent(onFocus, function () {
      setFocusedIndex(-1);
    }));
    return 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": utils.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: utils.makeId(tabsId, "tab", index),
      onClick: onSelect,
      onFocus: handleFocus,
      onBlur: handleBlur
    }), children);
  });
  
  {
    Tab.displayName = "Tab";
    Tab.propTypes = {
      children: PropTypes.node,
      disabled: PropTypes.bool
    };
  } ////////////////////////////////////////////////////////////////////////////////
  
  /**
   * TabPanels
   *
   * The parent component of the panels.
   *
   * @see Docs https://reacttraining.com/reach-ui/tabs#tabpanels
   */
  
  
  var TabPanelsImpl = /*#__PURE__*/utils.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 = React.useRef();
    var ref = utils.useForkedRef(ownRef, forwardedRef);
  
    var _useDescendants2 = descendants.useDescendants(),
        tabPanels = _useDescendants2[0],
        setTabPanels = _useDescendants2[1];
  
    return React__default.createElement(descendants.DescendantProvider, {
      context: TabPanelDescendantsContext,
      items: tabPanels,
      set: setTabPanels
    }, React__default.createElement(Comp, Object.assign({}, props, {
      ref: ref,
      "data-reach-tab-panels": ""
    }), children));
  });
  var TabPanels = /*#__PURE__*/React.memo(TabPanelsImpl);
  
  {
    TabPanels.displayName = "TabPanels";
    TabPanelsImpl.displayName = "TabPanels";
    TabPanelsImpl.propTypes = {
      as: PropTypes.any,
      children: PropTypes.node
    };
  }
  
  /**
   * TabPanel
   *
   * The panel that displays when it's corresponding tab is active.
   *
   * @see Docs https://reacttraining.com/reach-ui/tabs#tabpanel
   */
  
  var TabPanel = /*#__PURE__*/utils.forwardRefWithAs(function TabPanel(_ref5, forwardedRef) {
    var children = _ref5.children,
        ariaLabel = _ref5["aria-label"],
        _ref5$as = _ref5.as,
        Comp = _ref5$as === void 0 ? "div" : _ref5$as,
        props = _objectWithoutPropertiesLoose(_ref5, ["children", "aria-label", "as"]);
  
    var _useContext4 = React.useContext(TabsContext),
        selectedPanelRef = _useContext4.selectedPanelRef,
        selectedIndex = _useContext4.selectedIndex,
        tabsId = _useContext4.id;
  
    var ownRef = React.useRef(null);
    var index = descendants.useDescendant({
      element: ownRef.current,
      context: TabPanelDescendantsContext
    });
    var isSelected = index === selectedIndex;
    var id = utils.makeId(tabsId, "panel", index);
    var ref = utils.useForkedRef(forwardedRef, ownRef, isSelected ? selectedPanelRef : null);
    return React__default.createElement(Comp // Each element with role `tabpanel` has the property `aria-labelledby`
    // referring to its associated tab element.
    , Object.assign({
      "aria-labelledby": utils.makeId(tabsId, "tab", index),
      hidden: !isSelected,
      // 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);
  });
  
  {
    TabPanel.displayName = "TabPanel";
    TabPanel.propTypes = {
      as: PropTypes.any,
      children: PropTypes.node
    };
  } ////////////////////////////////////////////////////////////////////////////////
  
  /**
   * A hook that exposes data for a given `Tabs` component to its descendants.
   *
   * @see Docs https://reacttraining.com/reach-ui/tabs#usetabscontext
   */
  
  
  function useTabsContext() {
    var _useContext5 = React.useContext(TabsContext),
        focusedIndex = _useContext5.focusedIndex,
        id = _useContext5.id,
        selectedIndex = _useContext5.selectedIndex;
  
    return React.useMemo(function () {
      return {
        focusedIndex: focusedIndex,
        id: id,
        selectedIndex: selectedIndex
      };
    }, [focusedIndex, id, selectedIndex]);
  }
  
  exports.Tab = Tab;
  exports.TabList = TabList;
  exports.TabPanel = TabPanel;
  exports.TabPanels = TabPanels;
  exports.Tabs = Tabs;
  exports.useTabsContext = useTabsContext;
  //# sourceMappingURL=tabs.cjs.development.js.map
  