// https://github.com/styled-system/styled-system/issues/1318#issuecomment-627376905

const base = {
  phone: '0px',
  lgPhone: '480px',
  tablet: '768px',
  lgTablet: '992px',
  desktop: '1280px',
};

type Base = typeof base;
type BaseKeys = keyof Base;

export type Breakpoints = Array<Base[BaseKeys]> & Partial<Base>;

const breakpoints: Breakpoints = Object.values(base);

Object.keys(base).forEach((key) => {
  const baseKey = key as BaseKeys;
  breakpoints[baseKey] = base[baseKey];
});

export { breakpoints };