TypeError: Cannot read properties of undefined (reading 'sm')

[araborg]

i was trying to import some custom code (breakpoints, color, fonts) from my default file but i keep getting this error: TypeError: Cannot read properties of undefined (reading 'sm') using styled-components
Here is my code:
`default.js
// Temp fonts
export const fonts = {
title: "Space Grotesk, sans-serif",

      main: "Space Grotesk, sans-serif"

}

// Colors for layout
export const colors = {
primary1: "hsl(204,23.8%,95.9%)",

      background1: "#0F1624",

      accent1: "hsl(34.9,98.6%,72.9%)",

      button: "hsl(205.1,100%,36.1%)",

      background2: "hsl(232.7,27.3%,23.7%)",

}

const size = {
xs: "320px",

      sm: "768px",

      lg: "1024px",

      xl: "1280px"

}

// Breakpoints for responsive design
export const breakpoints = {
sm: (max-width: ${size.xs}),

      md: `(max-width: ${size.sm})`,

      lg: `(max-width: ${size.lg})`,

      xl: `(max-width: ${size.xl})`,

}

global.js file:
import { createGlobalStyle } from 'styled-components';
import { normalize } from 'styled-normalize';

const GlobalStyles = createGlobalStyle`
${normalize};

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body {
	font-family: ${props => props.theme.fonts.main};
	font-size: 1.6rem;
	background: ${props => props.theme.colors.background1};
	color: ${props => props.theme.colors.primary1};
	cursor: default;
}

h1,h2,h3,h4,h5,h6,button {
	font-family: ${props => props.theme.fonts.title};
}

a {
	text-decoration: none;
}

li{
	list-style: none;
}

`;

export default GlobalStyles;

Theme.js file:
import { ThemeProvider } from "styled-components";

import theme from "../themes/default"
import GlobalStyles from "./globals"

const Theme = ( { children } ) => (

                {children}
      </ThemeProvider>

)

export default Theme
`

[thedaviddias]

@arabog Have you figured out a solution?