custom mediaQueries on a extracted gluestack-style config generates a `does not exist in type` error

[JDMetal]

Description

new breakpoints in the config file not able to resolve when styling components

CodeSandbox/Snack link

https://codesandbox.io/p/sandbox/fragrant-platform-z3mm9j?file=%2Fsrc%2FApp.tsx%3A18%2C13

Steps to reproduce

1. Extract gluestack theme (gluestack-style.config.ts)
2. use createConfig and extend from @gluestack-ui/config config with your own custom config
3. add custom mediaQueries in tokens
4. use the custom mediaQuery on any component using the gluestack provider with the exctracted theme

gluestack-ui Version

latest

Platform

• [ ] Expo
• [ ] React Native CLI
• [ ] Next
• [ ] Web
• [ ] Android
• [ ] iOS

Other Platform

No response

Additional Information

gluestack-style.config.ts

import {config} from '@gluestack-ui/config';
import {createConfig} from '@gluestack-ui/themed';

export const customConfig = createConfig({
  ...config,
  tokens: {
    mediaQueries: {
      base: '@media screen and (min-width: 0)',
      customBreakpoint: '@media screen and (min-width: 300)',
      sm: '@media screen and (min-width: 600px)',
      md: '@media screen and (min-width: 905px)',
      lg: '@media screen and (min-width: 1240px)',
      xl: '@media screen and (min-width: 1440px)',
    }
  },
} as const);

type Config = typeof customConfig;

declare module '@gluestack-style/react' {
  interface ICustomConfig extends Config {}
}

example component:

[JDMetal]

related issue: https://github.com/gluestack/gluestack-ui/issues/2179

[ankit-tailor]

Hey @JDMetal, Thanks for reporting the issue. We'll look into it.