rn-css 1.11.9 → 2.0.0

package/dist/index.js

@@ -40,11 +40,9 @@ styled.Image = styled(RN.Image);
 styled.ImageBackground = styled(RN.ImageBackground);
 styled.KeyboardAvoidingView = styled(RN.KeyboardAvoidingView);
 styled.Modal = styled(RN.Modal);
-styled.NavigatorIOS = styled(RN.NavigatorIOS);
+styled.Pressable = styled(RN.Pressable);
 styled.ScrollView = styled(RN.ScrollView);
-styled.SnapshotViewIOS = styled(RN.SnapshotViewIOS);
 styled.Switch = styled(RN.Switch);
-styled.RecyclerViewBackedScrollView = styled(RN.RecyclerViewBackedScrollView);
 styled.RefreshControl = styled(RN.RefreshControl);
 styled.SafeAreaView = styled(RN.SafeAreaView);
 styled.Text = styled(RN.Text);

package/dist/styleComponent.d.ts

@@ -1,5 +1,5 @@
 import React, { MouseEvent } from 'react';
-import { FlatListProps, SectionListProps, StyleProp, TouchableHighlightProps, ViewProps, VirtualizedListProps } from 'react-native';
+import { FlatListProps, PressableProps, SectionListProps, StyleProp, TouchableHighlightProps, ViewProps, VirtualizedListProps } from 'react-native';
 import { FocusEventListener, BlurEventListener } from './features';
 import type { CompleteStyle, Units } from './types';
 export declare const defaultUnits: Units;
