From ac3d58df9039be874b54513ea1252add8caf49c7 Mon Sep 17 00:00:00 2001
From: Jonathan Neal <jonathantneal@hotmail.com>
Date: Wed, 17 Feb 2021 17:51:37 -0500
Subject: [PATCH] fix: typing for styled proxy (#412)

---
 packages/react/types/index.d.ts | 43 +++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/packages/react/types/index.d.ts b/packages/react/types/index.d.ts
index ba40cd86..47ac28c6 100644
--- a/packages/react/types/index.d.ts
+++ b/packages/react/types/index.d.ts
@@ -170,6 +170,49 @@ export type StyledInstance<Conditions = {}, Theme extends TTheme = {}, Utils = {
 		? StitchesComponentWithAutoCompleteForJSXElements<DeepStitchesComponentType, Variants & StitchesExtractVariantsStyles<E>, Conditions, Theme, Utils>
 		: // normal react component
 		  StitchesComponentWithAutoCompleteForReactComponents<E, Variants & StitchesExtractVariantsStyles<E>, Conditions, Theme, Utils>
+} & ProxyStyledElements
+
+export type ProxyStyledElements = {
+	[ElKey in keyof JSX.IntrinsicElements]: <E extends React.ElementType = ElKey, Variants, CloneVariants extends Variants>(
+		// prettier-ignore
+		styled: (
+			(
+				(
+					LessInternalCSS<Conditions, Theme, Utils, ThemeMap>
+					& {
+						/** Unknown property. */
+						[k in string]: unknown
+					}
+				)
+				| Record<string, InternalCSS<Conditions, Theme, Utils, ThemeMap>>
+			)
+			& {
+				variants?: { [k in keyof Variants]: { [b in keyof Variants[k]]: InternalCSS<Conditions, Theme, Utils, ThemeMap> } }
+			}
+			& {
+						defaultVariants?: {
+							[k in keyof CloneVariants]?: StrictMorphVariant<keyof CloneVariants[k]>
+						}
+					}
+					& {
+						compoundVariants?: (
+							{
+								[k in keyof CloneVariants]?: StrictMorphVariant<keyof CloneVariants[k]>
+							}
+							& {
+								css?: InternalCSS<Conditions, Theme, Utils, ThemeMap>
+							}
+						)[]
+					}
+		),
+	) => E extends string
+		? // jsx elements
+		  StitchesComponentWithAutoCompleteForJSXElements<E, Variants & StitchesExtractVariantsStyles<E>, Conditions, Theme, Utils>
+		: // if it's a stitches component we reach in and pull its type to provide better types
+		E extends { [$elm]: infer DeepStitchesComponentType }
+		? StitchesComponentWithAutoCompleteForJSXElements<DeepStitchesComponentType, Variants & StitchesExtractVariantsStyles<E>, Conditions, Theme, Utils>
+		: // normal react component
+		  StitchesComponentWithAutoCompleteForReactComponents<E, Variants & StitchesExtractVariantsStyles<E>, Conditions, Theme, Utils>
 }
 
 type ReactFactory = <Conditions extends TConditions = {}, Theme extends TTheme = {}, Utils = {}, Prefix = '', ThemeMap extends TThemeMap = CSSPropertiesToTokenScale>(