import { a as classCallCheck, b as createClass, c as defineProperty, d as inherits, e as objectWithoutProperties, f as possibleConstructorReturn, g as slicedToArray, h as _typeof, i as _extends } from '../chunk-aad905a2.js';
import React from 'react';
import PropTypes from 'prop-types';
import { b as classNames, a as withNano } from '../chunk-566df01b.js';
import '../chunk-aeb80e51.js';

var SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

function generateGrid(globalStyles, theme, breakpoint) {
  var customStyles = {};

  GRID_SIZES.forEach(function (size) {
    var key = 'grid-' + breakpoint + '-' + size;

    if (size === true) {
      customStyles[key] = {
        flexBasis: 0,
        flexGrow: 1,
        maxWidth: '100%'
      };
      return;
    }

    if (size === 'auto') {
      customStyles[key] = {
        flexBasis: 'auto',
        flexGrow: 0,
        maxWidth: 'none'
      };
      return;
    }

    var width = Math.round(size / 12 * 10e7) / 10e5 + '%';

    customStyles[key] = {
      flexBasis: width,
      flexGrow: 0,
      maxWidth: width
    };
  });

  if (breakpoint === 'xs') {
    Object.assign(globalStyles, customStyles);
  } else {
    globalStyles[theme.breakpoints.up(breakpoint)] = customStyles;
  }
}

function getOffset(val) {
  var div = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;

  var parse = parseFloat(val);
  return '' + parse / div + (String(val).replace(String(parse), '') || 'px');
}

function generateGutter(theme, breakpoint) {
  var customStyles = {};

  SPACINGS.forEach(function (spacing) {
    var themeSpacing = theme.spacing(spacing, 8);

    if (themeSpacing === 0) return;

    customStyles['spacing-' + breakpoint + '-' + spacing] = {
      '& > $item': {
        padding: getOffset(themeSpacing, 2)
      },
      '& > $noPaddingX': {
        paddingLeft: 0,
        paddingRight: 0
      }
    };
  });

  return customStyles;
}

var styles = (function (theme) {
  return _extends({
    root: {},
    container: {
      boxSizing: 'border-box',
      display: 'flex',
      flexWrap: 'wrap',
      width: '100%'
    },
    item: {
      boxSizing: 'border-box',
      margin: '0'
    },
    zeroMinWidth: {
      minWidth: 0
    },
    'direction-xs-column': {
      flexDirection: 'column'
    },
    'direction-xs-column-reverse': {
      flexDirection: 'column-reverse'
    },
    'direction-xs-row-reverse': {
      flexDirection: 'row-reverse'
    },
    'wrap-xs-nowrap': {
      flexWrap: 'nowrap'
    },
    'wrap-xs-wrap-reverse': {
      flexWrap: 'wrap-reverse'
    },
    'align-items-xs-center': {
      alignItems: 'center'
    },
    'align-items-xs-flex-start': {
      alignItems: 'flex-start'
    },
    'align-items-xs-flex-end': {
      alignItems: 'flex-end'
    },
    'align-items-xs-baseline': {
      alignItems: 'baseline'
    },
    'align-content-xs-center': {
      alignContent: 'center'
    },
    'align-content-xs-flex-start': {
      alignContent: 'flex-start'
    },
    'align-content-xs-flex-end': {
      alignContent: 'flex-end'
    },
    'align-content-xs-space-between': {
      alignContent: 'space-between'
    },
    'align-content-xs-space-around': {
      alignContent: 'space-around'
    },
    'justify-xs-center': {
      justifyContent: 'center'
    },
    'justify-xs-flex-end': {
      justifyContent: 'flex-end'
    },
    'justify-xs-space-between': {
      justifyContent: 'space-between'
    },
    'justify-xs-space-around': {
      justifyContent: 'space-around'
    },
    'justify-xs-space-evenly': {
      justifyContent: 'space-evenly'
    }
  }, generateGutter(theme, 'xs'), theme.breakpoints.keys.reduce(function (accumulator, key) {
    generateGrid(accumulator, theme, key);
    return accumulator;
  }, {}), {
    noPaddingX: {}
  });
});

