text: import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  import _extends from "@babel/runtime/helpers/esm/extends";
  import * as React from 'react';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import withStyles from '../styles/withStyles';
  import ButtonBase from '../ButtonBase';
  import capitalize from '../utils/capitalize';
  import unsupportedProp from '../utils/unsupportedProp';
  export var styles = function styles(theme) {
    var _extends2;
  
    return {
      /* Styles applied to the root element. */
      root: _extends({}, theme.typography.button, (_extends2 = {
        maxWidth: 264,
        minWidth: 72,
        position: 'relative',
        boxSizing: 'border-box',
        minHeight: 48,
        flexShrink: 0,
        padding: '6px 12px'
      }, _defineProperty(_extends2, theme.breakpoints.up('sm'), {
        padding: '6px 24px'
      }), _defineProperty(_extends2, "overflow", 'hidden'), _defineProperty(_extends2, "whiteSpace", 'normal'), _defineProperty(_extends2, "textAlign", 'center'), _defineProperty(_extends2, theme.breakpoints.up('sm'), {
        minWidth: 160
      }), _extends2)),
  
      /* Styles applied to the root element if both `icon` and `label` are provided. */
      labelIcon: {
        minHeight: 72,
        paddingTop: 9,
        '& $wrapper > *:first-child': {
          marginBottom: 6
        }
      },
  
      /* Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor="inherit"`. */
      textColorInherit: {
        color: 'inherit',
        opacity: 0.7,
        '&$selected': {
          opacity: 1
        },
        '&$disabled': {
          opacity: 0.5
        }
      },
  
      /* Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor="primary"`. */
      textColorPrimary: {
        color: theme.palette.text.secondary,
        '&$selected': {
          color: theme.palette.primary.main
        },
        '&$disabled': {
          color: theme.palette.text.disabled
        }
      },
  
      /* Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor="secondary"`. */
      textColorSecondary: {
        color: theme.palette.text.secondary,
        '&$selected': {
          color: theme.palette.secondary.main
        },
        '&$disabled': {
          color: theme.palette.text.disabled
        }
      },
  
      /* Pseudo-class applied to the root element if `selected={true}` (controlled by the Tabs component). */
      selected: {},
  
      /* Pseudo-class applied to the root element if `disabled={true}` (controlled by the Tabs component). */
      disabled: {},
  
      /* Styles applied to the root element if `fullWidth={true}` (controlled by the Tabs component). */
      fullWidth: {
        flexShrink: 1,
        flexGrow: 1,
        flexBasis: 0,
        maxWidth: 'none'
      },
  
      /* Styles applied to the root element if `wrapped={true}`. */
      wrapped: {
        fontSize: theme.typography.pxToRem(12),
        lineHeight: 1.5
      },
  
      /* Styles applied to the `icon` and `label`'s wrapper element. */
      wrapper: {
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        flexDirection: 'column'
      }
    };
  };
  var Tab = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
    var classes = props.classes,
        className = props.className,
        _props$disabled = props.disabled,
        disabled = _props$disabled === void 0 ? false : _props$disabled,
        _props$disableFocusRi = props.disableFocusRipple,
        disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
        fullWidth = props.fullWidth,
        icon = props.icon,
        indicator = props.indicator,
        label = props.label,
        onChange = props.onChange,
        onClick = props.onClick,
        onFocus = props.onFocus,
        selected = props.selected,
        selectionFollowsFocus = props.selectionFollowsFocus,
        _props$textColor = props.textColor,
        textColor = _props$textColor === void 0 ? 'inherit' : _props$textColor,
        value = props.value,
        _props$wrapped = props.wrapped,
        wrapped = _props$wrapped === void 0 ? false : _props$wrapped,
        other = _objectWithoutProperties(props, ["classes", "className", "disabled", "disableFocusRipple", "fullWidth", "icon", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"]);
  
    var handleClick = function handleClick(event) {
      if (onChange) {
        onChange(event, value);
      }
  
      if (onClick) {
        onClick(event);
      }
    };
  
    var handleFocus = function handleFocus(event) {
      if (selectionFollowsFocus && !selected && onChange) {
        onChange(event, value);
      }
  
      if (onFocus) {
        onFocus(event);
      }
    };
  
    return /*#__PURE__*/React.createElement(ButtonBase, _extends({
      focusRipple: !disableFocusRipple,
      className: clsx(classes.root, classes["textColor".concat(capitalize(textColor))], className, disabled && classes.disabled, selected && classes.selected, label && icon && classes.labelIcon, fullWidth && classes.fullWidth, wrapped && classes.wrapped),
      ref: ref,
      role: "tab",
      "aria-selected": selected,
      disabled: disabled,
      onClick: handleClick,
      onFocus: handleFocus,
      tabIndex: selected ? 0 : -1
    }, other), /*#__PURE__*/React.createElement("span", {
      className: classes.wrapper
    }, icon, label), indicator);
  });
  process.env.NODE_ENV !== "production" ? Tab.propTypes = {
    /**
     * This prop isn't supported.
     * Use the `component` prop if you need to change the children structure.
     */
    children: unsupportedProp,
  
    /**
     * Override or extend the styles applied to the component.
     * See [CSS API](#css) below for more details.
     */
    classes: PropTypes.object.isRequired,
  
    /**
     * @ignore
     */
    className: PropTypes.string,
  
    /**
     * If `true`, the tab will be disabled.
     */
    disabled: PropTypes.bool,
  
    /**
     * If `true`, the  keyboard focus ripple will be disabled.
     */
    disableFocusRipple: PropTypes.bool,
  
    /**
     * If `true`, the ripple effect will be disabled.
     */
    disableRipple: PropTypes.bool,
  
    /**
     * @ignore
     */
    fullWidth: PropTypes.bool,
  
    /**
     * The icon element.
     */
    icon: PropTypes.node,
  
    /**
     * @ignore
     * For server-side rendering consideration, we let the selected tab
     * render the indicator.
     */
    indicator: PropTypes.node,
  
    /**
     * The label element.
     */
    label: PropTypes.node,
  
    /**
     * @ignore
     */
    onChange: PropTypes.func,
  
    /**
     * @ignore
     */
    onClick: PropTypes.func,
  
    /**
     * @ignore
     */
    onFocus: PropTypes.func,
  
    /**
     * @ignore
     */
    selected: PropTypes.bool,
  
    /**
     * @ignore
     */
    selectionFollowsFocus: PropTypes.bool,
  
    /**
     * @ignore
     */
    textColor: PropTypes.oneOf(['secondary', 'primary', 'inherit']),
  
    /**
     * You can provide your own value. Otherwise, we fallback to the child position index.
     */
    value: PropTypes.any,
  
    /**
     * Tab labels appear in a single row.
     * They can use a second line if needed.
     */
    wrapped: PropTypes.bool
  } : void 0;
  export default withStyles(styles, {
    name: 'MuiTab'
  })(Tab);