@@ -18,15 +18,15 @@ declare type OptionalProps = {
     rnCSS?: `${string};`;
     onFocus?: FocusEventListener;
     onBlur?: BlurEventListener;
-    onPressIn?: TouchableHighlightProps['onPressIn'];
-    onPressOut?: TouchableHighlightProps['onPressOut'];
-    onResponderStart?: ViewProps['onResponderStart'];
-    onResponderRelease?: ViewProps['onResponderRelease'];
-    onStartShouldSetResponder?: ViewProps['onStartShouldSetResponder'];
-    onMouseEnter?: (event: MouseEvent) => void;
-    onMouseLeave?: (event: MouseEvent) => void;
+    onPressIn?: TouchableHighlightProps['onPressIn'] | null;
+    onPressOut?: TouchableHighlightProps['onPressOut'] | null;
+    onResponderStart?: ViewProps['onResponderStart'] | null;
+    onResponderRelease?: ViewProps['onResponderRelease'] | null;
+    onStartShouldSetResponder?: ViewProps['onStartShouldSetResponder'] | null;
+    onMouseEnter?: ((event: MouseEvent) => void) | null;
+    onMouseLeave?: ((event: MouseEvent) => void) | null;
     onLayout?: ViewProps['onLayout'];
-    children?: React.ReactNode;
+    children?: PressableProps['children'];
 };
 declare const styled: <StyleType, InitialProps extends {
     style?: StyleProp<StyleType>;
@@ -38,14 +38,14 @@ declare const styled: <StyleType, InitialProps extends {
 };
 export default styled;
 export declare const styledFlatList: {
-    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & FlatListProps<any> & OptionalProps>)[]): <Type>(props: S & OptionalProps & FlatListProps<Type>) => JSX.Element;
-    attrs<S_1, Result extends Partial<S_1 & FlatListProps<any> & OptionalProps> = {}>(opts: Result | ((props: S_1 & OptionalProps & FlatListProps<any>) => Result)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1>)[]) => <Props>(componentProps: Omit<FlatListProps<Props> & OptionalProps, keyof Result> & S_1 & Partial<Result>) => JSX.Element;
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & FlatListProps<any> & OptionalProps>)[]): <Type>(props: S & OptionalProps & FlatListProps<Type>) => React.JSX.Element;
+    attrs<S_1, Result extends Partial<S_1 & FlatListProps<any> & OptionalProps> = {}>(opts: Result | ((props: S_1 & OptionalProps & FlatListProps<any>) => Result)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1>)[]) => <Props>(componentProps: Omit<FlatListProps<Props> & OptionalProps, keyof Result> & S_1 & Partial<Result>) => React.JSX.Element;
 };
 export declare const styledSectionList: {
-    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & SectionListProps<any, import("react-native").DefaultSectionT> & OptionalProps>)[]): <Type>(props: S & OptionalProps & SectionListProps<Type, import("react-native").DefaultSectionT>) => JSX.Element;
-    attrs<S_1, Result extends Partial<S_1 & SectionListProps<any, import("react-native").DefaultSectionT> & OptionalProps> = {}>(opts: Result | ((props: S_1 & OptionalProps & SectionListProps<any, import("react-native").DefaultSectionT>) => Result)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1>)[]) => <Props>(componentProps: Omit<SectionListProps<Props, import("react-native").DefaultSectionT> & OptionalProps, keyof Result> & S_1 & Partial<Result>) => JSX.Element;
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & SectionListProps<any, import("react-native").DefaultSectionT> & OptionalProps>)[]): <Type>(props: S & OptionalProps & SectionListProps<Type, import("react-native").DefaultSectionT>) => React.JSX.Element;
+    attrs<S_1, Result extends Partial<S_1 & SectionListProps<any, import("react-native").DefaultSectionT> & OptionalProps> = {}>(opts: Result | ((props: S_1 & OptionalProps & SectionListProps<any, import("react-native").DefaultSectionT>) => Result)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1>)[]) => <Props>(componentProps: Omit<SectionListProps<Props, import("react-native").DefaultSectionT> & OptionalProps, keyof Result> & S_1 & Partial<Result>) => React.JSX.Element;
 };
 export declare const styledVirtualizedList: {
-    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & VirtualizedListProps<any> & OptionalProps>)[]): <Type>(props: S & OptionalProps & VirtualizedListProps<Type>) => JSX.Element;
-    attrs<S_1, Result extends Partial<S_1 & VirtualizedListProps<any> & OptionalProps> = {}>(opts: Result | ((props: S_1 & OptionalProps & VirtualizedListProps<any>) => Result)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1>)[]) => <Props>(componentProps: Omit<VirtualizedListProps<Props> & OptionalProps, keyof Result> & S_1 & Partial<Result>) => JSX.Element;
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & VirtualizedListProps<any> & OptionalProps>)[]): <Type>(props: S & OptionalProps & VirtualizedListProps<Type>) => React.JSX.Element;
+    attrs<S_1, Result extends Partial<S_1 & VirtualizedListProps<any> & OptionalProps> = {}>(opts: Result | ((props: S_1 & OptionalProps & VirtualizedListProps<any>) => Result)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1>)[]) => <Props>(componentProps: Omit<VirtualizedListProps<Props> & OptionalProps, keyof Result> & S_1 & Partial<Result>) => React.JSX.Element;
 };

package/dist/styleComponent.js

