fix: playground error

Author: segunadebayo

packages/generator/src/artifacts/preact-jsx/create-style-context.ts

@@ -9,9 +9,9 @@ export function generatePreactCreateStyleContext(ctx: Context) {
     js: outdent`
     ${ctx.file.import('cx, css, sva', '../css/index')}
     ${ctx.file.import(factoryName, './factory')}
+    ${ctx.file.import('getDisplayName', './factory-helper')}
     import { createContext, useContext, createElement, forwardRef } from 'preact/compat'
 
-    const getDisplayName = (Component) => Component.displayName || Component.name || typeof Component === 'string' ? Component : 'Component'
     
     export function createStyleContext(recipe) {
       const StyleContext = createContext({})

packages/generator/src/artifacts/react-jsx/create-style-context.ts

@@ -9,9 +9,8 @@ export function generateReactCreateStyleContext(ctx: Context) {
     js: outdent`'use client'\n
     ${ctx.file.import('cx, css, sva', '../css/index')}
     ${ctx.file.import(factoryName, './factory')}
+    ${ctx.file.import('getDisplayName', './factory-helper')}
     import { createContext, useContext, createElement, forwardRef } from 'react'
-
-    const getDisplayName = (Component) => Component.displayName || Component.name || typeof Component === 'string' ? Component : 'Component'
     
     export function createStyleContext(recipe) {
       const StyleContext = createContext({})

packages/generator/src/artifacts/solid-jsx/create-style-context.ts

@@ -9,11 +9,10 @@ export function generateSolidCreateStyleContext(ctx: Context) {
     js: outdent`
     ${ctx.file.import('cx, css, sva', '../css/index')}
     ${ctx.file.import(factoryName, './factory')}
+    ${ctx.file.import('getDisplayName', './factory-helper')}
     import { createComponent, mergeProps } from 'solid-js/web'
     import { createContext, useContext, createMemo } from 'solid-js'
 
-    const getDisplayName = (Component) => Component.displayName || Component.name || typeof Component === 'string' ? Component : 'Component'
-    
     export function createStyleContext(recipe) {
       const StyleContext = createContext({})
       const isConfigRecipe = '__recipe__' in recipe

packages/generator/src/artifacts/vue-jsx/create-style-context.ts

@@ -9,9 +9,8 @@ export function generateVueCreateStyleContext(ctx: Context) {
     js: outdent`
     ${ctx.file.import('cx, css, sva', '../css/index')}
     ${ctx.file.import(factoryName, './factory')}
+    ${ctx.file.import('getDisplayName', './factory-helper')}
     import { defineComponent, provide, inject, computed, h } from 'vue'
-
-    const getDisplayName = (Component) => Component.displayName || Component.name || typeof Component === 'string' ? Component : 'Component'
     
     export function createStyleContext(recipe) {
       const StyleContext = Symbol('StyleContext')

packages/studio/styled-system/jsx/create-style-context.mjs

@@ -2,10 +2,9 @@
 
 import { cx, css, sva } from '../css/index.mjs';
 import { panda } from './factory.mjs';
+import { getDisplayName } from './factory-helper.mjs';
 import { createContext, useContext, createElement, forwardRef } from 'react'
 
-const getDisplayName = (Component) => Component.displayName || Component.name || typeof Component === 'string' ? Component : 'Component'
-
 export function createStyleContext(recipe) {
   const StyleContext = createContext({})
   const isConfigRecipe = '__recipe__' in recipe