import PropTypes from 'prop-types';
import { DEFAULT_BREAKPOINTS } from './ThemeProvider';
export function responsivePropType(propType) {
  return PropTypes.oneOfType([propType, PropTypes.shape({
    xs: propType,
    sm: propType,
    md: propType,
    lg: propType,
    xl: propType,
    xxl: propType
  })]);
}
export default function createUtilityClassName(utilityValues, breakpoints = DEFAULT_BREAKPOINTS) {
  const classes = [];
  Object.entries(utilityValues).forEach(([utilName, utilValue]) => {
    if (utilValue != null) {
      if (typeof utilValue === 'object') {
        breakpoints.forEach(brkPoint => {
          const bpValue = utilValue[brkPoint];

          if (bpValue != null) {
            const infix = brkPoint !== 'xs' ? `-${brkPoint}` : '';
            classes.push(`${utilName}${infix}-${bpValue}`);
          }
        });
      } else {
        classes.push(`${utilName}-${utilValue}`);
      }
    }
  });
  return classes;
}