chore(Reanimated): use Worklets from npm on 4.1-stable branch (#8705)

Author: tjzel

apps/common-app/package.json

@@ -37,7 +37,7 @@
     "react-native-safe-area-context": "5.6.0",
     "react-native-screens": "4.14.1",
     "react-native-svg": "15.12.1",
-    "react-native-worklets": "workspace:*",
+    "react-native-worklets": "0.7.0",
     "react-strict-dom": "0.0.27"
   },
   "devDependencies": {

apps/common-app/src/apps/css/components/cards/RouteCard.tsx

@@ -1,7 +1,7 @@
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import { useNavigation } from '@react-navigation/native';
-import type { PropsWithChildren } from 'react';
+import type { JSX, PropsWithChildren } from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
 
 import { Text } from '@/apps/css/components/core';

apps/common-app/src/apps/css/components/examples/ExamplesList.tsx

@@ -1,4 +1,4 @@
-import type { ComponentType } from 'react';
+import type { ComponentType, JSX } from 'react';
 import type { CSSAnimationProperties } from 'react-native-reanimated';
 
 import { stringifyConfig } from '@/apps/css/utils';

apps/common-app/src/apps/css/components/misc/ActionSheetDropdown.tsx

@@ -1,5 +1,5 @@
 import { Portal } from '@gorhom/portal';
-import type { PropsWithChildren, ReactNode } from 'react';
+import type { JSX, PropsWithChildren, ReactNode } from 'react';
 import { useRef, useState } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import {

apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/base/appearance/colors/ColorProperties.tsx

@@ -22,6 +22,7 @@ import {
 } from '@/apps/css/components';
 import { stringifyConfig } from '@/apps/css/utils';
 import { colors, radius, sizes, spacing } from '@/theme';
+import type { JSX } from 'react';
 
 const sharedConfig: CSSAnimationSettings = {
   animationDirection: 'alternate',

apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/common/FillAndColor.tsx

@@ -7,6 +7,7 @@ import { Circle, Polygon, Svg } from 'react-native-svg';
 
 import { ExamplesScreen } from '@/apps/css/components';
 import type { AnyRecord } from '@/types';
+import type { JSX } from 'react';
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const AnimatedPolygon = Animated.createAnimatedComponent(Polygon);

apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/common/Stroke.tsx

@@ -8,6 +8,7 @@ import { Circle, Path, Svg } from 'react-native-svg';
 
 import { ExamplesScreen } from '@/apps/css/components';
 import { colors } from '@/theme';
+import type { JSX } from 'react';
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const AnimatedPath = Animated.createAnimatedComponent(Path);

apps/common-app/src/apps/css/examples/animations/screens/animationSettings/components/ExampleScreen.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { JSX, ReactNode } from 'react';
 import { useMemo } from 'react';
 import type { CSSAnimationProperties } from 'react-native-reanimated';
 

apps/common-app/src/apps/css/examples/animations/screens/animationSettings/components/ExamplesListCard.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, type JSX } from 'react';
 import { StyleSheet, View } from 'react-native';
 import type {
   CSSAnimationProperties,

apps/common-app/src/apps/css/examples/transitions/screens/transitionSettings/components/ExampleScreen.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { JSX, ReactNode } from 'react';
 import { useMemo } from 'react';
 import type {
   CSSTransitionProperties,