[cssVariables] Creating variables for typography with responsive incorrectly and not work

Steps to reproduce

When create theme with typography with h1 include responsive:

const theme = createTheme({
...
  typography: {
    fontFamily: roboto.style.fontFamily,
    h1: {
      fontSize: '2.8rem',
      color: 'red',
      fontWeight: 'bold',
      '@media (min-width:300px)': {
        fontSize: '3rem',
      },
      '@media (min-width:400px)': {
        fontSize: '4rem',
      },
    },
  ...
  },
...
  },
});

Current behavior

This variable appears to be non-existent or malformed

// output:
  '@media (min-width:400px)': {
    fontSize: var(--typography-h1-@media (min-width:400px)-fontSize)
  },

https://stackblitz.com/edit/github-emurbz?file=src%2Ftheme.ts,src%2Fapp%2Fpage.tsx,src%2Fcomponents%2FProTip.tsx,src%2Fcomponents%2FCopyright.tsx

Expected behavior

Generate variables that match media keys (300px, 400px...) and accept these values.

Context

No response

Your environment

No response

Search keywords: cssVariables typography responsive