From 62f3020242cbc51884cdccfbdd542f8caa28b61a Mon Sep 17 00:00:00 2001
From: Jenna Smith <175330+jjenzz@users.noreply.github.com>
Date: Wed, 14 Sep 2022 22:25:52 +0100
Subject: [PATCH 1/3] fix exported types

---
 packages/core/src/css/create-themed-component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/css/create-themed-component.tsx b/packages/core/src/css/create-themed-component.tsx
index 50544e6..9e32e14 100644
--- a/packages/core/src/css/create-themed-component.tsx
+++ b/packages/core/src/css/create-themed-component.tsx
@@ -12,7 +12,7 @@ type PropsWithStyledProps<P, ThemeKey extends keyof DripsyFinalTheme> = P &
   StyledProps<ThemeKey>
 
 // prettier-ignore
-type Props<C, ExtraProps, ThemeKey extends keyof DripsyFinalTheme> = C extends ComponentType<infer BaseProps>
+export type Props<C, ExtraProps, ThemeKey extends keyof DripsyFinalTheme> = C extends ComponentType<infer BaseProps>
   ? MergeProps<PropsWithoutVariants<BaseProps>, PropsWithStyledProps<ExtraProps, ThemeKey>>
   : never
 

From 1969f02e4904ddc83e96734a35b6d228b33cbe42 Mon Sep 17 00:00:00 2001
From: Jenna Smith <175330+jjenzz@users.noreply.github.com>
Date: Thu, 15 Sep 2022 08:55:45 +0100
Subject: [PATCH 2/3] reinstate props generic

---
 examples/example/App.tsx         | 40 +++++++++++++++++++++++++++++++-
 packages/core/src/css/styled.tsx |  4 +++-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/examples/example/App.tsx b/examples/example/App.tsx
