content: import _extends from "@babel/runtime/helpers/extends";
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
  import React from 'react';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import withStyles from '../styles/withStyles';
  import { fade } from '../styles/colorManipulator';
  export var styles = function styles(theme) {
    return {
      /* Styles applied to the root element. */
      root: {
        height: 1,
        margin: 0,
        // Reset browser default style.
        border: 'none',
        flexShrink: 0,
        backgroundColor: theme.palette.divider
      },
  
      /* Styles applied to the root element if `absolute={true}`. */
      absolute: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        width: '100%'
      },
  
      /* Styles applied to the root element if `variant="inset"`. */
      inset: {
        marginLeft: 72
      },
  
      /* Styles applied to the root element if `light={true}`. */
      light: {
        backgroundColor: fade(theme.palette.divider, 0.08)
      },
  
      /* Styles applied to the root element if `variant="middle"`. */
      middle: {
        marginLeft: theme.spacing(2),
        marginRight: theme.spacing(2)
      }
    };
  };
  var Divider = React.forwardRef(function Divider(props, ref) {
    var _props$absolute = props.absolute,
        absolute = _props$absolute === void 0 ? false : _props$absolute,
        classes = props.classes,
        className = props.className,
        _props$component = props.component,
        Component = _props$component === void 0 ? 'hr' : _props$component,
        _props$light = props.light,
        light = _props$light === void 0 ? false : _props$light,
        _props$variant = props.variant,
        variant = _props$variant === void 0 ? 'fullWidth' : _props$variant,
        other = _objectWithoutProperties(props, ["absolute", "classes", "className", "component", "light", "variant"]);
  
    if (Component === 'li' && !other.role) {
      other.role = 'separator';
    }
  
    return React.createElement(Component, _extends({
      className: clsx(classes.root, variant === 'inset' && classes.inset, variant === 'middle' && classes.middle, absolute && classes.absolute, light && classes.light, className),
      ref: ref
    }, other));
  });
  process.env.NODE_ENV !== "production" ? Divider.propTypes = {
    /**
     * Absolutely position the element.
     */
    absolute: PropTypes.bool,
  
    /**
     * 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,
  
    /**
     * The component used for the root node.
     * Either a string to use a DOM element or a component.
     */
    component: PropTypes.elementType,
  
    /**
     * If `true`, the divider will have a lighter color.
     */
    light: PropTypes.bool,
  
    /**
     *  The variant to use.
     */
    variant: PropTypes.oneOf(['fullWidth', 'inset', 'middle'])
  } : void 0;
  export default withStyles(styles, {
    name: 'MuiDivider'
  })(Divider);