From 0a71abe980c6644656c1b174ddc6c0137526e1f6 Mon Sep 17 00:00:00 2001
From: ankit-tailor <tailorankit3345@gmail.com>
Date: Mon, 30 Oct 2023 16:09:31 +0530
Subject: [PATCH 1/4] fix: circular deps

---
 packages/react/src/Theme.tsx | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/Theme.tsx b/packages/react/src/Theme.tsx
index 451a6618..77f265f5 100644
--- a/packages/react/src/Theme.tsx
+++ b/packages/react/src/Theme.tsx
@@ -1,6 +1,6 @@
 import { View } from 'react-native';
+import type { ViewProps } from 'react-native';
 import * as React from 'react';
-import { styled } from './styled';
 type Config = any;
 
 export const defaultConfig: { theme?: string } = {
@@ -10,16 +10,14 @@ export const defaultConfig: { theme?: string } = {
 const defaultContextData: Config = defaultConfig;
 const ThemeContext = React.createContext<Config>(defaultContextData);
 // Can be discussed should we provide flex 1 by default or not.
-const StyledView = styled(
-  View,
-  {
-    // flex: 1
-  },
-  { componentName: 'GluestackThemeView' }
-);
 
-// @ts-ignore
-export const Theme: typeof StyledView = ({ children, name, ...props }) => {
+export const Theme = ({
+  children,
+  name,
+  ...props
+}: ViewProps & {
+  name: string;
+}) => {
   const contextValue = React.useMemo(() => {
     return {
       theme: name,
@@ -29,9 +27,9 @@ export const Theme: typeof StyledView = ({ children, name, ...props }) => {
   return (
     <ThemeContext.Provider value={contextValue}>
       {/* @ts-ignore */}
-      <StyledView dataSet={{ 'theme-id': name }} {...props}>
+      <View dataSet={{ 'theme-id': name }} {...props}>
         {children}
-      </StyledView>
+      </View>
     </ThemeContext.Provider>
   );
 };

From 923cf52c6d76ba424e7fea716bf93e34505753fb Mon Sep 17 00:00:00 2001
From: ankit-tailor <tailorankit3345@gmail.com>
Date: Mon, 30 Oct 2023 16:10:14 +0530
Subject: [PATCH 2/4] v1.0.10-alpha.0

---
 packages/react/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 63934374..168e1074 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "1.0.9",
+  "version": "1.0.10-alpha.0",
   "keywords": [
     "React Native",
     "Next.js",

From 14b65d6ac8a78230470801fa8ce6e0475b30acec Mon Sep 17 00:00:00 2001
From: ankit-tailor <tailorankit3345@gmail.com>
Date: Mon, 30 Oct 2023 16:15:14 +0530
Subject: [PATCH 3/4] fix: extend theme example

---
 .../api/ExtendComponents/ExtendComponents.tsx | 41 +++----------------
 1 file changed, 6 insertions(+), 35 deletions(-)

diff --git a/example/storybook/src/api/ExtendComponents/ExtendComponents.tsx b/example/storybook/src/api/ExtendComponents/ExtendComponents.tsx
index 9c99e08d..1c3eebb8 100644
--- a/example/storybook/src/api/ExtendComponents/ExtendComponents.tsx
+++ b/example/storybook/src/api/ExtendComponents/ExtendComponents.tsx
@@ -1,48 +1,19 @@
 import React from 'react';
 import { View, Text } from 'react-native';
-import { Wrapper } from '../../components/Wrapper';
-import { Camera } from 'lucide-react-native';
-import { StyledHeading } from '../../ui-components/AsForwarder';
-import { H2 } from '@expo/html-elements';
-import {
-  StyledProvider,
-  createComponents,
-  styled,
-} from '@gluestack-style/react';
+import { StyledProvider, styled } from '@gluestack-style/react';
 import { config } from '../../components/nb.config';
 
-config.components = {
-  Box: {
-    theme: {
-      bg: '$red500',
-      p: '$10',
-      // props: {
-      // ':initial': {
-      //   scale: 0.5,
-      // },
-      // ':animate': {
-      //   scale: 1,
-      // },
-      // props: {
-      //   p: '$5',
-      // },
-      // },
-    },
-  },
-};
-
 const Box = styled(
-  AnimatedView,
-  {},
+  View,
+  {
+    bg: '$amber400',
+    p: '$10',
+  },
   {
     componentName: 'Box',
   }
 );
-import Svg from 'react-native-svg';
-import { AnimatedView } from '@gluestack-style/animation-resolver';
-
 export function ExtendComponentsExample() {
-  const [state, setState] = React.useState(false);
   return (
     <StyledProvider config={config} colorMode={'dark'}>
       <View

From 4aefeb408105587fd7e09011fc35eaaa2a3b63a0 Mon Sep 17 00:00:00 2001
From: ankit-tailor <tailorankit3345@gmail.com>
Date: Mon, 30 Oct 2023 16:16:28 +0530
Subject: [PATCH 4/4] chore: v1.0.10

---
 packages/react/CHANGELOG.md | 6 ++++++
 packages/react/package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 050eca45..0caade93 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @gluestack-style/react
 
+## 1.0.10
+
+### Patch Changes
+
+- Fixed theme and styled circular dependency
+
 ## 1.0.9
 
 ### Patch Changes
diff --git a/packages/react/package.json b/packages/react/package.json
index 168e1074..011410b4 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "1.0.10-alpha.0",
+  "version": "1.0.10",
   "keywords": [
     "React Native",
     "Next.js",