@fluent-windows/styles/es/breakpoints.js

Fluent-Windows React styles.

const map = {
  sm: 0,
  md: 1,
  lg: 2,
  xl: 3
};
export const breakpoints = values => theme => {
  const keys = Object.keys(values);
  const styled = keys.reduce((acc, cur) => {
    const key = cur;
    const rules = values[key];
    const themeBreakpoints = theme.breakpoints;
    const result = {
      [`@media screen and (min-width: ${themeBreakpoints[map[key]]})`]: rules
    };
    return { ...acc,
      ...result
    };
  }, {});
  return styled;
};