import { ThemeBreakpoints } from "styled-system";

declare module "styled-system" {
  export interface ThemeBreakpoints {
    default: string;
		tablet: string;
		desktop: string;
  }
}

/**
 * The logic is mobile first, so the first breakpoint is alway from 0 to the first declared one
 */
export const breakpointsMap: Partial<ThemeBreakpoints> = {
  default: "320px",
  tablet: "425px",
  desktop: "1024px",
};