@@ -158,8 +158,9 @@ const styled = (Component) => {
         const ComponentWithAttrs = styledComponent(chunks, ...functs);
         // We need to limit the props control to only Result https://www.typescriptlang.org/play?#code/GYVwdgxgLglg9mABBATgUwIZTQUQB7ZgAmaRAwnALYAOAPAAopzUDOAfABQU0BciH1Jqz6NmLAJSIAvG0QYwAT0kBvAFCJkCFlET5CJYt2rT+gsSKETpstRo3ooIFEiMDL49YgC+nvWmL+5FTUAHRYUCgsJrQASmgsIAA2OmgEgVH0GCiwGIkMlmyc4ZF8cQnJkjKItnYQWjqMaHVgwDAA5k5YpEYmbua6eBCJICT5YgA0iGVJUGyVNp52iA5OLsEcyiFbZqyTW2FQESxeHks+SyvOiI3NrR0oXUE0nufLaI5XfgGGwao+qqBILAEIgen1hNVENhtHxtCgYGA2pNtApEmhYREEW1vCpPJckDsWH9VM1tNd0Ld2j0pMh0F0viQntQuMFxAcjhsofEoHwAORwADWvJxqhuCDurmUiBRaL50KgwpOQA
         const ForwardRefComponent = react_1.default.forwardRef((props, ref) => {
-            const attrs = (opts instanceof Function) ? opts(props) : opts;
-            return react_1.default.createElement(ComponentWithAttrs, { ref: ref, ...props, ...attrs });
+            const castProps = props;
+            const attrs = (opts instanceof Function) ? opts(castProps) : opts;
+            return react_1.default.createElement(ComponentWithAttrs, { ref: ref, ...castProps, ...attrs });
         });
         // TODO : Find a way to remove from the Props the properties affected by opts
         return ForwardRefComponent;

package/dist/useTheme.d.ts

@@ -4,7 +4,7 @@ import { DefaultTheme } from './styleComponent';
 export declare const ThemeProvider: ({ theme, children }: {
     theme: DefaultTheme;
     children: React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;
 /**
  * Returns the Theme
  * @returns The Theme object

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.11.9",
+  "version": "2.0.0",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -33,19 +33,29 @@
     "web": "webpack serve --open --mode development"
   },
   "peerDependencies": {
-    "react": ">=16.13.1",
-    "react-native": ">=0.62.2"
+    "react": ">=19.0.0",
+    "react-native": ">=0.82.0",
+    "react-native-web": ">=0.21.0",
+    "react-dom": ">=19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-web": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
+    "@babel/preset-typescript": "^7.26.0",
     "@babel/runtime": "^7.16.5",
     "@react-native-community/eslint-config": "^3.0.1",
-    "@types/jest": "^27.0.3",
-    "@types/react": "^17.0.37",
-    "@types/react-native": "^0.66.9",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^19.2.2",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
-    "babel-jest": "^27.4.5",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^8.2.3",
     "dotenv": "^10.0.0",
     "eslint": "^7.32.0",
@@ -60,17 +70,18 @@
     "html-loader": "^3.0.1",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
-    "jest": "^27.5.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^30.2.0",
     "lint-staged": "^12.1.2",
-    "metro-react-native-babel-preset": "^0.70.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-native": "^0.68.0",
+    "metro-react-native-babel-preset": "^0.77.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-native": "^0.82.0",
     "react-native-typescript-transformer": "^1.2.13",
-    "react-native-web": "^0.17.7",
-    "react-test-renderer": "17.0.2",
+    "react-native-web": "^0.21.1",
+    "react-test-renderer": "19.2.0",
     "release-it": "^15.6.0",
-    "ts-jest": "^27.1.1",
+    "ts-jest": "^29.1.2",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.4",
     "webpack": "^5.72.0",
@@ -78,7 +89,17 @@
     "webpack-dev-server": "^4.8.1"
   },
   "jest": {
-    "preset": "react-native"
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
+    },
+    "setupFilesAfterEnv": [
+      "<rootDir>/tests/jest/setup.js"
+    ],
+    "moduleNameMapper": {
+      "^react-native$": "<rootDir>/tests/jest/react-native-mock.js",
+      "^react-native/jest/mock$": "<rootDir>/tests/jest/rn-mock.js"
+    }
   },
   "files": [
     "dist",

package/src/convertUnits.ts

@@ -23,8 +23,8 @@ export function convertValue (key: keyof PartialStyle | keyof Transform, value:
   if (value.includes('%')) {
     // Percentage is not supported on borders in web
     if (Platform.OS === 'web' && (!key.toLowerCase().includes('border') || key.toLowerCase().includes('radius'))) return value
-    if (['marginTop', 'marginBottom', 'translateY'].includes(key) || key.startsWith('borderTop') || key.startsWith('borderBottom')) finalUnits['%'] = units.height! / 100
-    else if (['marginLeft', 'marginRight', 'translateX'].includes(key) || key.startsWith('borderLeft') || key.startsWith('borderRight')) finalUnits['%'] = units.width! / 100
+    if (['marginTop', 'marginBottom', 'translateY'].includes(key) || key.startsWith('borderTop') || key.startsWith('borderBottom')) finalUnits['%'] = (units.height || 0) / 100
+    else if (['marginLeft', 'marginRight', 'translateX'].includes(key) || key.startsWith('borderLeft') || key.startsWith('borderRight')) finalUnits['%'] = (units.width || 0) / 100
     else if (key.startsWith('border') && key.endsWith('Radius')) finalUnits['%'] = ((units.width || 0) + (units.height || 0)) / 200
     else if (['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'top', 'left', 'bottom', 'right', 'flexBasis', 'rotate3d'].includes(key)) {
       if (value.startsWith('calc') || value.startsWith('max') || value.startsWith('min')) {
@@ -43,7 +43,7 @@ export function convertValue (key: keyof PartialStyle | keyof Transform, value:
     const [val, unit] = parseValue(occ)
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     if (['deg', 'rad', 'turn', 's'].includes(unit!)) return occ // We don't want to convert deg, rad, turn, second units
-    return val * (finalUnits[unit as keyof Units || 'px'] || 1) + ''
+    return val * (finalUnits[unit as keyof Units || 'px'] ?? 1) + ''
   })
 
   // We handle extra calculations (calc, min, max, parsing...)

package/src/features.tsx

@@ -23,7 +23,7 @@ export const useScreenSize = () => {
 }
 
 /** Hook that will apply the style reserved for hover state if needed */
-export const useHover = (onMouseEnter: undefined | ((event: MouseEvent) => void), onMouseLeave: undefined | ((event: MouseEvent) => void | undefined), needsHover: boolean) => {
+export const useHover = (onMouseEnter: null | undefined | ((event: MouseEvent) => void), onMouseLeave: null | undefined | ((event: MouseEvent) => void | undefined), needsHover: boolean) => {
   const [hover, setHover] = React.useState(false)
   const hoverStart = React.useMemo(() => needsHover ? (event: MouseEvent) => {
     if (onMouseEnter) onMouseEnter(event)
@@ -38,11 +38,11 @@ export const useHover = (onMouseEnter: undefined | ((event: MouseEvent) => void)
 
 /** Hook that will apply the style reserved for active state if needed */
 export const useActive = (
-  onPressIn: undefined | ((event: GestureResponderEvent) => void),
-  onPressOut: undefined | ((event: GestureResponderEvent) => void),
-  onResponderStart: undefined | ((event: GestureResponderEvent) => void),
-  onResponderRelease: undefined | ((event: GestureResponderEvent) => void),
-  onStartShouldSetResponder: undefined | ((event: GestureResponderEvent) => void),
+  onPressIn: null | undefined | ((event: GestureResponderEvent) => void),
+  onPressOut: null | undefined | ((event: GestureResponderEvent) => void),
+  onResponderStart: null | undefined | ((event: GestureResponderEvent) => void),
+  onResponderRelease: null | undefined | ((event: GestureResponderEvent) => void),
+  onStartShouldSetResponder: null | undefined | ((event: GestureResponderEvent) => void),
   needsTouch: boolean
 ) => {
   const [active, setActive] = React.useState(false)
@@ -70,8 +70,8 @@ export const useActive = (
   }
 }
 
-export type FocusEventListener = TouchableHighlightProps['onFocus'] | TextInputProps['onFocus']
-export type BlurEventListener = TouchableHighlightProps['onBlur'] | TextInputProps['onBlur']
+export type FocusEventListener = TouchableHighlightProps['onFocus'] | TextInputProps['onFocus'] | null
+export type BlurEventListener = TouchableHighlightProps['onBlur'] | TextInputProps['onBlur'] | null
 /** Hook that will apply the style reserved for active state if needed */
 export const useFocus = (onFocus: undefined | FocusEventListener, onBlur: undefined | BlurEventListener, needsFocus: boolean) => {
   const [focused, setFocused] = React.useState(false)

package/src/index.tsx

@@ -14,11 +14,9 @@ styled.Image = styled(RN.Image)
 styled.ImageBackground = styled(RN.ImageBackground)
 styled.KeyboardAvoidingView = styled(RN.KeyboardAvoidingView)
 styled.Modal = styled(RN.Modal)
-styled.NavigatorIOS = styled(RN.NavigatorIOS)
+styled.Pressable = styled(RN.Pressable)
 styled.ScrollView = styled(RN.ScrollView)
-styled.SnapshotViewIOS = styled(RN.SnapshotViewIOS)
 styled.Switch = styled(RN.Switch)
-styled.RecyclerViewBackedScrollView = styled(RN.RecyclerViewBackedScrollView)
 styled.RefreshControl = styled(RN.RefreshControl)
 styled.SafeAreaView = styled(RN.SafeAreaView)
 styled.Text = styled(RN.Text)

package/src/styleComponent.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/display-name */
 import React, { MouseEvent } from 'react'
-import { FlatList, FlatListProps, Platform, SectionList, SectionListProps, StyleProp, StyleSheet, TouchableHighlightProps, ViewProps, ViewStyle, VirtualizedList, VirtualizedListProps } from 'react-native'
+import { FlatList, FlatListProps, Platform, PressableProps, SectionList, SectionListProps, StyleProp, StyleSheet, TouchableHighlightProps, ViewProps, ViewStyle, VirtualizedList, VirtualizedListProps } from 'react-native'
 import convertStyle from './convertStyle'
 import cssToStyle from './cssToRN'
 import { useFontSize, useHover, useLayout, useScreenSize, useMediaQuery, useActive, useFocus, FocusEventListener, BlurEventListener } from './features'
@@ -26,15 +26,15 @@ type OptionalProps = {
   rnCSS?: `${string};`;
   onFocus?: FocusEventListener;
   onBlur?: BlurEventListener;
-  onPressIn?: TouchableHighlightProps['onPressIn'];
-  onPressOut?: TouchableHighlightProps['onPressOut'];
-  onResponderStart?: ViewProps['onResponderStart'];
-  onResponderRelease?: ViewProps['onResponderRelease'];
-  onStartShouldSetResponder?: ViewProps['onStartShouldSetResponder'];
-  onMouseEnter?: (event: MouseEvent) => void;
-  onMouseLeave?: (event: MouseEvent) => void;
+  onPressIn?: TouchableHighlightProps['onPressIn'] | null;
+  onPressOut?: TouchableHighlightProps['onPressOut'] | null;
+  onResponderStart?: ViewProps['onResponderStart'] | null;
+  onResponderRelease?: ViewProps['onResponderRelease'] | null;
+  onStartShouldSetResponder?: ViewProps['onStartShouldSetResponder'] | null;
+  onMouseEnter?: ((event: MouseEvent) => void) | null;
+  onMouseLeave?: ((event: MouseEvent) => void) | null;
   onLayout?: ViewProps['onLayout'];
-  children?: React.ReactNode;
+  children?: PressableProps['children'];
 }
 
 /** Converts the tagged template string into a css string */
@@ -69,11 +69,11 @@ function removeStyle (hash: string) {
 
 const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }, Props extends InitialProps & OptionalProps = InitialProps & OptionalProps>(Component: React.ComponentType<InitialProps>) => {
   const styledComponent = <S, >(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & Props>)[]) => {
-    const ForwardRefComponent = React.forwardRef<any, S & Props>((props: S & Props, ref) => {
+    const ForwardRefComponent = React.forwardRef<any, S & Props>((props, ref) => {
       const rem = React.useContext(RemContext)
       const shared = React.useContext(SharedValue)
       // Build the css string with the context
-      const css = React.useMemo(() => buildCSSString(chunks, functs, props, shared), [props, shared])
+      const css = React.useMemo(() => buildCSSString(chunks, functs, (props as unknown as S & Props), shared), [props, shared])
       // Store the style in RN format
       const rnStyle = React.useMemo(() => cssToStyle(css), [css])
 
@@ -172,11 +172,11 @@ const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }
       // em !== parentEm alone is a bit dangerous as the component would rerender when the font size change
       if (em !== parentEm || finalStyle.fontSize !== undefined) {
         return <FontSizeContext.Provider value={em}>
-          <Component ref={ref} {...props} {...newProps} />
+          <Component ref={ref} {...(props as unknown as InitialProps)} {...(newProps as unknown as InitialProps)} />
         </FontSizeContext.Provider>
       }
       else {
-        return <Component ref={ref} {...props} {...newProps} />
+        return <Component ref={ref} {...(props as unknown as InitialProps)} {...(newProps as unknown as InitialProps)} />
       }
     })
     return ForwardRefComponent as React.ForwardRefExoticComponent<Props & S & { ref?: React.Ref<any> }>
@@ -187,8 +187,9 @@ const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }
     const ComponentWithAttrs = styledComponent(chunks, ...functs)
     // We need to limit the props control to only Result https://www.typescriptlang.org/play?#code/GYVwdgxgLglg9mABBATgUwIZTQUQB7ZgAmaRAwnALYAOAPAAopzUDOAfABQU0BciH1Jqz6NmLAJSIAvG0QYwAT0kBvAFCJkCFlET5CJYt2rT+gsSKETpstRo3ooIFEiMDL49YgC+nvWmL+5FTUAHRYUCgsJrQASmgsIAA2OmgEgVH0GCiwGIkMlmyc4ZF8cQnJkjKItnYQWjqMaHVgwDAA5k5YpEYmbua6eBCJICT5YgA0iGVJUGyVNp52iA5OLsEcyiFbZqyTW2FQESxeHks+SyvOiI3NrR0oXUE0nufLaI5XfgGGwao+qqBILAEIgen1hNVENhtHxtCgYGA2pNtApEmhYREEW1vCpPJckDsWH9VM1tNd0Ld2j0pMh0F0viQntQuMFxAcjhsofEoHwAORwADWvJxqhuCDurmUiBRaL50KgwpOQA
     const ForwardRefComponent = React.forwardRef<any, Omit<Props, keyof Result> & Part & Partial<Pick<Props, Extract<keyof Props, keyof Result>>>>((props, ref) => {
-      const attrs = (opts instanceof Function) ? opts(props as Props & Part) : opts
-      return <ComponentWithAttrs ref={ref} {...(props as Props & Part)} {...attrs} />
+      const castProps = props as unknown as Props & Part
+      const attrs = (opts instanceof Function) ? opts(castProps) : opts
+      return <ComponentWithAttrs ref={ref} {...castProps} {...attrs} />
     })
     // TODO : Find a way to remove from the Props the properties affected by opts
     return ForwardRefComponent

package/src/useTheme.tsx

@@ -20,9 +20,9 @@ export const useTheme = () => React.useContext(SharedValue)
  * @returns A component with the theme prop
  */
 export const withTheme = <T, >(Component: React.ComponentType<T>) => {
-  const ThemedComponent = React.forwardRef<React.Component, T>((props: T, ref) => {
+  const ThemedComponent = React.forwardRef<React.Component, T>((props, ref) => {
     const theme = useTheme()
-    return <Component ref={ref} theme={theme} {...props} />
+    return <Component ref={ref} theme={theme} {...(props as unknown as T)} />
   })
   ThemedComponent.displayName = 'ThemedComponent'
   return ThemedComponent