documentation: preset theming and css() function positioning within the theme declaration is wrong

[petitkriket]

Describe the bug

There is a documented example to inject css when using the Primevue v4 preset.
The documentation example does not work, and I suspect that there is an error in the documentation.

• In the extends documentation at the global preset level
  The position of the css property seems wrong in the example.

const MyPreset = definePreset(Lara, {
  components: {
    tag: {
      // inside a component itself, works 🎉 
      css: ({ dt }) => ``,
  },
  // inside the `components:` at the same level of other components like seen in the theme `extend` documentation section ❌
        css: ({ dt }) => `
.p-toggleswitch.p-disabled .p-toggleswitch-slider {
    opacity: ${dt('toggleswitch.my.disabled.opacity')};
}

.p-toggleswitch.p-disabled .p-toggleswitch-handle {
    background: ${dt('toggleswitch.my.checked.disabled.background')};
}
`
    }
});

On the other hand, when i place the css property within the tag or button object itself, it works

The css property has to be within the component itself.- material theme working example at an atomic component preset level.

On the root position of the theme object it seems to work, see material theme root declaration. But it's empty so it's unclear.

Reproduction

a simple reproduction

Proposition

1. Can you clarify if both or all the 3 uses should be working ?
2. If not, updating the docs could help

Reproducer

primevue/packages/themes/src/presets/material/index.js

Line 185 in aec47f4

css: ({ dt }) => `

PrimeVue version

4.2.2

Vue version

4.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. add css customization and or extended Design Token to the theme.
2. inspect the DOM and see that the given properties are not applied

Expected behavior

1. add css customizations with or without design tokens
2. see that the css is properly injected and enjoy Tags with a thin border.