extend API of createStyleContext to return unwrapped components

[devfive]

Description

Congratulations on the newest release! I'm really pumped to see createStyleContext!

I've noticed that withProvider and withContext automatically wraps passed component with panda factory, which is not always expected.

Problem Statement/Justification

There are two cases where it's problematic:

1. Props names clash

// dummy example to serve the point - `display` property is also available on `StyledComponent` produced by the factory
const MyCardBody: React.FC<{ display?: boolean } & React.PropsWithChildren> = ({ display, children }) => {
  if (!display) return null

  return <div>{children}</div>
}

const Body = withContext(MyCard, 'body')

export const Card = { Body }

// somewhere in the app
const App = () => {
  return (
    <Card.Body display> /* error: Type 'true' is not assignable to type 'ConditionalValue<AnyString | `var(--${string})` | Display | readonly string[] | undefined>' */
      test
    </Card.Body>
  )
}

2. Opening the API to change styles of the component
   This depends on the requirements, but I know there are a lot of cases where styling API should be explicitly disabled.

Proposed Solution or API

Maybe:

1. separate methods on the createStyleContext API

const { withRawContext } = createStyleContext(recipe)

const Body = withRawContext(MyBody, 'body')

2. possibility to opt-out from wrapping via options

const { withContext } = createStyleContext(recipe)

const Body = withContext(MyBody, 'body', { useFactory: false })

Alternatives

No response

Additional Information

https://play.panda-css.com/NjrQnToicx