var Grid = React.forwardRef(function (props, ref) {
  var _classNames;

  var _props$alignContent = props.alignContent,
      alignContent = _props$alignContent === undefined ? 'stretch' : _props$alignContent,
      _props$alignItems = props.alignItems,
      alignItems = _props$alignItems === undefined ? 'stretch' : _props$alignItems,
      classes = props.classes,
      classNameProp = props.className,
      _props$component = props.component,
      Component = _props$component === undefined ? 'div' : _props$component,
      _props$container = props.container,
      container = _props$container === undefined ? false : _props$container,
      _props$direction = props.direction,
      direction = _props$direction === undefined ? 'row' : _props$direction,
      _props$item = props.item,
      item = _props$item === undefined ? false : _props$item,
      _props$justify = props.justify,
      justify = _props$justify === undefined ? 'flex-start' : _props$justify,
      _props$lg = props.lg,
      lg = _props$lg === undefined ? false : _props$lg,
      _props$md = props.md,
      md = _props$md === undefined ? false : _props$md,
      _props$sm = props.sm,
      sm = _props$sm === undefined ? false : _props$sm,
      _props$spacing = props.spacing,
      spacing = _props$spacing === undefined ? 0 : _props$spacing,
      _props$wrap = props.wrap,
      wrap = _props$wrap === undefined ? 'wrap' : _props$wrap,
      _props$xl = props.xl,
      xl = _props$xl === undefined ? false : _props$xl,
      _props$xs = props.xs,
      xs = _props$xs === undefined ? false : _props$xs,
      _props$zeroMinWidth = props.zeroMinWidth,
      zeroMinWidth = _props$zeroMinWidth === undefined ? false : _props$zeroMinWidth,
      _props$noPaddingX = props.noPaddingX,
      noPaddingX = _props$noPaddingX === undefined ? false : _props$noPaddingX,
      rest = objectWithoutProperties(props, ['alignContent', 'alignItems', 'classes', 'className', 'component', 'container', 'direction', 'item', 'justify', 'lg', 'md', 'sm', 'spacing', 'wrap', 'xl', 'xs', 'zeroMinWidth', 'noPaddingX']);


  var className = classNames(classes.root, (_classNames = {}, defineProperty(_classNames, classes.container, container), defineProperty(_classNames, classes.item, item), defineProperty(_classNames, classes.zeroMinWidth, zeroMinWidth), defineProperty(_classNames, classes['spacing-xs-' + String(spacing)], container && spacing !== 0), defineProperty(_classNames, classes['direction-xs-' + String(direction)], direction !== 'row'), defineProperty(_classNames, classes['wrap-xs-' + String(wrap)], wrap !== 'wrap'), defineProperty(_classNames, classes['align-items-xs-' + String(alignItems)], alignItems !== 'stretch'), defineProperty(_classNames, classes['align-content-xs-' + String(alignContent)], alignContent !== 'stretch'), defineProperty(_classNames, classes['justify-xs-' + String(justify)], justify !== 'flex-start'), defineProperty(_classNames, classes['grid-xs-' + String(xs)], xs !== false), defineProperty(_classNames, classes['grid-sm-' + String(sm)], sm !== false), defineProperty(_classNames, classes['grid-md-' + String(md)], md !== false), defineProperty(_classNames, classes['grid-lg-' + String(lg)], lg !== false), defineProperty(_classNames, classes['grid-xl-' + String(xl)], xl !== false), defineProperty(_classNames, classes.noPaddingX, noPaddingX), _classNames), classNameProp);

  return React.createElement(Component, _extends({ className: className, ref: ref }, rest));
});

Grid.displayName = 'Grid';

Grid.propTypes = {
  alignContent: PropTypes.oneOf(['stretch', 'center', 'flex-start', 'flex-end', 'space-between', 'space-around']),
  alignItems: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']),
  classes: PropTypes.object.isRequired,
  className: PropTypes.string,
  component: PropTypes.elementType,
  container: PropTypes.bool,
  direction: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
  item: PropTypes.bool,
  justify: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly']),
  spacing: PropTypes.oneOf(SPACINGS),
  wrap: PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']),
  xl: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
  lg: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
  md: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
  sm: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
  xs: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
  zeroMinWidth: PropTypes.bool,
  noPaddingX: PropTypes.bool
};

var Grid$1 = withNano(styles)(Grid);

export default Grid$1;
//# sourceMappingURL=index.js.map
