Styles not generated for recipe in another recipe

[doksara]

Title may be a bit ambiguous, but I don't know how else I'd explain it. In my component library, I have 2 components: <Input /> and <Autocomplete /> (which is importing <Input />). Both of them have their styles defined using the defineSlotRecipe and when I'm using <Input /> by itself it works just fine, but when I'm using <Autocomplete /> the classes for the inner Input component are not generated at all. As soon as I import <Input /> somewhere else in the codebase, the classes are generated and now <Autocomplete /> looks fine again.

import { input as inputRecipe } from '@mylib/styled-system/recipes'

const Input = (inputProps: InputProps) => {
  const [variantProps, cssProps] = inputRecipe.splitVariantProps(rest)
  const classes = inputRecipe(variantProps)

  return ( ... )
}

import { autocomplete as autocompleteRecipe } from '@mylib/styled-system/recipes'

const Autocomplete = (autocompleteProps: AutocompleteProps) => {
  const [variantProps, cssProps] = autocompleteRecipe.splitVariantProps(rest)
  const classes = autocompleteRecipe(variantProps)

  return ( 
     ...
    <Input variant="outlined" />
    ...
  )
}

What am I doing wrong?

[segunadebayo]

Do you have a reproduction of this? Struggling to understand what you mean.