How to extend recipes? (a complete example)

[adaboese]

Here is my panda.config.ts:

import { defineConfig } from '@pandacss/dev';

export default defineConfig({
  exclude: [],
  hash: false,
  include: ['./app/**/*.{ts,tsx,js,jsx}'],
  jsxFramework: 'react',
  outdir: 'app/styled-system',
  outExtension: 'js',
  preflight: true,
  presets: ['@pandacss/preset-base', '@park-ui/panda-preset'],
  strictTokens: false,
  theme: {
    extend: {
      recipes: {
        formLabel: {
          base: {
            color: '#f00',
            fontSize: '25px',
          },
        },
      },
    },
  },
});

and then the component is defined as:

export const FormLabel = styled(ark.label, formLabel);

but if I inspect the element, it only has classes formLabel formLabel--size_md and none of my styling ({ color: '#f00', fontSize: '25px', })

In contrast, if I override it (see below) then it works, but that's not what the example in the documentation says to do.

import { defineConfig, defineRecipe } from '@pandacss/dev';

const formLabel = defineRecipe({
  base: {
    color: '#f00',
    fontWeight: 'medium',
  },
  className: 'formLabel',
  defaultVariants: {
    size: 'md',
  },
  variants: {
    size: {
      lg: {
        textStyle: 'sm',
      },
      md: {
        textStyle: 'sm',
      },
      sm: {
        textStyle: 'sm',
      },
      xl: {
        textStyle: 'md',
      },
    },
  },
});

export default defineConfig({
  exclude: [],
  hash: false,
  include: ['./app/**/*.{ts,tsx,js,jsx}'],
  jsxFramework: 'react',
  outdir: 'app/styled-system',
  outExtension: 'js',
  preflight: true,
  presets: ['@pandacss/preset-base', '@park-ui/panda-preset'],
  strictTokens: false,
  theme: {
    extend: {
      recipes: {
        formLabel,
      },
    },
  },
});
``

^ This works

so how do I actually extend `formLabel` recipe that ark/park uses?

[adaboese]

Seems I closed this by accident. Still don't know how to do it.