text: import _extends from "@babel/runtime/helpers/esm/extends";
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  import * as React from 'react';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import withStyles from '../styles/withStyles';
  import capitalize from '../utils/capitalize';
  import Paper from '../Paper';
  export var styles = function styles(theme) {
    var backgroundColorDefault = theme.palette.type === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
    return {
      /* Styles applied to the root element. */
      root: {
        display: 'flex',
        flexDirection: 'column',
        width: '100%',
        boxSizing: 'border-box',
        // Prevent padding issue with the Modal and fixed positioned AppBar.
        zIndex: theme.zIndex.appBar,
        flexShrink: 0
      },
  
      /* Styles applied to the root element if `position="fixed"`. */
      positionFixed: {
        position: 'fixed',
        top: 0,
        left: 'auto',
        right: 0,
        '@media print': {
          // Prevent the app bar to be visible on each printed page.
          position: 'absolute'
        }
      },
  
      /* Styles applied to the root element if `position="absolute"`. */
      positionAbsolute: {
        position: 'absolute',
        top: 0,
        left: 'auto',
        right: 0
      },
  
      /* Styles applied to the root element if `position="sticky"`. */
      positionSticky: {
        // ⚠️ sticky is not supported by IE 11.
        position: 'sticky',
        top: 0,
        left: 'auto',
        right: 0
      },
  
      /* Styles applied to the root element if `position="static"`. */
      positionStatic: {
        position: 'static'
      },
  
      /* Styles applied to the root element if `position="relative"`. */
      positionRelative: {
        position: 'relative'
      },
  
      /* Styles applied to the root element if `color="default"`. */
      colorDefault: {
        backgroundColor: backgroundColorDefault,
        color: theme.palette.getContrastText(backgroundColorDefault)
      },
  
      /* Styles applied to the root element if `color="primary"`. */
      colorPrimary: {
        backgroundColor: theme.palette.primary.main,
        color: theme.palette.primary.contrastText
      },
  
      /* Styles applied to the root element if `color="secondary"`. */
      colorSecondary: {
        backgroundColor: theme.palette.secondary.main,
        color: theme.palette.secondary.contrastText
      },
  
      /* Styles applied to the root element if `color="inherit"`. */
      colorInherit: {
        color: 'inherit'
      },
  
      /* Styles applied to the root element if `color="transparent"`. */
      colorTransparent: {
        backgroundColor: 'transparent',
        color: 'inherit'
      }
    };
  };
  var AppBar = /*#__PURE__*/React.forwardRef(function AppBar(props, ref) {
    var classes = props.classes,
        className = props.className,
        _props$color = props.color,
        color = _props$color === void 0 ? 'primary' : _props$color,
        _props$position = props.position,
        position = _props$position === void 0 ? 'fixed' : _props$position,
        other = _objectWithoutProperties(props, ["classes", "className", "color", "position"]);
  
    return /*#__PURE__*/React.createElement(Paper, _extends({
      square: true,
      component: "header",
      elevation: 4,
      className: clsx(classes.root, classes["position".concat(capitalize(position))], classes["color".concat(capitalize(color))], className, position === 'fixed' && 'mui-fixed'),
      ref: ref
    }, other));
  });
  process.env.NODE_ENV !== "production" ? AppBar.propTypes = {
    // ----------------------------- Warning --------------------------------
    // | These PropTypes are generated from the TypeScript type definitions |
    // |     To update them edit the d.ts file and run "yarn proptypes"     |
    // ----------------------------------------------------------------------
  
    /**
     * The content of the component.
     */
    children: PropTypes.node,
  
    /**
     * Override or extend the styles applied to the component.
     * See [CSS API](#css) below for more details.
     */
    classes: PropTypes.object,
  
    /**
     * @ignore
     */
    className: PropTypes.string,
  
    /**
     * The color of the component. It supports those theme colors that make sense for this component.
     */
    color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']),
  
    /**
     * The positioning type. The behavior of the different options is described
     * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
     * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
     */
    position: PropTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'sticky'])
  } : void 0;
  export default withStyles(styles, {
    name: 'MuiAppBar'
  })(AppBar);