Breakpoints object

The breakpoints object is a mandatory requirement and must be passed to the theme. It is used to set the media query keys and corresponding breakpoint widths that will be utilized by the generatedProps, mq, and variations functions.

The breakpoints object should have the following structure:

{
  [key: string]: number;
}

The keys represent the media query labels or names, while the values are the corresponding breakpoint widths. The widths should be specified as number values, and the units applied will be em.

By providing the breakpoints object in the theme, you enable the library's functions to utilize these defined breakpoints for responsive styling and other related operations.

Please ensure that you pass the breakpoints object to the theme, adhering to the specified structure and data type requirements.

export const breakpoints = {
  lg: 76, // 1216px
  md: 64, // 1024px
  sm: 48, // 768px
  xs: 0
}