Revert "fix: using breakpoints from theme instead of just config"

docs/utilities.mdx

@@ -19,7 +19,7 @@ import { css } from '@emotion/react';
 import { media } from '@mverissimoo/emotion-grid';
 
 const baseStyles = ({ theme }) => css`
-  ${media('lg', theme)} {
+  ${media('lg')} {
     // your code below
   }
 `;

src/components/Col/Col.styles.ts

@@ -22,8 +22,7 @@ export const base = ({ theme }: StyleProps) => css`
     (breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
       padding-left: ${config(theme).grid.gutter[breakpoint] / 2}rem;
       padding-right: ${config(theme).grid.gutter[breakpoint] / 2}rem;
-    `,
-    theme
+    `
   )};
 `;
 
@@ -42,8 +41,7 @@ export const size = (props: ColProps & StyleProps) =>
           (props[breakpoint] / config(props.theme).grid.columns[breakpoint]) *
           100
         }%;
-    `,
-    props.theme
+    `
   );
 
 export const offset = ({ theme, offset }: ColProps & StyleProps) =>
@@ -60,6 +58,5 @@ export const offset = ({ theme, offset }: ColProps & StyleProps) =>
               100
             : 0
         }%;
-    `,
-    theme
+    `
   );

src/components/Container/Container.styles.ts

@@ -22,8 +22,7 @@ export const base = ({ theme }: StyleProps) => css`
     (breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
     padding-left: ${config(theme).grid.padding[breakpoint] / 2}rem;
     padding-right: ${config(theme).grid.padding[breakpoint] / 2}rem;
-`,
-    theme
+`
   )}
 `;
 
@@ -36,8 +35,7 @@ export const fluid = ({ theme, fluid }: ContainerProps & StyleProps) =>
       `
       label: container--fluid;
       max-width: ${config(theme).grid.container[breakpoint]}rem;
-    `,
-    theme
+    `
   );
 
 export const debug = ({ theme, debug }: ContainerProps & StyleProps) => {

src/components/Row/Row.styles.ts

@@ -19,8 +19,7 @@ export const base = ({ theme }: StyleProps) => css`
     (breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
       margin-left: -${config(theme).grid.gutter[breakpoint] / 2}rem;
       margin-right: -${config(theme).grid.gutter[breakpoint] / 2}rem;
-    `,
-    theme
+    `
   )};
 `;
 
@@ -33,8 +32,7 @@ export const align = ({ theme, align }: RowProps & StyleProps) =>
           `
             label: row--align;
             align-items: ${align[breakpoint]};
-          `,
-        theme
+          `
       )
     : css`
         label: row--align;
@@ -50,8 +48,7 @@ export const justify = ({ theme, justify }: RowProps & StyleProps) =>
           `
             label: row--justify;
             justify-content: ${justify[breakpoint]};
-          `,
-        theme
+          `
       )
     : css`
         label: row--justify;
@@ -68,8 +65,7 @@ export const reverse = ({ theme, reverse }: RowProps & StyleProps) =>
           flex-direction: ${
             reverse.includes(breakpoint) ? 'row-reverse' : 'row'
           };
-        `,
-        theme
+        `
       )
     : css`
         label: row--reverse;

src/utils/media.ts

@@ -4,8 +4,8 @@ import { config } from '../config';
 
 import { Breakpoints, DefaultTheme } from '../types/emotion';
 
-export function media(breakpoint: Breakpoints, theme: DefaultTheme): string {
-  const breakpoints = config(theme).grid.breakpoints;
+export function media(breakpoint: Breakpoints): string {
+  const breakpoints = config().grid.breakpoints;
 
   if (!Object.keys(breakpoints).includes(breakpoint)) {
     throw new Error(`Breakpoint '${breakpoint}' not found`);
@@ -16,13 +16,12 @@ export function media(breakpoint: Breakpoints, theme: DefaultTheme): string {
 
 export function responsive(
   breakpoints: DefaultTheme['grid']['breakpoints'] | Array<Breakpoints>,
-  mapper: (value: any) => any,
-  theme?: DefaultTheme
+  mapper: (value: any) => any
 ) {
   if (Array.isArray(breakpoints)) {
     return breakpoints.map(
       (breakpoint): SerializedStyles => css`
-        ${media(breakpoint, theme)} {
+        ${media(breakpoint)} {
           ${mapper(breakpoint)}
         }
       `
@@ -31,7 +30,7 @@ export function responsive(
 
   return Object.keys(breakpoints).map(
     (breakpoint): SerializedStyles => css`
-      ${media(breakpoint as Breakpoints, theme)} {
+      ${media(breakpoint as Breakpoints)} {
         ${mapper(breakpoint)}
       }
     `