index 1f57814..a5c5fb6 100644
--- a/examples/example/App.tsx
+++ b/examples/example/App.tsx
@@ -15,7 +15,12 @@ import {
 // Import from core
 import { H4 } from '@dripsy/core'
 import { Gradient } from '@dripsy/gradient'
-import { Text, TextInput, View as NativeView } from 'react-native'
+import {
+  Text,
+  TextInput,
+  View as NativeView,
+  KeyboardAvoidingView,
+} from 'react-native'
 
 const theme = makeTheme({
   colors: {
@@ -137,6 +142,39 @@ export type TestElement = MyViewElement extends never ? never : 'ok'
 // should not have TS errors because element type should not be never ✅
 export const testElement: { el: TestElement } = { el: 'ok' }
 
+export const ExtendedComp = styled(KeyboardAvoidingView)({})
+
+export const ExtendedCompWithExtraProps = styled<
+  React.ComponentProps<typeof KeyboardAvoidingView> & { custom?: boolean }
+>(KeyboardAvoidingView)({})
+
+export const ExtendedCompWithExtraProps2 = styled(KeyboardAvoidingView)<
+  React.ComponentProps<typeof KeyboardAvoidingView> & { custom?: boolean }
+>({})
+
+/* @ts-expect-error behavior cannot be 'test' */
+export const ExtendA = () => <ExtendedComp behavior="test" />
+/* should not error */
+export const ExtendB = () => <ExtendedComp behavior="padding" />
+/* @ts-expect-error custom does not exist */
+export const ExtendC = () => <ExtendedComp custom="test" />
+/* @ts-expect-error behavior cannot be 'test' */
+export const ExtendE = () => <ExtendedCompWithExtraProps behavior="test" />
+/* should not error */
+export const ExtendF = () => <ExtendedCompWithExtraProps behavior="padding" />
+/* @ts-expect-error custom cannot be string */
+export const ExtendG = () => <ExtendedCompWithExtraProps custom="test" />
+/* should not error */
+export const ExtendH = () => <ExtendedCompWithExtraProps custom={false} />
+/* @ts-expect-error behavior cannot be 'test' */
+export const ExtendI = () => <ExtendedCompWithExtraProps2 behavior="test" />
+/* should not error */
+export const ExtendJ = () => <ExtendedCompWithExtraProps2 behavior="padding" />
+/* @ts-expect-error custom cannot be string */
+export const ExtendK = () => <ExtendedCompWithExtraProps2 custom="test" />
+/* should not error */
+export const ExtendL = () => <ExtendedCompWithExtraProps2 custom={false} />
+
 const ResponsiveSquare = () => {
   // Return literal values:
   const textColor = useResponsiveValue(['red', 'green', 'blue'])
diff --git a/packages/core/src/css/styled.tsx b/packages/core/src/css/styled.tsx
index 7dae343..f3dd72c 100644
--- a/packages/core/src/css/styled.tsx
+++ b/packages/core/src/css/styled.tsx
@@ -16,8 +16,10 @@ import type { ThemedOptions } from './types'
  * ```
  *
  */
+
 export function styled<
-  C extends ComponentType<any>,
+  Props,
+  C extends ComponentType<any> = ComponentType<Props>,
   ThemeKey extends keyof DripsyFinalTheme = keyof DripsyFinalTheme
 >(
   Component: C,

From 2b67ed900eb3d8303b3fd880b7ed18d845152f52 Mon Sep 17 00:00:00 2001
From: Fernando Rojo <frojo@sas.upenn.edu>
Date: Thu, 15 Sep 2022 10:22:22 -0400
Subject: [PATCH 3/3] adjust error comments

---
 examples/example/App.tsx | 44 ++++++++++++++++++++++++++++++----------
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/examples/example/App.tsx b/examples/example/App.tsx
index a5c5fb6..70fd6c9 100644
--- a/examples/example/App.tsx
+++ b/examples/example/App.tsx
@@ -152,26 +152,48 @@ export const ExtendedCompWithExtraProps2 = styled(KeyboardAvoidingView)<
   React.ComponentProps<typeof KeyboardAvoidingView> & { custom?: boolean }
 >({})
 
-/* @ts-expect-error behavior cannot be 'test' */
-export const ExtendA = () => <ExtendedComp behavior="test" />
+export const ExtendA = () => (
+  <ExtendedComp
+    /* @ts-expect-error behavior cannot be 'test' */
+    behavior="test"
+  />
+)
 /* should not error */
 export const ExtendB = () => <ExtendedComp behavior="padding" />
-/* @ts-expect-error custom does not exist */
-export const ExtendC = () => <ExtendedComp custom="test" />
-/* @ts-expect-error behavior cannot be 'test' */
-export const ExtendE = () => <ExtendedCompWithExtraProps behavior="test" />
+export const ExtendC = () => (
+  <ExtendedComp
+    /* @ts-expect-error custom does not exist */
+    custom="test"
+  />
+)
+export const ExtendE = () => (
+  <ExtendedCompWithExtraProps
+    /* @ts-expect-error behavior cannot be 'test' */
+    behavior="test"
+  />
+)
 /* should not error */
 export const ExtendF = () => <ExtendedCompWithExtraProps behavior="padding" />
-/* @ts-expect-error custom cannot be string */
-export const ExtendG = () => <ExtendedCompWithExtraProps custom="test" />
+export const ExtendG = () => (
+  <ExtendedCompWithExtraProps
+    /* @ts-expect-error custom cannot be string */
+    custom="test"
+  />
+)
 /* should not error */
 export const ExtendH = () => <ExtendedCompWithExtraProps custom={false} />
-/* @ts-expect-error behavior cannot be 'test' */
 export const ExtendI = () => <ExtendedCompWithExtraProps2 behavior="test" />
+
 /* should not error */
 export const ExtendJ = () => <ExtendedCompWithExtraProps2 behavior="padding" />
-/* @ts-expect-error custom cannot be string */
-export const ExtendK = () => <ExtendedCompWithExtraProps2 custom="test" />
+
+export const ExtendK = () => (
+  <ExtendedCompWithExtraProps2
+    /* @ts-expect-error custom cannot be string */
+    custom="test"
+  />
+)
+
 /* should not error */
 export const ExtendL = () => <ExtendedCompWithExtraProps2 custom={false} />