fix unnamed component lint error

src/lib/design-system/index.tsx

@@ -77,19 +77,20 @@ export function useStyles<T = ComponentProps>(props: Props<T> & T) {
   return {styles, props: rest}
 }
 
-export const Box = React.forwardRef<View, Props<ViewProps>>(
+export const Box = React.forwardRef<View, Props<ViewProps>>(function BoxThemed(
-  ({children, style, ...props}, ref) => {
+  {children, style, ...props},
-    const {styles, props: rest} = useStyles<ViewProps>(props)
+  ref,
-    return (
+) {
-      <View {...rest} style={[styles, style]} ref={ref}>
+  const {styles, props: rest} = useStyles<ViewProps>(props)
-        {children}
+  return (
-      </View>
+    <View {...rest} style={[styles, style]} ref={ref}>
-    )
+      {children}
-  },
+    </View>
-)
+  )
+})
 
 export const Text = React.forwardRef<RNText, Props<TextProps>>(
-  ({children, style, ...props}, ref) => {
+  function TextThemed({children, style, ...props}, ref) {
     const {styles, props: rest} = useStyles<TextProps>({
       color: 'text',
       ...props,
@@ -144,7 +145,10 @@ const asToTypeStyles: {
   },
 }
 
-export const P = React.forwardRef<RNText, TypeProps>((props, ref) => {
+export const P = React.forwardRef<RNText, TypeProps>(function PThemed(
+  props,
+  ref,
+) {
   // @ts-expect-error role is web only
   return <Text role="paragraph" c="text" {...props} ref={ref} />
 })
@@ -154,32 +158,33 @@ export const P = React.forwardRef<RNText, TypeProps>((props, ref) => {
  * @see https://docs.expo.dev/develop/user-interface/fonts/
  */
 function createHeadingComponent(element: HeadingElements) {
-  return React.forwardRef<RNText, TypeProps>(
+  return React.forwardRef<RNText, TypeProps>(function HeadingThemed(
-    ({children, style, as, ...props}, ref) => {
+    {children, style, as, ...props},
-      const asEl = as || element
+    ref,
-      const extra = Platform.select({
+  ) {
-        web: {
+    const asEl = as || element
-          'aria-level': asToAriaLevel[element],
+    const extra = Platform.select({
-        },
+      web: {
-        default: {},
+        'aria-level': asToAriaLevel[element],
-      })
+      },
-      const {styles, props: rest} = useStyles({
+      default: {},
-        color: 'text',
+    })
-        ...merge(asToTypeStyles[asEl], props),
+    const {styles, props: rest} = useStyles({
-      })
+      color: 'text',
+      ...merge(asToTypeStyles[asEl], props),
+    })
 
-      return (
+    return (
-        <RNText
+      <RNText
-          role="heading"
+        role="heading"
-          {...extra}
+        {...extra}
-          {...rest}
+        {...rest}
-          style={[styles, style]}
+        style={[styles, style]}
-          ref={ref}>
+        ref={ref}>
-          {children}
+        {children}
-        </RNText>
+      </RNText>
-      )
+    )
-    },
+  })
-  )
 }
 
 export const H1 = createHeadingComponent('h1')