diff --git a/example/expo-project/App.tsx b/example/expo-project/App.tsx
index 08dc15509b..3c6733f813 100644
--- a/example/expo-project/App.tsx
+++ b/example/expo-project/App.tsx
@@ -17,7 +17,7 @@ TempProvider.displayName = 'Provider';
 
 export const Provider = ({ children }: any) => {
   return (
-    <TempProvider config={config.theme}>
+    <TempProvider config={config}>
       <Box
         sx={{
           _dark: {
diff --git a/example/next-project/pages/_app.tsx b/example/next-project/pages/_app.tsx
index 0e15aaf6c2..5f99ca3e79 100644
--- a/example/next-project/pages/_app.tsx
+++ b/example/next-project/pages/_app.tsx
@@ -6,7 +6,7 @@ import { config } from '../../storybook/src/gluestack-ui.config';
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <GluestackUIProvider config={config.theme}>
+    <GluestackUIProvider config={config}>
       <Component {...pageProps} />
     </GluestackUIProvider>
   );
diff --git a/example/storybook/.ondevice/preview.js b/example/storybook/.ondevice/preview.js
index 4620804450..4bb001a8a0 100644
--- a/example/storybook/.ondevice/preview.js
+++ b/example/storybook/.ondevice/preview.js
@@ -1,11 +1,10 @@
 import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
 import { addParameters } from '@storybook/client-api';
-import { GluestackUIProvider } from '@gluestack-ui/themed';
-import { config } from '@gluestack-ui/themed';
+import { GluestackUIProvider, Box, VStack } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
+
 import { useState } from 'react';
 
-// export const decorators = [];
-//
 export const parameters = {
   backgrounds: {
     default: 'plain',
@@ -46,8 +45,10 @@ export const decorators = [
       }
     }
     return (
-      <GluestackUIProvider config={config.theme}>
-        <Story />
+      <GluestackUIProvider config={config}>
+        <Box flex={1} p="$10">
+          <Story />
+        </Box>
       </GluestackUIProvider>
     );
   },
@@ -74,7 +75,7 @@ addParameters({
       }
       return (
         <DocsContainer context={context}>
-          <GluestackUIProvider config={config.theme} colorMode={getColorMode()}>
+          <GluestackUIProvider config={config} colorMode={getColorMode()}>
             {children}
           </GluestackUIProvider>
         </DocsContainer>
diff --git a/example/storybook/.storybook/gluestack-ui.config.ts b/example/storybook/.storybook/gluestack-ui.config.ts
index 60ea3dd3ff..688c09e2e4 100644
--- a/example/storybook/.storybook/gluestack-ui.config.ts
+++ b/example/storybook/.storybook/gluestack-ui.config.ts
@@ -1,9 +1,10 @@
 // gluestack-ui.config.ts
 import { LinearGradient } from 'expo-linear-gradient';
-import { createConfig, config as defaultConfig } from '@gluestack-ui/themed';
+import { createConfig } from '@gluestack-ui/themed';
+import { config as defaultConfig } from '@gluestack-ui/config';
 
 export const config = createConfig({
-  ...defaultConfig.theme,
+  ...defaultConfig,
   components: {
     LinearGradient: {
       theme: {
diff --git a/example/storybook/.storybook/main.js b/example/storybook/.storybook/main.js
index 43e2604d69..61ca28403a 100644
--- a/example/storybook/.storybook/main.js
+++ b/example/storybook/.storybook/main.js
@@ -1,5 +1,4 @@
 const path = require('path');
-
 // console.log(path.resolve('../../', 'node_modules/@gluestack-style/react'));
 module.exports = {
   stories: [
diff --git a/example/storybook/.storybook/preview.js b/example/storybook/.storybook/preview.js
index 92e5506867..b7463352d9 100644
--- a/example/storybook/.storybook/preview.js
+++ b/example/storybook/.storybook/preview.js
@@ -1,7 +1,7 @@
 import { addParameters } from '@storybook/client-api';
 import { DocsContainer } from '@storybook/addon-docs/blocks';
+import { config } from '@gluestack-ui/config';
 import { Center, GluestackUIProvider } from '@gluestack-ui/themed';
-import { config } from './gluestack-ui.config';
 import { useState } from 'react';
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -19,19 +19,18 @@ export const parameters = {
       method: '',
       order: [
         'Overview',
-        ['Introduction'],
+        ['Introduction', 'All Components'],
         'Getting Started',
         ['Installation', 'VS Code Extensions'],
         'Core Concepts',
-        ['Themed Library', 'Unstyled Components', 'Accessibility'],
+        ['Themed Library', 'Unstyled Library', 'Accessibility'],
         'Performance',
         ['Overview', 'Benchmarks'],
-        'Theme',
+        'Theme Configuration',
         [
-          'Overview',
-          'Default Tokens',
-          'Customizing Tokens',
-          'Customizing Components',
+          'Theme',
+          ['Default Tokens', 'Default Components'],
+          'Customizing Theme',
         ],
         'Styling',
         [
@@ -46,7 +45,6 @@ export const parameters = {
         ],
         'Components',
         [
-          'Component Catalog',
           'Provider',
           ['GluestackUIProvider'],
           'Typography',
@@ -140,7 +138,11 @@ export const decorators = [
       }
     }
     return (
-      <GluestackUIProvider config={config} colorMode={getColorMode()}>
+      <GluestackUIProvider
+        config={config}
+        // colorMode={getColorMode()}
+        // components={components}
+      >
         <Center>
           <Story />
         </Center>
@@ -168,6 +170,7 @@ addParameters({
           return isDark ? 'dark' : 'light';
         }
       }
+
       return (
         <DocsContainer context={context}>
           <GluestackUIProvider config={config} colorMode={getColorMode()}>
diff --git a/example/storybook/babel.config.js b/example/storybook/babel.config.js
index 31928e65ae..8a6071bd4e 100644
--- a/example/storybook/babel.config.js
+++ b/example/storybook/babel.config.js
@@ -1,4 +1,5 @@
 const path = require('path');
+console.log('herher');
 module.exports = function (api) {
   api.cache(true);
   return {
@@ -8,10 +9,28 @@ module.exports = function (api) {
         ? [
             'module-resolver',
             {
-              '@gluestack-ui/themed': path.join(
-                __dirname,
-                '../../packages/themed/src'
-              ),
+              alias: {
+                // '@gluestack-ui/themed': path.join(
+                //   __dirname,
+                //   '../../packages/themed/src'
+                // ),
+                // '@gluestack-ui/config': path.join(
+                //   __dirname,
+                //   '../../packages/config/src/gluestack-ui.config'
+                // ),
+                // '@gluestack-style/react': path.join(
+                //   __dirname,
+                //   '../../../dank-style/packages/react/src'
+                // ),
+                // '@gluestack-style/animation-resolver': path.join(
+                //   __dirname,
+                //   '../../../dank-style/packages/animation-resolver/src'
+                // ),
+                // '@gluestack-style/legend-motion-animation-driver': path.join(
+                //   __dirname,
+                //   '../../../dank-style/packages/animation-legend-motion-driver/src'
+                // ),
+              },
             },
           ]
         : [
diff --git a/example/storybook/package.json b/example/storybook/package.json
index 3d0993df6a..3805cdf3ba 100644
--- a/example/storybook/package.json
+++ b/example/storybook/package.json
@@ -24,9 +24,6 @@
   "dependencies": {
     "@expo/html-elements": "^0.4.2",
     "@geometricpanda/storybook-addon-iframe": "^0.2.2",
-    "@gluestack-style/animation-plugin": "^0.1.11",
-    "@gluestack-style/react": "^0.2.50",
-    "@gluestack-ui/themed": "*",
     "@gluestack/design-system": "^0.4.70",
     "@legendapp/motion": "^2.2.0",
     "@react-aria/button": "^3.7.0",
@@ -49,9 +46,12 @@
     "expo-status-bar": "~1.4.2",
     "fs": "^0.0.1-security",
     "lucide-react-native": "^0.236.0",
+    "next": "^13.5.3",
     "prism-react-renderer": "^1.3.5",
     "re-resizable": "^6.9.11",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native": "0.72.5",
     "react-native-gesture-handler": "^2.12.1",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-svg": "13.4.0",
diff --git a/example/storybook/src/CLI/gluestack-ui-scripts/index.stories.mdx b/example/storybook/src/CLI/gluestack-ui-scripts/index.stories.mdx
index ae91272521..d89c4374ff 100644
--- a/example/storybook/src/CLI/gluestack-ui-scripts/index.stories.mdx
+++ b/example/storybook/src/CLI/gluestack-ui-scripts/index.stories.mdx
@@ -26,7 +26,7 @@ import {
 
 `@gluestack-ui/themed` is a component library which provides universal, accessible, interactive, styled components.
 
-The accessibility, interactivity and other features of the components are provided by `@gluestack-ui/themed`. The styling of the components is done by using another library [gluestack-style](https://style.gluestack.io/). We can use customised styles, theme tokens, dark and light mode, breakpoints etc with the help of `@gluestack-style`
+The accessibility, interactivity and other features of the components are provided by `@gluestack-ui/themed`. The styling of the components is done by using another library [gluestack-style](https://style.gluestack.io/style/). We can use customised styles, theme tokens, dark and light mode, breakpoints etc with the help of `@gluestack-style`
 
 By default gluestack-ui components comes with a default base styling for all components, which is acheived when the components are wrapped with a Provider that takes in a theme file. `@gluestack-ui/themed` ships a theme created by team of designers after a lot of research. But what if there is a need to customise the base styling for all components or just the theme file. Don't worry we got you covered.
 
diff --git a/example/storybook/src/advanced/Animations/index.stories.mdx b/example/storybook/src/advanced/Animations/index.stories.mdx
index 3e7d68a7b4..9296cab486 100644
--- a/example/storybook/src/advanced/Animations/index.stories.mdx
+++ b/example/storybook/src/advanced/Animations/index.stories.mdx
@@ -14,14 +14,17 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 # Animations
 
-gluestack-ui leverages the power of the [Animation plugin](https://style.gluestack.io/docs/plugins/animation-plugin) from [style.gluestack.io](https://style.gluestack.io) to provide animations for a more engaging user experience. By default, all of our animated components are built using the [@legendapp/motion](https://legendapp.com/open-source/motion/), which provides declarative animations for React Native.
+gluestack-ui leverages the power of the [Animation plugin](/style/docs/plugins/animation-plugin) from [gluestack.io/style](/style) to provide animations for a more engaging user experience. By default, all of our animated components are built using the [@legendapp/motion](https://legendapp.com/open-source/motion/), which provides declarative animations for React Native.
 
 ### Usage:
 
-By default, gluestack-ui exports styled function with `animation plugin` enabled. You can use it to create your own animated components.
+By default, gluestack-ui/themed comes with with `animation plugin` plugin installed with `@legendapp/motion` animation driver. You can use the Animatable Components from `@gluestack-style/animation-resolver` and from them you can create your own animated components.
 
 ```jsx
-const Box = styled(Motion.View, {
+import { AnimatedView } from '@gluestack-style/animation-resolver';
+import { styled } from '@gluestack-style/react';
+
+const AnimatedBox = styled(AnimatedView, {
   ':initial': {
     opacity: 0,
   },
@@ -34,30 +37,43 @@ const Box = styled(Motion.View, {
 });
 ```
 
-## Overlay components:
+or You can also extend the style of the animated components and customize it.
 
-gluestack-ui also provides a set of overlay components that can be used to create a modal-like experience. All the animation props works out of the box with these components. However, to animate component on exit you need to pass [AnimatePresence](https://legendapp.com/open-source/motion/animate-presence/) while creating component.
+```jsx
+const componentTheme = createComponents({
+  ...defaultConfig.components,
+  ModalContent: {
+    theme: {
+      ':initial': {
+        bg: 'white',
+      },
+    },
+  },
+});
 
-If you are using [@legendapp/motion](https://legendapp.com/open-source/motion/), you can use `<component-name>.AnimatePresence`, which internally uses `AnimatePresence` from `@legendapp/motion`.
+// Pass this componentTheme in the provider.
+```
 
-### Why ComponentName.AnimatePresence and not AnimatePresence from @legendapp/motion?
+## Overlay components:
 
-For exit animation, `@legendapp/motion` internally loops over children and tries to find the `exit` prop directly. However, with our wrapper component, we can pass the `exit` prop to the component, and it will work as expected with `AnimatePresence`.
+gluestack-ui also provides a set of overlay components that can be used to create a modal-like experience. All the animation props works out of the box with these components. However, to animate component on exit you need to pass [AnimatePresence](https://legendapp.com/open-source/motion/animate-presence/) while creating component.
 
-> Note: If you are using any other animation library, you can use `AnimatePresence` or something similar(which animates component on exit) from your library.
+If you can use `AnimatePresence` from `@gluestack-style/animation-resolver`, which internally uses `AnimatePresence` from your chosen driver.
 
 ### Example:
 
 ```jsx
+import { AnimatePresence } from '@gluestack-style/animation-resolver';
+
 export const Tooltip = createTooltip({
   Root,
   Content,
-  AnimatePresence: Content.AnimatePresence, // Can be AnimatePresence from the library you are using
+  AnimatePresence, // Can be AnimatePresence from the library you are using
 });
 ```
 
 ## Advanced concepts for animations in gluestack-ui
 
-However, you are not limited to use only that library. You can use any declarative animation library you prefer, such as [framer-motion](https://www.framer.com/motion/), and [moti](https://moti.fyi/), or others. You can add aliases for animation props from your library. For example, if you are using moti, you can add aliases for `from`, `animate`, and `exit` props.
+However, you are not limited to use only `@legendapp/motion`. You can use any declarative animation library you prefer, such as [framer-motion](https://www.framer.com/motion/), and [moti](https://moti.fyi/), or others. You can add your own animation driver to the `animation-resolver` plugin and use it with gluestack-ui. Currently we only provide 2 drivers, `@legendapp/motion` and `moti`.
 
-You can refer to [animation plugin](https://style.gluestack.io/docs/plugins/animation-plugin) documentation for more details.
+You can refer to [customizing animations](/ui/docs/theme-configuration/customizing-theme) section's documentation for more details on customizing the Animation Components.
diff --git a/example/storybook/src/advanced/Fonts/index.stories.mdx b/example/storybook/src/advanced/Fonts/index.stories.mdx
index bdbd888606..eb8a029b70 100644
--- a/example/storybook/src/advanced/Fonts/index.stories.mdx
+++ b/example/storybook/src/advanced/Fonts/index.stories.mdx
@@ -142,7 +142,7 @@ Add the font name in the `gluestack.config.js` file in the `fonts` object.
 
 ## Advanced concepts for fonts in gluestack-ui
 
-In gluestack-ui, components are styled using `styled` provided by `@gluestack-style/react` package, [check here](https://style.gluestack.io/).
+In gluestack-ui, components are styled using `styled` provided by `@gluestack-style/react` package, [check here](https://style.gluestack.io/style
 This package provides a way to add plugins using `createStyled` function.
 
 ```bash
@@ -165,6 +165,6 @@ const StyledText = styled(Text, {
 });
 ```
 
-You can use this `styled` function which has the [font plugin](https://style.gluestack.io/docs/plugins/fonts-plugin) added to it to style your components. For gluestack-ui components, we have used this styled function to style the components.
+You can use this `styled` function which has the [font plugin](https://style.gluestack.io/styleplugin) added to it to style your components. For gluestack-ui components, we have used this styled function to style the components.
 
 Similarly, we can pass font styles to any component and then use the returned component (with font styles added).
diff --git a/example/storybook/src/components/DataDisplay/Badge/index.stories.mdx b/example/storybook/src/components/DataDisplay/Badge/index.stories.mdx
index 9f4ca0abaa..365d6a2846 100644
--- a/example/storybook/src/components/DataDisplay/Badge/index.stories.mdx
+++ b/example/storybook/src/components/DataDisplay/Badge/index.stories.mdx
@@ -51,10 +51,6 @@ import {
 } from '@gluestack/design-system';
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Badge** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Badge/styled-components) to learn about default styling of Badge component.
-
 <AppProvider>
   <CodePreview
     metaData={{
@@ -112,11 +108,13 @@ Following is the default implementation of the **Badge** component without any a
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
 
-```bash
+```jsx
 import { Badge } from '@gluestack-ui/themed';
 ```
 
@@ -133,25 +131,71 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Badge
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_text</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style BadgeText Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_icon</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style BadgeIcon Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### BadgeText
 
 It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
 
 #### BadgeIcon
 
-Contains all Icon related layout style props and actions. It inherits all the properties of gluestack Style's [AsForwarder](https://style.gluestack.io/docs/api/as-forwarder) component.
+Contains all Icon related layout style props and actions. It inherits all the properties of gluestack Style's [AsForwarder](https://style.gluestack.io/styleer) component.
+
+## Themed
+
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
 ### Props
 
-Badge component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Badge component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Badge
 
@@ -232,7 +276,7 @@ An example of the Badge component being used with the Avatar component to displa
       code: `
         <VStack space="2xl">
           <HStack space="md">
-            <Avatar >
+            <Avatar>
               <AvatarFallbackText>SS</AvatarFallbackText>
               <AvatarImage
                 source={{
@@ -417,15 +461,21 @@ An example of the Badge component being used with the Composition component, all
 
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
 ### Customizing the Badge
 
-For customizing the Badge, you have to map styled view to Badge You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+For customizing the Badge, you have to map styled view to Badge You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of the component can be found in the `components/badge` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Badge) of the styled `Badge` component.
+Default styling of the component can be found in the `components/badge` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Badge) of the styled `Badge` component.
 
 ```jsx
 // import the styles
@@ -444,3 +494,4 @@ export default () => (
   </Badge>
 );
 ```
+-->
diff --git a/example/storybook/src/components/DataDisplay/Divider/index.stories.mdx b/example/storybook/src/components/DataDisplay/Divider/index.stories.mdx
index 76d9db4b37..f3f1aa1acd 100644
--- a/example/storybook/src/components/DataDisplay/Divider/index.stories.mdx
+++ b/example/storybook/src/components/DataDisplay/Divider/index.stories.mdx
@@ -27,10 +27,6 @@ import {
 } from '@gluestack/design-system';
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Divider** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Divider/styled-components) to learn about default styling of Divider component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -63,11 +59,13 @@ Following is the default implementation of the **Divider** component without any
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
 
-```bash
+```jsx
 import { Divider } from '@gluestack-ui/themed';
 ```
 
@@ -79,17 +77,21 @@ The structure provided below can help you identify and understand a divider comp
 export default () => <Divider />;
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Divider
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
+## Themed
+
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
+
 ### Props
 
-Divider component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Divider component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Divider
 
@@ -443,15 +445,21 @@ A Divider component with added content allows for the inclusion of additional te
 
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
 ### Customizing the Divider
 
-For customizing the Divider, you have to map styled view to Divider. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+For customizing the Divider, you have to map styled view to Divider. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of the component can be found in the `components/divider` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Divider) of the styled `Divider` component.
+Default styling of the component can be found in the `components/divider` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Divider) of the styled `Divider` component.
 
 ```jsx
 // import the styles
@@ -468,3 +476,4 @@ const Divider = createDivider({
 // Using the Divider component
 export default () => <Divider />;
 ```
+-->
diff --git a/example/storybook/src/components/DataDisplay/Table/index.stories.mdx b/example/storybook/src/components/DataDisplay/Table/index.stories.mdx
index c2d34b0eaf..c01ba43ccc 100644
--- a/example/storybook/src/components/DataDisplay/Table/index.stories.mdx
+++ b/example/storybook/src/components/DataDisplay/Table/index.stories.mdx
@@ -428,7 +428,7 @@ We provide in-depth information on how to customize and extend the component's f
 
 ### Customizing the Table
 
-We have a function called createTable which can be used to create a custom table component. This function takes in a configuration object which contains the styled components that you want to use for the Table. You can refer [style.gluestack.io](https://style.gluestack.io) for more information on how to use styled components.
+We have a function called createTable which can be used to create a custom table component. This function takes in a configuration object which contains the styled components that you want to use for the Table. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 ### Usage
 
diff --git a/example/storybook/src/components/Disclosure/Accordion/index.stories.mdx b/example/storybook/src/components/Disclosure/Accordion/index.stories.mdx
index 1dd01bd779..b3f3ee7148 100644
--- a/example/storybook/src/components/Disclosure/Accordion/index.stories.mdx
+++ b/example/storybook/src/components/Disclosure/Accordion/index.stories.mdx
@@ -296,9 +296,9 @@ We provide in-depth information on how to customize and extend the component's f
 
 ### Customizing the Accordion
 
-We have a function called createAccordion which can be used to create a custom accordion component. This function takes in a configuration object which contains the styled components that you want to use for the Accordion. You can refer [style.gluestack.io](https://style.gluestack.io) for more information on how to use styled components.
+We have a function called createAccordion which can be used to create a custom accordion component. This function takes in a configuration object which contains the styled components that you want to use for the Accordion. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
-You can read more on how to animate components [here](https://ui.gluestack.io/docs/advanced/animations).
+You can read more on how to animate components [here](/ui/docs/advanced/animations).
 
 ### Usage
 
diff --git a/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.tsx b/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.tsx
index 9aefb28b2e..5157776cde 100644
--- a/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.tsx
+++ b/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.tsx
@@ -28,10 +28,10 @@ import {
   InputSlot,
   AddIcon,
   Image,
-  config,
   Text,
   Center,
 } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
 
 const ActionsheetBasic = ({ showActionsheetProp, ...props }: any) => {
   const [showActionsheet, setShowActionsheet] = React.useState(false);
diff --git a/example/storybook/src/components/Disclosure/Actionsheet/index.stories.mdx b/example/storybook/src/components/Disclosure/Actionsheet/index.stories.mdx
index 5bfe1c79d6..bfcc5175ed 100644
--- a/example/storybook/src/components/Disclosure/Actionsheet/index.stories.mdx
+++ b/example/storybook/src/components/Disclosure/Actionsheet/index.stories.mdx
@@ -32,7 +32,6 @@ import {
   ActionsheetSectionHeaderText,
   Button,
   ButtonText,
-  config,
 } from './Actionsheet';
 import {
   VStack,
@@ -54,7 +53,6 @@ import { Image, Text, Box } from './ActionsheetAvoidKeyboard';
 import { Icon, TrashIcon, ShareIcon } from './ActionsheetIcon';
 import { PlayIcon, FavouriteIcon, CloseIcon } from './ActionsheetIcon';
 import { transformedCode } from '../../../utils';
-
 import {
   AppProvider,
   CodePreview,
@@ -65,13 +63,10 @@ import {
   InfoIcon,
   Alert,
 } from '@gluestack/design-system';
+import { config } from '@gluestack-ui/config';
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Actionsheet** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Actionsheet/styled-components) to learn about default styling of Actionsheet component.
-
-<AppProvider config={config.theme}>
+<AppProvider config={config}>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -87,7 +82,7 @@ function App(){
         </Button>
         <Actionsheet isOpen={showActionsheet} onClose={handleClose} zIndex={999}>
           <ActionsheetBackdrop />
-          <ActionsheetContent zIndex={999}>
+          <ActionsheetContent h='$72' zIndex={999}>
             <ActionsheetDragIndicatorWrapper>
               <ActionsheetDragIndicator />
             </ActionsheetDragIndicatorWrapper>
@@ -135,6 +130,8 @@ function App(){
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
@@ -163,9 +160,9 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Actionsheet
 
@@ -402,6 +399,38 @@ It is React Native's [Pressable](https://reactnative.dev/docs/pressable) compone
 
 It inherits all the properties of [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. With this Actionsheet component, you have the flexibility to use any declarative animation library that suits your needs.
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_sectionHeaderText</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style ActionsheetSectionHeaderText Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### ActionsheetDragIndicatorWrapper
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
@@ -414,6 +443,48 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 
 It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_text</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style ActionsheetItemText Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_icon</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style ActionsheetIcon Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### ActionsheetItemText
 
 It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
@@ -465,17 +536,9 @@ We have outlined the various features that ensure the Actionsheet component is a
 
 - VoiceOver: When the actionsheet is focused, the screen reader will announce the button group .
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+## Themed
 
-- `@gluestack-ui/hooks`
-- `@gluestack-ui/overlay`
-- `@gluestack-ui/transitions`
-- `@gluestack-ui/utils`
-- `@react-native-aria/focus`
-- `@react-native-aria/interactions`
-- `@react-native-aria/dialog`
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
 ## Examples
 
@@ -954,7 +1017,7 @@ The Actionsheet with Flat List is a variation of the Actionsheet component that
 
 The Actionsheet with SectionList is a variation of the Actionsheet component that displays a sectioned list of options. It's commonly used in apps to organize options into different categories or sections for better readability and navigation.
 
-Default styling of the component can be found in the `components/actionsheet` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/patch/example/storybook/src/ui-components/Actionsheet) of the styled `Actionsheet` component.
+Default styling of the component can be found in the `components/actionsheet` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Actionsheet) of the styled `Actionsheet` component.
 
 <AppProvider>
   <CodePreview
@@ -1038,7 +1101,7 @@ Default styling of the component can be found in the `components/actionsheet` fi
 
 ## Unstyled
 
-We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
 
 <!--
 
@@ -1610,7 +1673,7 @@ function App(){
   ActionsheetItem,
   ActionsheetItemText,
       VStack,
-      HStack,
+      HStack,https://style.gluestack.io/style
       Icon,
       Box,
       FormControl,
@@ -1702,17 +1765,15 @@ function App(){
 </AppProvider>
 
 
--->
-
 ### Customizing the Actionsheet
 
-We have a function called `createActionsheet` which can be used to create a custom actionsheet component. This function takes in a configuration object which contains the styled components that you want to use for the Actionsheet You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createActionsheet` which can be used to create a custom actionsheet component. This function takes in a configuration object which contains the styled components that you want to use for the Actionsheet You can refer [gluestack.io/style](/style) for more information on how to use styled components.
 
-You can read more on how to animate components [here](https://ui.gluestack.io/docs/advanced/animations).
+You can read more on how to animate components [here](/ui/docs/advanced/animations).
 
 #### Usage
 
-Default styling of all these components can be found in the `components/core/actionsheet` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Actionsheet) of the styled `Actionsheet` components.
+Default styling of all these components can be found in the `components/core/actionsheet` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Actionsheet) of the styled `Actionsheet` components.
 
 ```jsx
 // import the styles
@@ -1755,3 +1816,5 @@ export default () => (
   </Actionsheet>
 );
 ```
+
+-->
diff --git a/example/storybook/src/components/Disclosure/Tabs/index.stories.mdx b/example/storybook/src/components/Disclosure/Tabs/index.stories.mdx
index bd4693cdd5..856f7f8827 100644
--- a/example/storybook/src/components/Disclosure/Tabs/index.stories.mdx
+++ b/example/storybook/src/components/Disclosure/Tabs/index.stories.mdx
@@ -333,13 +333,13 @@ We provide in-depth information on how to customize and extend the component's f
 
 ### Customizing the Tabs
 
-We have a function called createTabs which can be used to create a custom tabs component. This function takes in a configuration object which contains the styled components that you want to use for the Tabs You can refer [style.gluestack.io](https://style.gluestack.io) for more information on how to use styled components.
+We have a function called createTabs which can be used to create a custom tabs component. This function takes in a configuration object which contains the styled components that you want to use for the Tabs You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
-You can read more on how to animate components [here](https://ui.gluestack.io/docs/advanced/animations).
+You can read more on how to animate components [here](/ui/docs/advanced/animations).
 
 ### Usage
 
-Default styling of all these components can be found in the `components/core/tabs` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/components/Disclosure/Tabs) of the styled `Tabs` components.
+Default styling of all these components can be found in the `components/core/tabs` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Tabs) of the styled `Tabs` components.
 
 ```jsx
 // import the styled components
diff --git a/example/storybook/src/components/Feedback/Alert/index.stories.mdx b/example/storybook/src/components/Feedback/Alert/index.stories.mdx
index 0bedce0e0f..f63bb50bf8 100644
--- a/example/storybook/src/components/Feedback/Alert/index.stories.mdx
+++ b/example/storybook/src/components/Feedback/Alert/index.stories.mdx
@@ -35,10 +35,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Alert allows you to show the type of action such as `info`, `success`, `error`, `warning`, and `muted` and variant such as `solid`,`accent`,`outline`. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Alert/styled-components) to learn about default styling of Alert component.
-
 <AppProvider>
   <CodePreview
     _rendererWrapper={{ px: '$2.5' }}
@@ -81,11 +77,13 @@ Alert allows you to show the type of action such as `info`, `success`, `error`,
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
 
-```bash
+```jsx
 import { Alert, AlertIcon, AlertText } from '@gluestack-ui/themed';
 ```
 
@@ -102,14 +100,56 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Alert
 
 Contains all alert related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/pressable) component.
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_text</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style AlertText Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_icon</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style AlertIcon Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### AlertIcon
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
@@ -118,9 +158,13 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 
 Contains all spinner related layout style props and actions. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
 
+## Themed
+
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
+
 ### Props
 
-Alert component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Alert component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Alert
 
@@ -218,15 +262,21 @@ An example of an alert component with a heading, which further contains another
 
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
 ### Customizing the Alert
 
-We have a function called `createAlert` which can be used to create a custom alert component. This function takes in a configuration object which contains the styled components that you want to use for the Alert You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createAlert` which can be used to create a custom alert component. This function takes in a configuration object which contains the styled components that you want to use for the Alert You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of all these components can be found in the `components/core/alert` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Alert) of the styled `Alert` components.
+Default styling of all these components can be found in the `components/core/alert` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Alert) of the styled `Alert` components.
 
 ```jsx
 // import the styles
@@ -245,3 +295,4 @@ export default () => (
   </Alert>
 );
 ```
+-->
diff --git a/example/storybook/src/components/Feedback/Progress/index.stories.mdx b/example/storybook/src/components/Feedback/Progress/index.stories.mdx
index 4502081efc..e7f7e8ec49 100644
--- a/example/storybook/src/components/Feedback/Progress/index.stories.mdx
+++ b/example/storybook/src/components/Feedback/Progress/index.stories.mdx
@@ -33,10 +33,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Progress** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Progress/styled-components) to learn about default styling of Progress component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -64,11 +60,13 @@ Following is the default implementation of the **Progress** component without an
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
 
-```bash
+```jsx
 import { Progress } from '@gluestack-ui/themed';
 ```
 
@@ -84,9 +82,9 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Progress
 
@@ -133,15 +131,41 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
   </TableContainer>
 </AppProvider>
 
-### ProgressFilledTrack
+**Descendants Styling Props**
+Props to style child components.
 
-It also inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
-
-### Dependencies
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_filledTrack</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style ProgressFilledTrack Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
 
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+#### ProgressFilledTrack
 
-- `@gluestack-ui/utils`
+It also inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
 ### Accessibility
 
@@ -155,9 +179,13 @@ We have outlined the various features that ensure the Fab component is accessibl
 
 - VoiceOver: When the Progress is focused, the screen reader will announce it's a progress and it's current progress indicator.
 
+## Themed
+
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
+
 ### Props
 
-Progess component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Progess component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Progress
 
@@ -308,15 +336,21 @@ You can customize the progress bar. Below is the example where we have change th
 
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
 ### Customizing the Progress
 
-For customizing the Progress, you have to map styled view to Progress You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+For customizing the Progress, you have to map styled view to Progress You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of the component can be found in the `components/core/progress` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Progress) of the styled `Progress` component.
+Default styling of the component can be found in the `components/core/progress` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Progress) of the styled `Progress` component.
 
 ```jsx
 // import the styles
@@ -341,3 +375,4 @@ export default () => (
   </Progress>
 );
 ```
+-->
diff --git a/example/storybook/src/components/Feedback/Spinner/index.stories.mdx b/example/storybook/src/components/Feedback/Spinner/index.stories.mdx
index ff8c2c7a53..11327d2dc7 100644
--- a/example/storybook/src/components/Feedback/Spinner/index.stories.mdx
+++ b/example/storybook/src/components/Feedback/Spinner/index.stories.mdx
@@ -20,10 +20,6 @@ import { AppProvider, CodePreview } from '@gluestack/design-system';
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Spinner** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Spinner/styled-components) to learn about default styling of Spinner component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -49,11 +45,13 @@ Following is the default implementation of the **Spinner** component without any
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
 
-```bash
+```jsx
 import { Spinner } from '@gluestack-ui/themed';
 ```
 
@@ -65,9 +63,9 @@ The structure provided below can help you identify and understand a Spinner comp
 export default () => <Spinner />;
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Spinner
 
@@ -151,15 +149,21 @@ A Spinner component with a color scheme enhances visual appeal by incorporating
 
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
 ### Customizing the Spinner
 
-We have a function called `createSpinner` which can be used to create a custom `Spinner` component. This function takes in a configuration object which contains the styled components that you want to use for the spinner. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createSpinner` which can be used to create a custom `Spinner` component. This function takes in a configuration object which contains the styled components that you want to use for the spinner. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of all these components can be found in the `components/core/spinner` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Spinner) of the styled `Spinner` components.
+Default styling of all these components can be found in the `components/core/spinner` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Spinner) of the styled `Spinner` components.
 
 ```jsx
 // import the styles
@@ -176,3 +180,4 @@ const Spinner = createSpinner({
 // Using the spinner component
 export default () => <Spinner />;
 ```
+-->
diff --git a/example/storybook/src/components/Feedback/Toast/index.stories.mdx b/example/storybook/src/components/Feedback/Toast/index.stories.mdx
index 7b2938901f..f6c3329627 100644
--- a/example/storybook/src/components/Feedback/Toast/index.stories.mdx
+++ b/example/storybook/src/components/Feedback/Toast/index.stories.mdx
@@ -45,10 +45,6 @@ import { View } from 'react-native';
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Toast** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Toast/styled-components) to learn about default styling of Toast component.
-
 <AppProvider>
   <CodePreview
     _rendererWrapper={{ px: '$2.5' }}
@@ -116,11 +112,13 @@ Following is the default implementation of the **Toast** component without any a
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
 
-```bash
+```jsx
 import { useToast, Toast } from '@gluestack-ui/themed';
 ```
 
@@ -137,9 +135,9 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Toast
 
@@ -253,6 +251,58 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
   </TableContainer>
 </AppProvider>
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_icon</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style Icon Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_title</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style AlertTitle Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_description</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style AlertDescription Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### ToastTitle
 
 Contains all Text related layout style props and actions.
@@ -275,19 +325,13 @@ We have outlined the various features that ensure the Toast component is accessi
 
 - VoiceOver: When the toast is focused, the screen reader will announce the toast's title.
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+## Themed
 
-- `@gluestack-ui/utils`
-- `@gluestack-ui/hooks`
-- `@gluestack-ui/overlay`
-- `@gluestack-ui/transitions`
-- `@react-native-aria/focus`
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
 ### Props
 
-Toast component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Toast component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Toast
 
@@ -774,15 +818,21 @@ A Toast component with preserve toast functionality retains the notification on
 
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
 ### Customizing the Toast
 
-We have a function called `createToast` which can be used to create a custom toast component. This function takes in a configuration object which contains the styled components that you want to use for the Input. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createToast` which can be used to create a custom toast component. This function takes in a configuration object which contains the styled components that you want to use for the Input. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of all these components can be found in the `components/core/toast` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Toast) of the styled `Toast` components.
+Default styling of all these components can be found in the `components/core/toast` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Toast) of the styled `Toast` components.
 
 ```jsx
 // import the styles
@@ -828,3 +878,4 @@ export default () => {
   );
 };
 ```
+-->
diff --git a/example/storybook/src/components/Forms/Button/index.stories.mdx b/example/storybook/src/components/Forms/Button/index.stories.mdx
index 5e86397a9b..2cb4dfa5a0 100644
--- a/example/storybook/src/components/Forms/Button/index.stories.mdx
+++ b/example/storybook/src/components/Forms/Button/index.stories.mdx
@@ -37,10 +37,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Button** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Button/styled-components) to learn about default styling of Button component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -85,6 +81,8 @@ Following is the default implementation of the **Button** component without any
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
@@ -109,9 +107,9 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Button
 
@@ -206,6 +204,58 @@ Contains all button related layout style props and actions. It inherits all the
   </TableContainer>
 </AppProvider>
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_text</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style ButtonText Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_icon</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style ButtonIcon Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_spinner</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style ButtonSpinner Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### ButtonText
 
 Contains all text related layout style props and actions. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
@@ -323,12 +373,44 @@ Contains all group related layout style props and actions. It inherits all the p
   </TableContainer>
 </AppProvider>
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_button</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style Button Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### ButtonSpinner
 
 Contains all spinner related layout style props and actions.
 It inherits all the properties of React Native's [ActivityIndicator](https://reactnative.dev/docs/activityindicator) component.
 
-### ButtonIcon
+#### ButtonIcon
 
 Contains all Icon related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
@@ -352,21 +434,17 @@ We have outlined the various features that ensure the Button component is access
 
 - VoiceOver: When the button is focused, the screen reader will announce the button's label and its current state.
 
-#### Focus Management
+### Focus Management
 
 - The `onFocus` and `onBlur` props to manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation.
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+## Themed
 
-- `@gluestack-ui/utils`
-- `@react-native-aria/focus`
-- `@react-native-aria/interactions`
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
 ### Props
 
-Button component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Button component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Button
 
@@ -395,7 +473,7 @@ Button component is created using Pressable component from react-native. It exte
           </Table.TD>
           <Table.TD>
             <Table.TText>
-              primary | secondary | positive | negative | default
+              {'primary | secondary | positive | negative | default'}
             </Table.TText>
           </Table.TD>
           <Table.TD>
@@ -774,15 +852,21 @@ The custom button component leverages the functionality of a button component wh
 
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
-### Customizing the Button
+#### Create your own Button
 
-We have a function called `createButton` which can be used to create a custom button component. This function takes in a configuration object which contains the styled components that you want to use for the button. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createButton` which can be used to create a custom button component. This function takes in a configuration object which contains the styled components that you want to use for the button. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
-#### Usage
+#### Implementation
 
-Default styling of all these components can be found in the `components/core/button` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Button) of the styled `Button` components.
+Default styling of all these components can be found in the `components/core/button` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Button) of the styled `Button` components.
 
 ```jsx
 // import the styles
@@ -790,9 +874,8 @@ import {
   Root,
   Text,
   Group,
-  GroupHSpacer,
-  GroupVSpacer,
   Spinner,
+  Icon,
 } from '../components/core/button/styled-components';
 
 // import the createButton function
@@ -803,9 +886,8 @@ const Button = createButton({
   Root,
   Text,
   Group,
-  GroupHSpacer,
-  GroupVSpacer,
   Spinner,
+  Icon,
 });
 
 // Using the button component
@@ -819,3 +901,4 @@ export default () => (
   </ButtonGroup>
 );
 ```
+-->
diff --git a/example/storybook/src/components/Forms/Checkbox/index.stories.mdx b/example/storybook/src/components/Forms/Checkbox/index.stories.mdx
index 3418413786..134ae03b0e 100644
--- a/example/storybook/src/components/Forms/Checkbox/index.stories.mdx
+++ b/example/storybook/src/components/Forms/Checkbox/index.stories.mdx
@@ -38,10 +38,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Checkbox** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Checkbox/styled-components) to learn about default styling of Checkbox component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -88,6 +84,8 @@ Following is the default implementation of the **Checkbox** component without an
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
@@ -113,9 +111,9 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Checkbox
 
@@ -310,13 +308,65 @@ Contains all Checkbox related layout style props and actions. It inherits all th
   </TableContainer>
 </AppProvider>
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_text</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style CheckboxLabel Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_icon</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style CheckboxIcon Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_indicator</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style CheckboxIndicator Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### CheckboxIndicator
 
 Contains all indicators related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
-### CheckboxIcon
+#### CheckboxIcon
 
-Contains all Icon related layout style props and actions. It inherits all the properties of gluestack Style's [AsForwarder](https://style.gluestack.io/docs/api/as-forwarder) component.
+Contains all Icon related layout style props and actions. It inherits all the properties of gluestack Style's [AsForwarder](https://style.gluestack.io/styleer) component.
 
 #### CheckboxLabel
 
@@ -461,21 +511,13 @@ We have outlined the various features that ensure the Checkbox component is acce
 - In disabled state, `accessibilityElementsHidden` will be passed to make radio input unfocusable.
 - In required state, `accessibilityRequired` will be passed to indicate that the radio input is required.
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+## Themed
 
-- `@react-native-aria/checkbox`
-- `@react-native-aria/focus`
-- `@react-native-aria/interactions`
-- `@react-aria/visually-hidden`
-- `@gluestack-ui/form-control`
-- `@gluestack-ui/themed-native-aria`
-- `@gluestack-ui/utils`
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
 ### Props
 
-Checkbox component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Checkbox component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Checkbox
 
@@ -996,15 +1038,16 @@ function CheckboxExample(){
 
 ## Unstyled
 
-We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
 
+<!--
 ### Customizing the Checkbox
 
-We have a function called `createCheckbox` which can be used to create a custom checkbox component. This function takes in a configuration object which contains the styled components that you want to use for the checkbox. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createCheckbox` which can be used to create a custom checkbox component. This function takes in a configuration object which contains the styled components that you want to use for the checkbox. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of all these components can be found in the `components/core/checkbox` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Checkbox) of the styled `Checkbox` components.
+Default styling of all these components can be found in the `components/core/checkbox` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Checkbox) of the styled `Checkbox` components.
 
 ```jsx
 // import the styles
@@ -1041,6 +1084,8 @@ export default () => (
 );
 ```
 
+-->
+
 ## Spec Doc
 
 Explore the comprehensive details of the Input in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
diff --git a/example/storybook/src/components/Forms/FormControl/index.stories.mdx b/example/storybook/src/components/Forms/FormControl/index.stories.mdx
index 7e92622c6e..80869bd9f1 100644
--- a/example/storybook/src/components/Forms/FormControl/index.stories.mdx
+++ b/example/storybook/src/components/Forms/FormControl/index.stories.mdx
@@ -88,10 +88,6 @@ import { useState } from 'react';
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **FormControl** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/FormControl/styled-components) to learn about default styling of FormControl component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -174,6 +170,8 @@ Following is the default implementation of the **FormControl** component without
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
@@ -203,9 +201,9 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### FormControl
 
@@ -332,10 +330,104 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
   </TableContainer>
 </AppProvider>
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_labelText</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style FormControlLabelText Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_helperText</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style FormControlHelperText Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_errorText</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style FormControlErrorText Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_labelAstrick</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style FormControlLabelAstrick Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### FormControlLabel
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_labelText</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style FormControlLabelText Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### FormControlLabelText
 
 It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
@@ -354,7 +446,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 
 #### FormControlErrorIcon
 
-It inherits all the properties of gluestack Style's [AsForwarder](https://style.gluestack.io/docs/api/as-forwarder) component.
+It inherits all the properties of gluestack Style's [AsForwarder](https://style.gluestack.io/styleer) component.
 
 #### FormControlErrorText
 
@@ -366,16 +458,13 @@ It inherits all the properties of React Native's [Text](https://reactnative.dev/
 - Support for hover, focus and active states.
 - Option to add your styles or use the default styles.
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+## Themed
 
-- `@gluestack-ui/utils`
-- `@react-native-aria/focus`
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
 ### Props
 
-FormControl component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+FormControl component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### FormControl
 
@@ -1061,15 +1150,16 @@ Form Action Buttons can also be utilized in conjunction with FormControl.
 
 ## Unstyled
 
-We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
 
+<!--
 ### Customizing the FormControl
 
-We have a function called `createFormControl` which can be used to create a custom FormControl component. This function takes in a configuration object which contains the styled components that you want to use for the FormControl. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createFormControl` which can be used to create a custom FormControl component. This function takes in a configuration object which contains the styled components that you want to use for the FormControl. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of all these components can be found in the `components/form-control` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/FormControl) of the styled `FormControl` components.
+Default styling of all these components can be found in the `components/form-control` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/FormControl) of the styled `FormControl` components.
 
 ```jsx
 // import the styles
@@ -1118,6 +1208,7 @@ export default () => (
   </FormControl>
 );
 ```
+-->
 
 ## Spec Doc
 
diff --git a/example/storybook/src/components/Forms/Input/index.stories.mdx b/example/storybook/src/components/Forms/Input/index.stories.mdx
index c36056973f..c0c86f17a8 100644
--- a/example/storybook/src/components/Forms/Input/index.stories.mdx
+++ b/example/storybook/src/components/Forms/Input/index.stories.mdx
@@ -38,10 +38,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Input** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Input/styled-components) to learn about default styling of Input component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -93,6 +89,8 @@ Following is the default implementation of the **Input** component without any a
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
@@ -116,9 +114,9 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Input
 
@@ -245,6 +243,48 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
   </TableContainer>
 </AppProvider>
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_input</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style InputField Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_icon</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style InputIcon Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### InputField
 
 Contains all TextInput related layout style props and actions.
@@ -291,10 +331,46 @@ It inherits all the properties of React Native's [TextInput](https://reactnative
   </TableContainer>
 </AppProvider>
 
-#### InputIcon
+#### InputSlot
 
 It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_icon</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style InputIcon Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
+#### InputIcon
+
+Contains all Icon related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+
 ### Features
 
 - Keyboard support for actions.
@@ -326,17 +402,13 @@ We have outlined the various features that ensure the Input component is accessi
 - In disabled state, `accessibilityElementsHidden` will be passed to make input unfocusable.
 - In required state, `accessibilityRequired` will be passed to indicate that the Input is required.
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+## Themed
 
-- `@gluestack-ui/utils`
-- `@react-native-aria/focus`
-- `@react-native-aria/interactions`
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
 ### Props
 
-Input component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Input component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Input
 
@@ -529,15 +601,17 @@ The Input with Icons is a variation of the Input component that displays icons n
 
 ## Unstyled
 
-We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
 
 ### Customizing the Input
 
-We have a function called `createInput` which can be used to create a custom Input component. This function takes in a configuration object which contains the styled components that you want to use for the Input You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createInput` which can be used to create a custom Input component. This function takes in a configuration object which contains the styled components that you want to use for the Input You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of all these components can be found in the `components/core/input` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/Input/index.tsx) of the styled `Input` components.
+Default styling of all these components can be found in the `components/core/input` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Input) of the styled `Input` components.
 
 ```jsx
 // import the styles
@@ -565,6 +639,7 @@ export default () => (
   </Input>
 );
 ```
+-->
 
 ## Spec Doc
 
diff --git a/example/storybook/src/components/Forms/Link/index.stories.mdx b/example/storybook/src/components/Forms/Link/index.stories.mdx
index 8d1af85cde..0c310c2848 100644
--- a/example/storybook/src/components/Forms/Link/index.stories.mdx
+++ b/example/storybook/src/components/Forms/Link/index.stories.mdx
@@ -26,10 +26,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Link** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Link/styled-components) to learn about default styling of Link component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -55,6 +51,8 @@ Following is the default implementation of the **Link** component without any ad
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
@@ -75,9 +73,9 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Link
 
@@ -191,6 +189,38 @@ It inherits all the properties of React Native's [Pressable](https://reactnative
   </TableContainer>
 </AppProvider>
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_text</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style LinkText Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### LinkText
 
 Contains all text related layout style props and actions. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
@@ -208,17 +238,13 @@ We have outlined the various features that ensure the Link component is accessib
 
 - VoiceOver: When a link receives focus, screen readers should announce a descriptive link name.
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+## Themed
 
-- `@gluestack-ui/utils`
-- `@react-native-aria/focus`
-- `@react-native-aria/interactions`
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
 ### Props
 
-Link component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Link component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Link
 
@@ -323,15 +349,17 @@ The Examples section provides visual representations of the different variants o
 
 ## Unstyled
 
-We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
 
 ### Customizing the Link
 
-We have a function called `createLink` which can be used to create a custom link component. This function takes in a configuration object which contains the styled components that you want to use for the link. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createLink` which can be used to create a custom link component. This function takes in a configuration object which contains the styled components that you want to use for the link. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of all these components can be found in the `components/core/link` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/components/Forms/Link) of the styled `Link` components.
+Default styling of all these components can be found in the `components/core/link` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Link) of the styled `Link` components.
 
 ```jsx
 // import the styles
@@ -353,7 +381,9 @@ export default () => (
 );
 ```
 
-#### How to use Next.js Link
+-->
+
+### How to use Next.js Link
 
 By default, Link component uses an anchor tag on web and pressable on native. If you want to use Next.js Link component on web, you have to create a new styled component for link and map it to Link component. You can also change the already present styled-component for link on the path `./components/core/link/styled-components` in your project. For web specific styling, you can create a file with `.web` extension. For example, if you want to create a custom link component, you can create a file named `Linktsx` and `Linkweb.tsx` in the same directory. The `.web` file will be used only on web and the `Linktsx` file will be used on native.
 
@@ -371,7 +401,7 @@ props: {
   borderRadius: '$full',
 };
 
-// you can also https://style.gluestack.io/docs/getting-started/styled to style the component
+// you can also https://style.gluestack.io/style/docs/getting-started/styled to style the component
 
 
 export default () => <StyledLink />;
diff --git a/example/storybook/src/components/Forms/Pressable/index.stories.mdx b/example/storybook/src/components/Forms/Pressable/index.stories.mdx
index 5e27935822..66470c57e3 100644
--- a/example/storybook/src/components/Forms/Pressable/index.stories.mdx
+++ b/example/storybook/src/components/Forms/Pressable/index.stories.mdx
@@ -20,10 +20,6 @@ import { AppProvider, CodePreview, Text } from '@gluestack/design-system';
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Pressable** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Pressable/styled-components) to learn about default styling of Pressable component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -50,6 +46,8 @@ Following is the default implementation of the **Pressable** component without a
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
@@ -66,9 +64,9 @@ The structure provided below can help you identify and understand a Pressable co
 export default () => <Pressable />;
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Pressable
 
@@ -88,7 +86,7 @@ You can change the child elements according to the states of Pressable component
     showArgsController={false}
     metaData={{
       code: `
- <Pressable p="$16" bg="$primary500" sx={{':hover':{ bg:"$primary400"}}}>
+ <Pressable p="$16" bg="$primary500" sx={{':hover':{ bg:"$primary400"}}}>https://style.gluestack.io/style
    {({ pressed }) => (
         <Text color={pressed ? 'pink' : 'yellow'}>PRESSABLE</Text>
       )}
@@ -107,27 +105,21 @@ You can change the child elements according to the states of Pressable component
   />
 </AppProvider>
 
-Similarly, you can change the child elements according to other states of Pressable component and i.e. `focus` , `hover` , `pressed` , `disabled` and `focusVisible`.
-
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
-
-- `@gluestack-ui/utils`
-- `@react-native-aria/focus`
-- `@react-native-aria/interactions`
+Similarly, you can change the child elements according to other states of Pressable
+component and i.e. `focus` , `hover` , `pressed` , `disabled` and `focusVisible`.
 
 ## Unstyled
 
-We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
 
+<!--
 ### Customizing the Pressable
 
-For customizing the Pressable, you have to map styled view to Pressable. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+For customizing the Pressable, you have to map styled view to Pressable. You can refer [gluestack.io/style](/style) for more information on how to use styled components.
 
 #### Usage
 
-Default styling of the component can be found in the `components/pressable` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/example/storybook/src/ui-components/Pressable) of the styled `Pressable` component.
+Default styling of the component can be found in the `components/pressable` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Pressable) of the styled `Pressable` component.
 
 ```jsx
 // import the styles
@@ -139,3 +131,5 @@ const Pressable = Root;
 // using the Pressable component
 export default () => <Pressable />;
 ```
+
+-->
diff --git a/example/storybook/src/components/Forms/Radio/index.stories.mdx b/example/storybook/src/components/Forms/Radio/index.stories.mdx
index c6959988a6..1a6f116458 100644
--- a/example/storybook/src/components/Forms/Radio/index.stories.mdx
+++ b/example/storybook/src/components/Forms/Radio/index.stories.mdx
@@ -37,10 +37,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Radio** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Radio/styled-components) to learn about default styling of Radio component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -87,6 +83,8 @@ Following is the default implementation of the **Radio** component without any a
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
@@ -112,9 +110,9 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Radio
 
@@ -258,13 +256,65 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
   </TableContainer>
 </AppProvider>
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_text</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style RadioLabel Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_icon</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style RadioIcon Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_indicator</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style RadioIndicator Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### RadioIndicator
 
 Contains all Indicator related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
 #### RadioIcon
 
-Contains all Icon related layout style props and actions. It inherits all the properties of gluestack Style's [AsForwarder](https://style.gluestack.io/docs/api/as-forwarder) component.
+Contains all Icon related layout style props and actions. It inherits all the properties of gluestack Style's [AsForwarder](https://style.gluestack.io/styleer) component.
 
 #### RadioLabel
 
@@ -350,6 +400,38 @@ Contains all Group related layout style props and actions. It inherits all the p
   </TableContainer>
 </AppProvider>
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_radio</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style Radio Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 ### Features
 
 - Keyboard support for actions.
@@ -380,20 +462,13 @@ We have outlined the various features that ensure the Radio component is accessi
 - In disabled state, `accessibilityElementsHidden` will be passed to make radio input unfocusable.
 - In required state, `accessibilityRequired` will be passed to indicate that the radio input is required.
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+## Themed
 
-- `@react-aria/visually-hidden`
-- `@react-native-aria/radio`
-- `@react-native-aria/focus`
-- `@react-native-aria/interactions`
-- `@gluestack-ui/form-control`
-- `@gluestack-ui/utils`
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
 ### Props
 
-Radio component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Radio component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Radio
 
@@ -888,15 +963,17 @@ The Radio group component allows users to group radio and display them in a hori
 
 ## Unstyled
 
-We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
 
 ### Customizing the Radio
 
-We have a function called `createRadio` which can be used to create a custom radio component. This function takes in a configuration object which contains the styled components that you want to use for the radio. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createRadio` which can be used to create a custom radio component. This function takes in a configuration object which contains the styled components that you want to use for the radio. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of all these components can be found in the `components/core/radio` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/components/Forms/Radio) of the styled `Radio` components.
+Default styling of all these components can be found in the `components/core/radio` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Radio) of the styled `Radio` components.
 
 ```jsx
 // import the styles
@@ -932,3 +1009,4 @@ export default () => (
   </RadioGroup>
 );
 ```
+-->
diff --git a/example/storybook/src/components/Forms/Select/index.stories.mdx b/example/storybook/src/components/Forms/Select/index.stories.mdx
index b8d45d78d6..ad6ff41736 100644
--- a/example/storybook/src/components/Forms/Select/index.stories.mdx
+++ b/example/storybook/src/components/Forms/Select/index.stories.mdx
@@ -53,10 +53,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Select** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Select/styled-components) to learn about default styling of Select component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -131,6 +127,8 @@ Following is the default implementation of the **Select** component without any
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
@@ -165,9 +163,9 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Select
 
@@ -324,6 +322,22 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
             <Table.TText>{`Sets the currently selected option value, allowing the component to render with the corresponding option pre-selected.`}</Table.TText>
           </Table.TD>
         </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>selectedLabel</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>string</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>-</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Sets the initial selected Label for a select component.`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
         <Table.TR>
           <Table.TD>
             <Table.TText>
@@ -397,6 +411,48 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 
 It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_icon</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style SelectIcon Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_input</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style SelectInput Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### SelectInput
 
 It inherits all the properties of React Native's [TextInput](https://reactnative.dev/docs/textInput) component.
@@ -407,27 +463,59 @@ It inherits all the properties of React Native's [Pressable](https://reactnative
 
 #### SelectPortal
 
-It is internally mapped wth gluestack-ui's [Actionsheet](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+It is internally mapped wth gluestack-ui's [Actionsheet](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
 #### SelectBackdrop
 
-It is internally mapped wth gluestack-ui's [Actionsheet.Backdrop](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which is React Native's [Pressable](https://reactnative.dev/docs/pressable) component, created using [@legendapp/motion's](https://legendapp.com/open-source/motion/) `createMotionAnimatedComponent` function to add animation to the component. You can use any declarative animation library you prefer.
+It is internally mapped wth gluestack-ui's [ActionsheetBackdrop](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which is React Native's [Pressable](https://reactnative.dev/docs/pressable) component, created using [@legendapp/motion's](https://legendapp.com/open-source/motion/) `createMotionAnimatedComponent` function to add animation to the component. You can use any declarative animation library you prefer.
 
 #### SelectContent
 
-It is internally mapped wth gluestack-ui's [Actionsheet.Content](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. With this ActionSheet component, you have the flexibility to use any declarative animation library that suits your needs.
+It is internally mapped wth gluestack-ui's [ActionsheetContent](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. With this ActionSheet component, you have the flexibility to use any declarative animation library that suits your needs.
+
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_sectionHeaderBackground</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style SelectActionsheetSectionHeaderText Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
 
 #### SelectDragIndicatorWrapper
 
-It is internally mapped wth gluestack-ui's [Actionsheet.DragIndicatorWrapper](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+It is internally mapped wth gluestack-ui's [ActionsheetDragIndicatorWrapper](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
 #### SelectDragIndicator
 
-It is internally mapped wth gluestack-ui's [Actionsheet.DragIndicator](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+It is internally mapped wth gluestack-ui's [ActionsheetDragIndicator](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
 #### SelectItem
 
-It internally uses gluestack-ui's [Actionsheet.Item](https://ui.gluestack.io/docs/components/disclosure/actionsheet) and [Actionsheet.ItemText](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
+It internally uses gluestack-ui's [ActionsheetItem](https://ui.gluestack.io/docs/components/disclosure/actionsheet) and [Actionsheet.ItemText](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
 
 <AppProvider>
   <TableContainer>
@@ -502,25 +590,57 @@ It internally uses gluestack-ui's [Actionsheet.Item](https://ui.gluestack.io/doc
   </TableContainer>
 </AppProvider>
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_text</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style SelectItemText Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### SelectScrollView
 
-It is internally mapped wth gluestack-ui's [Actionsheet.ScrollView](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [ScrollView](https://reactnative.dev/docs/scrollview#props) component.
+It is internally mapped wth gluestack-ui's [Actionsheet.ScrollView](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [ScrollView](https://reactnative.dev/docs/scrollview#props) component.
 
 #### SelectVirtualizedList
 
-It is internally mapped wth gluestack-ui's [Actionsheet.VirtualizedList](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [VirtualizedList](https://reactnative.dev/docs/virtualizedlist#props) component.
+It is internally mapped wth gluestack-ui's [Actionsheet.VirtualizedList](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [VirtualizedList](https://reactnative.dev/docs/virtualizedlist#props) component.
 
 #### SelectFlatList
 
-It is internally mapped wth gluestack-ui's [Actionsheet.FlatList](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [FlatList](https://reactnative.dev/docs/flatlist#props) component.
+It is internally mapped wth gluestack-ui's [Actionsheet.FlatList](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [FlatList](https://reactnative.dev/docs/flatlist#props) component.
 
 #### SelectSectionList
 
-It is internally mapped wth gluestack-ui's [Actionsheet.SectionList](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [SectionList](https://reactnative.dev/docs/sectionlist#props) component.
+It is internally mapped wth gluestack-ui's [Actionsheet.SectionList](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [SectionList](https://reactnative.dev/docs/sectionlist#props) component.
 
 #### SelectSectionHeaderText
 
-It is internally mapped wth gluestack-ui's [Actionsheet.SectionHeaderText](https://ui.gluestack.io/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text#props) component.
+It is internally mapped wth gluestack-ui's [Actionsheet.SectionHeaderText](/ui/docs/components/disclosure/actionsheet) component, which inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text#props) component.
 
 ### Features
 
@@ -539,18 +659,13 @@ We have outlined the various features that ensure the Select component is access
 
 - VoiceOver: When the select is focused, the screen reader will announce the select content.
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+## Themed
 
-- `@gluestack-ui/utils`
-- `@react-native-aria/focus`
-- `@gluestack-ui/hooks`
-- `@gluestack-ui/form-control`
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
 ### Props
 
-Select component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Select component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Select
 
@@ -688,15 +803,16 @@ The Select component with FormControl example demonstrates how to manage its sta
 
 ## Unstyled
 
-We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
 
+<!--
 ### Customizing the Select
 
-We have a function called `createSelect` which can be used to create a custom select component. This function takes in a configuration object which contains the styled components that you want to use for the select. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createSelect` which can be used to create a custom select component. This function takes in a configuration object which contains the styled components that you want to use for the select. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of all these components can be found in the `components/select` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Select) of the styled `Select` components.
+Default styling of all these components can be found in the `components/select` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Select) of the styled `Select` components.
 
 ```jsx
 // import the styles
@@ -790,3 +906,4 @@ export default () => (
   </Select>
 );
 ```
+-->
diff --git a/example/storybook/src/components/Forms/Slider/index.stories.mdx b/example/storybook/src/components/Forms/Slider/index.stories.mdx
index 6a3513ba69..e967df44c7 100644
--- a/example/storybook/src/components/Forms/Slider/index.stories.mdx
+++ b/example/storybook/src/components/Forms/Slider/index.stories.mdx
@@ -44,10 +44,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Slider** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Slider/styled-components) to learn about default styling of Divider component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -98,6 +94,8 @@ Following is the default implementation of the **Slider** component without any
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
@@ -121,17 +119,13 @@ export default () => (
 );
 ```
 
-### API Reference
-
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+### Component Props
 
-#### Box
-
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Slider
 
-The wrapper that provides context and functionality for all children.
+It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
 <AppProvider>
   <TableContainer>
@@ -156,34 +150,18 @@ The wrapper that provides context and functionality for all children.
         <Table.TR>
           <Table.TD>
             <Table.TText>
-              <InlineCode>size</InlineCode>
-            </Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>'sm' | 'md' | 'lg'</Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>'md'</Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>To change the size of slider thumb .</Table.TText>
-          </Table.TD>
-        </Table.TR>
-        <Table.TR>
-          <Table.TD>
-            <Table.TText>
-              <InlineCode>orientation</InlineCode>
+              <InlineCode>onChange</InlineCode>
             </Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>'vertical' | 'horizantal'</Table.TText>
+            <Table.TText>{'(value: number) => void'}</Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>'horizantal'</Table.TText>
+            <Table.TText>-</Table.TText>
           </Table.TD>
           <Table.TD>
             <Table.TText>
-              Set the orientation of Slider to vertical or horizantal
+              Function called when the state of the Slider changes.
             </Table.TText>
           </Table.TD>
         </Table.TR>
@@ -206,17 +184,19 @@ The wrapper that provides context and functionality for all children.
         <Table.TR>
           <Table.TD>
             <Table.TText>
-              <InlineCode>isReversed</InlineCode>
+              <InlineCode>isReadOnly</InlineCode>
             </Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>bool</Table.TText>
+            <Table.TText>boolean</Table.TText>
           </Table.TD>
           <Table.TD>
             <Table.TText>false</Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>To reverse the order of Slider</Table.TText>
+            <Table.TText>
+              To manually set read-only to the checkbox.
+            </Table.TText>
           </Table.TD>
         </Table.TR>
         <Table.TR>
@@ -315,40 +295,76 @@ The wrapper that provides context and functionality for all children.
             <Table.TText> The slider's step value.</Table.TText>
           </Table.TD>
         </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
         <Table.TR>
           <Table.TD>
             <Table.TText>
-              <InlineCode>isReadOnly</InlineCode>
+              <InlineCode>_thumb</InlineCode>
             </Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>boolean</Table.TText>
+            <Table.TText>{`Prop to style SliderThumb Component`}</Table.TText>
           </Table.TD>
+        </Table.TR>
+        <Table.TR>
           <Table.TD>
-            <Table.TText>false</Table.TText>
+            <Table.TText>
+              <InlineCode>_track</InlineCode>
+            </Table.TText>
           </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style SliderTrack Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
           <Table.TD>
             <Table.TText>
-              To manually set read-only to the checkbox.
+              <InlineCode>_filledTrack</InlineCode>
             </Table.TText>
           </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style SliderFilledTrack Component`}</Table.TText>
+          </Table.TD>
         </Table.TR>
+
       </Table.TBody>
     </Table>
+
   </TableContainer>
 </AppProvider>
 
 #### SliderTrack
 
-The empty part of the slider that shows the track.
+It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/Pressable) component.
 
 #### SliderFilledTrack
 
-The filled part of the slider.
+It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
 #### SliderThumb
 
-The handle that is used to change the slider value.
+It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
 ### Features
 
@@ -371,21 +387,13 @@ We have outlined the various features that ensure the Slider component is access
 
 - VoiceOver: When the slider is focused, the screen reader will announce the sider's value.
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+## Themed
 
-- `@gluestack-ui/utils`
-- `@react-native-aria/interactions`
-- `@gluestack-ui/hooks`
-- `@gluestack-ui/form-control`,
-- `@react-aria/visually-hidden`
-- `@react-native-aria/slider`
-- `@react-stately/slider`
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
 ### Props
 
-Slider component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Slider component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Slider
 
@@ -853,15 +861,17 @@ function App(){
 
 ## Unstyled
 
-We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
 
 ### Customizing the Slider
 
-For customizing the Slider, you have to map styled view to Slider You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+For customizing the Slider, you have to map styled view to Slider You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of the component can be found in the `components/slider` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Slider) of the styled `Slider` component.
+Default styling of the component can be found in the `components/slider` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Slider) of the styled `Slider` component.
 
 ```jsx
 // import the styles
@@ -895,3 +905,5 @@ export default () => (
   </Slider>
 );
 ```
+
+-->
diff --git a/example/storybook/src/components/Forms/Switch/index.stories.mdx b/example/storybook/src/components/Forms/Switch/index.stories.mdx
index 0d7fb856da..2ba7355f8a 100644
--- a/example/storybook/src/components/Forms/Switch/index.stories.mdx
+++ b/example/storybook/src/components/Forms/Switch/index.stories.mdx
@@ -29,10 +29,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Switch** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Switch/styled-components) to learn about default styling of Switch component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -61,6 +57,8 @@ Following is the default implementation of the **Switch** component without any
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
@@ -77,9 +75,9 @@ The structure provided below can help you identify and understand a Switch compo
 export default () => <Switch />;
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Switch
 
@@ -236,19 +234,13 @@ We have outlined the various features that ensure the Button component is access
 
 - VoiceOver: When the switch is focused, the screen reader will announce the switch's action and its current state.
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+## Themed
 
-- `@gluestack-ui/utils`
-- `@gluestack-ui/form-control`
-- `@react-native-aria/focus`
-- `@react-native-aria/interactions`
-- `@react-stately/toggle`
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
 ### Props
 
-Switch component is created using Switch component from react-native. It extends all the props supported by [React Native Switch](https://reactnative.dev/docs/switch#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Switch component is created using Switch component from react-native. It extends all the props supported by [React Native Switch](https://reactnative.dev/docs/switch#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Switch
 
@@ -410,21 +402,21 @@ An example of a switch component being used with a different color scheme.
       },
       argsType: {},
     }}
-/>
-
+  />
 </AppProvider>
 
 ## Unstyled
 
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
+<!--
 ### Customizing the Switch
 
-We have a function called `createSwitch` which can be used to create a custom switch component. This function takes in a configuration object which contains the styled components that you want to use for the switch. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createSwitch` which can be used to create a custom switch component. This function takes in a configuration object which contains the styled components that you want to use for the switch. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of all these components can be found in the `components/core/switch` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Switch) of the styled `Switch` components.
+Default styling of all these components can be found in the `components/core/switch` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Switch) of the styled `Switch` components.
 
 ```jsx
 // import the styles
@@ -441,3 +433,4 @@ const Switch = createSwitch({
 // Using the switch component
 export default () => <Switch />;
 ```
+-->
diff --git a/example/storybook/src/components/Forms/Tabs/index.stories.mdx b/example/storybook/src/components/Forms/Tabs/index.stories.mdx
index caf66c7522..8af65cd9d0 100644
--- a/example/storybook/src/components/Forms/Tabs/index.stories.mdx
+++ b/example/storybook/src/components/Forms/Tabs/index.stories.mdx
@@ -170,11 +170,11 @@ We provide in-depth information on how to customize and extend the component's f
 
 ### Customizing the Tabs
 
-We have a function called `createTabs` which can be used to create a custom tabs component. This function takes in a configuration object which contains the styled components that you want to use for the tabs. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createTabs` which can be used to create a custom tabs component. This function takes in a configuration object which contains the styled components that you want to use for the tabs. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of all these components can be found in the `components/tabs` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Tabs) of the styled `Tabs` components.
+Default styling of all these components can be found in the `components/tabs` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Tabs) of the styled `Tabs` components.
 
 ```jsx
 // import the styles
diff --git a/example/storybook/src/components/Forms/Textarea/index.stories.mdx b/example/storybook/src/components/Forms/Textarea/index.stories.mdx
index 2ed0d45c78..ec36c01fce 100644
--- a/example/storybook/src/components/Forms/Textarea/index.stories.mdx
+++ b/example/storybook/src/components/Forms/Textarea/index.stories.mdx
@@ -35,10 +35,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Textarea** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Textarea/styled-components) to learn about default styling of Textarea component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -87,6 +83,8 @@ Following is the default implementation of the **Textarea** component without an
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
@@ -107,9 +105,9 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Textarea
 
@@ -252,6 +250,38 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
   </TableContainer>
 </AppProvider>
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_input</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style TextareaInput Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### TextareaInput
 
 Contains all TextInput related layout style props and actions.
@@ -270,18 +300,13 @@ We have outlined the various features that ensure the Textarea component is acce
 - VoiceOver: accessible and accessibilityLabel props to describe the input's purpose
 - `accessibilityTraits` and `accessibilityHint` for the various states of the input, such as "double tap to edit"
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+## Themed
 
-- `@gluestack-ui/utils`
-- `@react-native-aria/focus`
-- `react-native-svg`
-- `@gluestack-ui/themed-native-aria`
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
 ### Props
 
-Textarea component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Textarea component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Textarea
 
@@ -371,15 +396,16 @@ The Textarea Component can be incorporated within the FormControl.
 
 ## Unstyled
 
-We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
 
+<!--
 ### Customizing the Textarea
 
-We have a function called `createTextarea` which can be used to create a custom Textarea component. This function takes in a configuration object which contains the styled components that you want to use for the Textarea You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createTextarea` which can be used to create a custom Textarea component. This function takes in a configuration object which contains the styled components that you want to use for the Textarea You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of all these components can be found in the `components/text-area` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Textarea) of the styled `Textarea` components.
+Default styling of all these components can be found in the `components/text-area` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Textarea) of the styled `Textarea` components.
 
 ```jsx
 // import the styles
@@ -401,6 +427,7 @@ export default () => (
   </Textarea>
 );
 ```
+-->
 
 ## Spec Doc
 
diff --git a/example/storybook/src/components/Layout/Box/Box.stories.tsx b/example/storybook/src/components/Layout/Box/Box.stories.tsx
index 1598851b96..58e703b7af 100644
--- a/example/storybook/src/components/Layout/Box/Box.stories.tsx
+++ b/example/storybook/src/components/Layout/Box/Box.stories.tsx
@@ -1,5 +1,6 @@
 import type { ComponentMeta } from '@storybook/react-native';
 import Box from './Box';
+import BoxWithRef from './BoxWithRef';
 
 const BoxMeta: ComponentMeta<typeof Box> = {
   title: 'stories/LAYOUT/Box',
@@ -10,4 +11,4 @@ const BoxMeta: ComponentMeta<typeof Box> = {
 
 export default BoxMeta;
 
-export { Box };
+export { Box, BoxWithRef };
diff --git a/example/storybook/src/components/Layout/Box/BoxWithRef.tsx b/example/storybook/src/components/Layout/Box/BoxWithRef.tsx
index 1ce7cdbc2a..02a5732e3d 100644
--- a/example/storybook/src/components/Layout/Box/BoxWithRef.tsx
+++ b/example/storybook/src/components/Layout/Box/BoxWithRef.tsx
@@ -2,14 +2,14 @@ import { Box } from '@gluestack-ui/themed';
 import React from 'react';
 
 const BoxWithRef = ({ ...props }: any) => {
-  const myRef = React.useRef({});
+  const myRef = React.useRef<any>({});
   React.useEffect(() => {
     const styleObj = {
       borderWidth: 8,
       borderRadius: 4,
       borderColor: '#22D3EE',
     };
-    // @ts-ignore
+
     myRef.current.setNativeProps({
       style: styleObj,
     });
diff --git a/example/storybook/src/components/Layout/Box/index.stories.mdx b/example/storybook/src/components/Layout/Box/index.stories.mdx
index 23eb044bd1..4448f33da8 100644
--- a/example/storybook/src/components/Layout/Box/index.stories.mdx
+++ b/example/storybook/src/components/Layout/Box/index.stories.mdx
@@ -23,7 +23,7 @@ import Wrapper from '../../Wrapper';
 
 ## Themed
 
-Following is the default implementation of the **Box** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. 
+Following is the default implementation of the **Box** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component.
 
 <AppProvider>
   <CodePreview
@@ -57,7 +57,6 @@ Following is the default implementation of the **Box** component without any add
 
 > Note: You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Box/styled-components) to learn about default styling of Box component
 
-
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
@@ -74,14 +73,18 @@ The structure provided below can help you identify and understand a Box componen
 export default () => <Box />;
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Box
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
+## Themed
+
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
+
 ### Examples
 
 The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
@@ -97,7 +100,7 @@ A Box component with a ref property enables the direct reference and manipulatio
     metaData={{
       code: `
         function App () {
-          const myRef = useRef({});
+          const myRef = useRef<any>({});
           useEffect(() => {
             const styleObj = {
               borderWidth: 2,
@@ -124,15 +127,16 @@ A Box component with a ref property enables the direct reference and manipulatio
 
 ## Unstyled
 
-We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
 
+<!--
 ### Customizing the Box
 
-For customizing the Box, you have to map styled view to Box. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
-
+For customizing the Box, you have to map styled view to Box. You can refer [gluestack.io/style](/style) for more information on how to use styled components.
+https://style.gluestack.io/style
 #### Usage
 
-Default styling of the component can be found in the `components/box` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/example/storybook/src/ui-components/Box) of the styled `Box` component.
+Default styling of the component can be found in the `components/box` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Box) of the styled `Box` component.
 
 ```jsx
 // import the styles
@@ -144,3 +148,5 @@ const Box = Root;
 // using the Box component
 export default () => <Box />;
 ```
+
+-->
diff --git a/example/storybook/src/components/Layout/Center/index.stories.mdx b/example/storybook/src/components/Layout/Center/index.stories.mdx
index 85585f88d6..3fcebceed9 100644
--- a/example/storybook/src/components/Layout/Center/index.stories.mdx
+++ b/example/storybook/src/components/Layout/Center/index.stories.mdx
@@ -20,10 +20,6 @@ import { AppProvider, CodePreview, Table } from '@gluestack/design-system';
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Center** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Center/styled-components) to learn about default styling of Center component.
-
 <AppProvider>
   <CodePreview
     _rendererWrapper={{ py: '$6' }}
@@ -52,6 +48,8 @@ Following is the default implementation of the **Center** component without any
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
@@ -68,9 +66,9 @@ The structure provided below can help you identify and understand a Center compo
 export default () => <Center />;
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Center
 
@@ -78,15 +76,16 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 
 ## Unstyled
 
-We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
 
+<!--
 ### Customizing the Center
 
-For customizing the Center, you have to map styled view to Center. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+For customizing the Center, you have to map styled view to Center. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of the component can be found in the `components/center` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/example/storybook/src/ui-components/Center) of the styled `Center` component.
+Default styling of the component can be found in the `components/center` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Center) of the styled `Center` component.
 
 ```jsx
 // import the styles
@@ -98,6 +97,7 @@ const Center = Root;
 // using the Center component
 export default () => <Center />;
 ```
+-->
 
 ## Spec Doc
 
diff --git a/example/storybook/src/components/Layout/HStack/index.stories.mdx b/example/storybook/src/components/Layout/HStack/index.stories.mdx
index 2b31693c2a..19e829e452 100644
--- a/example/storybook/src/components/Layout/HStack/index.stories.mdx
+++ b/example/storybook/src/components/Layout/HStack/index.stories.mdx
@@ -27,10 +27,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **HStack** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/HStack/styled-components) to learn about default styling of HStack component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -65,6 +61,8 @@ Following is the default implementation of the **HStack** component without any
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
@@ -81,14 +79,26 @@ The structure provided below can help you identify and understand a HStack compo
 export default () => <HStack />;
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### HStack
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
+### Accessibility
+
+The accessibility of a HStack is primarily determined by the accessibility information of the components it contains. When you pass an accessible component inside a HStack, its accessibility attributes, such as labels and hints, will be utilized by assistive technologies like screen readers.
+
+## Themed
+
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
+
+### Props
+
+HStack component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+
 <AppProvider>
   <TableContainer>
     <Table>
@@ -146,16 +156,6 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
   </TableContainer>
 </AppProvider>
 
-### Accessibility
-
-The accessibility of a HStack is primarily determined by the accessibility information of the components it contains. When you pass an accessible component inside a HStack, its accessibility attributes, such as labels and hints, will be utilized by assistive technologies like screen readers.
-
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
-
-- `@gluestack-ui/utils`
-
 ### Examples
 
 The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
@@ -189,13 +189,14 @@ An Hstack component with the reversed prop reverses the order of horizontally st
 
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
+<!--
 ### Customizing the HStack
 
-We have a function called `createHStack` which can be used to create a custom HStack component. This function takes in a configuration object which contains the styled components that you want to use for the HStack. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createHStack` which can be used to create a custom HStack component. This function takes in a configuration object which contains the styled components that you want to use for the HStack. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of the component can be found in the `components/hstack` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/HStack) of the styled `HStack` component.
+Default styling of the component can be found in the `components/hstack` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/HStack) of the styled `HStack` component.
 
 ```jsx
 // import the styles
@@ -213,6 +214,7 @@ const HStack = createHStack({
 // Using the HStack component
 export default () => <HStack />;
 ```
+-->
 
 ## Spec Doc
 
diff --git a/example/storybook/src/components/Layout/LinearGradient/index.stories.mdx b/example/storybook/src/components/Layout/LinearGradient/index.stories.mdx
index 1f2d9ce4f0..ca1304fce8 100644
--- a/example/storybook/src/components/Layout/LinearGradient/index.stories.mdx
+++ b/example/storybook/src/components/Layout/LinearGradient/index.stories.mdx
@@ -41,10 +41,11 @@ You can refer to [this](https://ui.gluestack.io/docs/theme/customizing-component
 ```jsx
 // gluestack-ui.config.ts
 
-import { createConfig, config as defaultConfig, } from '@gluestack-ui/themed';
+import { createConfig } from '@gluestack-ui/themed';
+import { config as defaultConfig } from "@gluestack-ui/config";
 import { LinearGradient } from 'expo-linear-gradient';
    const config = createConfig({
-   ...defaultConfig.theme,
+   ...defaultConfig,
    components: {
      LinearGradient: {
        theme: {
@@ -205,11 +206,11 @@ We provide in-depth information on how to customize and extend the component's f
 
 ### Customizing the LinearGradient
 
-For customizing the LinearGradient, you have to map styled [LinearGradient](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) to LinearGradient. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+For customizing the LinearGradient, you have to map styled [LinearGradient](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) to LinearGradient. You can refer [gluestack.io/style](/style) for more information on how to use styled components.
 
 #### Usage
 
-Default styling of the component can be found in the `components/linear-gradient` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/components/Layout/LinearGradient) of the styled `LinearGradient` component.
+Default styling of the component can be found in the `components/linear-gradient` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/LinearGradient) of the styled `LinearGradient` component.
 
 ```jsx
 // import the styles
diff --git a/example/storybook/src/components/Layout/VStack/index.stories.mdx b/example/storybook/src/components/Layout/VStack/index.stories.mdx
index 175981fcf5..9331e856d3 100644
--- a/example/storybook/src/components/Layout/VStack/index.stories.mdx
+++ b/example/storybook/src/components/Layout/VStack/index.stories.mdx
@@ -27,10 +27,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **VStack** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/VStack/styled-components) to learn about default styling of VStack component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -71,11 +67,13 @@ Following is the default implementation of the **VStack** component without any
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
 
-```bash
+```jsx
 import { VStack } from '@gluestack-ui/themed';
 ```
 
@@ -87,13 +85,15 @@ The structure provided below can help you identify and understand a VStack compo
 export default () => <VStack />;
 ```
 
-### API Reference
+## Themed
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
-#### VStack
+### Props
 
-It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+VStack component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+
+#### VStack
 
 <AppProvider>
   <TableContainer>
@@ -158,12 +158,6 @@ The accessibility of a VStack is primarily determined by the accessibility infor
 
 In essence, the VStack acts as a container that inherits and propagates the accessibility attributes of its child views.
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
-
-- `@gluestack-ui/utils`
-
 ### Examples
 
 The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
@@ -196,15 +190,21 @@ A Vstack component with the reversed prop reverses the order of vertically stack
 
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
 ### Customizing the VStack
 
-We have a function called `createVStack` which can be used to create a custom VStack component. This function takes in a configuration object which contains the styled components that you want to use for the VStack. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createVStack` which can be used to create a custom VStack component. This function takes in a configuration object which contains the styled components that you want to use for the VStack. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of the component can be found in the `components/vstack` file.For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/VStack) of the styled `VStack` component.
+Default styling of the component can be found in the `components/vstack` file.For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/VStack) of the styled `VStack` component.
 
 ```jsx
 // import the styles
@@ -222,6 +222,7 @@ const VStack = createVStack({
 // Using the vstack component
 export default () => <VStack />;
 ```
+-->
 
 ## Spec Doc
 
diff --git a/example/storybook/src/components/MediaAndIcons/Avatar/index.stories.mdx b/example/storybook/src/components/MediaAndIcons/Avatar/index.stories.mdx
index 8f017c3bd5..fbf4ce29fb 100644
--- a/example/storybook/src/components/MediaAndIcons/Avatar/index.stories.mdx
+++ b/example/storybook/src/components/MediaAndIcons/Avatar/index.stories.mdx
@@ -32,10 +32,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Avatar** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Avatar/styled-components) to learn about default styling of Avatar component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -84,12 +80,19 @@ Following is the default implementation of the **Avatar** component without any
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
 
-```bash
-import { Avatar ,  AvatarBadge, AvatarFallbackText, AvatarImage,} from '@gluestack-ui/themed';
+```jsx
+import {
+  Avatar,
+  AvatarBadge,
+  AvatarFallbackText,
+  AvatarImage,
+} from '@gluestack-ui/themed';
 ```
 
 ### Anatomy
@@ -110,18 +113,92 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Avatar
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_badge</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style AvatarBadge Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_text</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style AvatarFallbackText Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### AvatarGroup
 
 It also inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_avatar</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style Avatar Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### AvatarImage
 
 It inherits all the properties of React Native's [Image](https://reactnative.dev/docs/image) component.
@@ -138,15 +215,13 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 
 - Returns a fallback to FallbackText if given an invalid image source.
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+## Themed
 
-- `@gluestack-ui/utils`
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
 ### Props
 
-Avatar component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Avatar component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Avatar
 
@@ -658,15 +733,21 @@ Fallback text is shown when the image fails to load, the image is not available
 
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
 ### Customizing the Avatar
 
-We have a function called `createAvatar` which can be used to create a custom avatar component. This function takes in a configuration object which contains the styled components that you want to use for the Avatar You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createAvatar` which can be used to create a custom avatar component. This function takes in a configuration object which contains the styled components that you want to use for the Avatar You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of all these components can be found in the `components/core/avatar` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Avatar) of the styled `Avatar` components.
+Default styling of all these components can be found in the `components/core/avatar` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Avatar) of the styled `Avatar` components.
 
 ```jsx
 // import the styles
@@ -700,3 +781,4 @@ export default () => (
   </AvatarGroup>
 );
 ```
+-->
diff --git a/example/storybook/src/components/MediaAndIcons/Icon/Icon.stories.tsx b/example/storybook/src/components/MediaAndIcons/Icon/Icon.stories.tsx
index b0bd6219a1..887eea158d 100644
--- a/example/storybook/src/components/MediaAndIcons/Icon/Icon.stories.tsx
+++ b/example/storybook/src/components/MediaAndIcons/Icon/Icon.stories.tsx
@@ -1,61 +1,5 @@
 import type { ComponentMeta } from '@storybook/react-native';
-import Icon, {
-  AddIcon,
-  AlertCircleIcon,
-  ArrowUpIcon,
-  ArrowDownIcon,
-  ArrowRightIcon,
-  ArrowLeftIcon,
-  AtSignIcon,
-  BellIcon,
-  CalendarDaysIcon,
-  CheckIcon,
-  CheckCircleIcon,
-  ChevronUpIcon,
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ChevronsLeftIcon,
-  ChevronsRightIcon,
-  ChevronsUpDownIcon,
-  CircleIcon,
-  ClockIcon,
-  CloseIcon,
-  CloseCircleIcon,
-  CopyIcon,
-  DownloadIcon,
-  EditIcon,
-  EyeIcon,
-  EyeOffIcon,
-  FavouriteIcon,
-  GlobeIcon,
-  GripVerticalIcon,
-  HelpCircleIcon,
-  InfoIcon,
-  LinkIcon,
-  ExternalLinkIcon,
-  LoaderIcon,
-  LockIcon,
-  MailIcon,
-  MenuIcon,
-  MessageCircleIcon,
-  MoonIcon,
-  PaperclipIcon,
-  PhoneIcon,
-  PlayIcon,
-  RemoveIcon,
-  RepeatIcon,
-  Repeat1Icon,
-  SearchIcon,
-  SettingsIcon,
-  ShareIcon,
-  SlashIcon,
-  StarIcon,
-  SunIcon,
-  ThreeDotsIcon,
-  TrashIcon,
-  UnlockIcon,
-} from './AllIcons';
+import Icon from './AllIcons';
 
 const IconMeta: ComponentMeta<typeof Icon> = {
   title: 'stories/MEDIA AND ICONS/Icons',
@@ -68,70 +12,70 @@ const IconMeta: ComponentMeta<typeof Icon> = {
       control: 'select',
       options: ['xl', 'lg', 'md', 'sm', 'xs', '2xs'],
     },
-    name: {
-      control: 'select',
-      options: [
-        AddIcon,
-        AlertCircleIcon,
-        ArrowUpIcon,
-        ArrowDownIcon,
-        ArrowRightIcon,
-        ArrowLeftIcon,
-        AtSignIcon,
-        BellIcon,
-        CalendarDaysIcon,
-        CheckIcon,
-        CheckCircleIcon,
-        ChevronUpIcon,
-        ChevronDownIcon,
-        ChevronLeftIcon,
-        ChevronRightIcon,
-        ChevronsLeftIcon,
-        ChevronsRightIcon,
-        ChevronsUpDownIcon,
-        CircleIcon,
-        ClockIcon,
-        CloseIcon,
-        CloseCircleIcon,
-        CopyIcon,
-        DownloadIcon,
-        EditIcon,
-        EyeIcon,
-        EyeOffIcon,
-        FavouriteIcon,
-        GlobeIcon,
-        GripVerticalIcon,
-        HelpCircleIcon,
-        InfoIcon,
-        LinkIcon,
-        ExternalLinkIcon,
-        LoaderIcon,
-        LockIcon,
-        MailIcon,
-        MenuIcon,
-        MessageCircleIcon,
-        MoonIcon,
-        PaperclipIcon,
-        PhoneIcon,
-        PlayIcon,
-        RemoveIcon,
-        RepeatIcon,
-        Repeat1Icon,
-        SearchIcon,
-        SettingsIcon,
-        ShareIcon,
-        SlashIcon,
-        StarIcon,
-        SunIcon,
-        ThreeDotsIcon,
-        TrashIcon,
-        UnlockIcon,
-      ],
-    },
+    // name: {
+    //   control: 'select',
+    //   options: [
+    //     AddIcon,
+    //     AlertCircleIcon,
+    //     ArrowUpIcon,
+    //     ArrowDownIcon,
+    //     ArrowRightIcon,
+    //     ArrowLeftIcon,
+    //     AtSignIcon,
+    //     BellIcon,
+    //     CalendarDaysIcon,
+    //     CheckIcon,
+    //     CheckCircleIcon,
+    //     ChevronUpIcon,
+    //     ChevronDownIcon,
+    //     ChevronLeftIcon,
+    //     ChevronRightIcon,
+    //     ChevronsLeftIcon,
+    //     ChevronsRightIcon,
+    //     ChevronsUpDownIcon,
+    //     CircleIcon,
+    //     ClockIcon,
+    //     CloseIcon,
+    //     CloseCircleIcon,
+    //     CopyIcon,
+    //     DownloadIcon,
+    //     EditIcon,
+    //     EyeIcon,
+    //     EyeOffIcon,
+    //     FavouriteIcon,
+    //     GlobeIcon,
+    //     GripVerticalIcon,
+    //     HelpCircleIcon,
+    //     InfoIcon,
+    //     LinkIcon,
+    //     ExternalLinkIcon,
+    //     LoaderIcon,
+    //     LockIcon,
+    //     MailIcon,
+    //     MenuIcon,
+    //     MessageCircleIcon,
+    //     MoonIcon,
+    //     PaperclipIcon,
+    //     PhoneIcon,
+    //     PlayIcon,
+    //     RemoveIcon,
+    //     RepeatIcon,
+    //     Repeat1Icon,
+    //     SearchIcon,
+    //     SettingsIcon,
+    //     ShareIcon,
+    //     SlashIcon,
+    //     StarIcon,
+    //     SunIcon,
+    //     ThreeDotsIcon,
+    //     TrashIcon,
+    //     UnlockIcon,
+    //   ],
+    // },
   },
   args: {
     size: 'md',
-    name: AddIcon,
+    // name: AddIcon,
   },
 };
 
diff --git a/example/storybook/src/components/MediaAndIcons/Icon/index.stories.mdx b/example/storybook/src/components/MediaAndIcons/Icon/index.stories.mdx
index 6ac541300b..1b3dcb40c3 100644
--- a/example/storybook/src/components/MediaAndIcons/Icon/index.stories.mdx
+++ b/example/storybook/src/components/MediaAndIcons/Icon/index.stories.mdx
@@ -40,14 +40,16 @@ import {
 } from 'lucide-react-native';
 
 import { transformedCode } from '../../../utils';
-import { AppProvider, CodePreview, Table } from '@gluestack/design-system';
+import {
+  AppProvider,
+  CodePreview,
+  Table,
+  TableContainer,
+  InlineCode,
+} from '@gluestack/design-system';
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Icon** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Icons/styled-components) to learn about default styling of Icon component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -77,11 +79,13 @@ Following is the default implementation of the **Icon** component without any ad
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
 
-```bash
+```jsx
 import { Icon } from '@gluestack-ui/themed';
 ```
 
@@ -93,9 +97,9 @@ The structure provided below can help you identify and understand a Icon compone
 export default () => <Icon as={} />;
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Icon
 
@@ -113,12 +117,50 @@ We have outlined the various features that ensure the Icon component is accessib
 
 Role: img is passed
 
-### Dependencies
+## Themed
+
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+### Props
 
-- `@gluestack-ui/utils`
-- `react-native-svg`
+Icon component is created using AsForwarder component from @gluestack-style/react. It extends all the props supported by [gluestack-ui AsForwarder](https://gluestack.io/style/docs/api/as-forwarder), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
+
+#### Image
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Name</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Value</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Default</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>size</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{'2xs | xs | sm | md | lg | xl'}</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>md</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
 
 ### Examples
 
@@ -300,7 +342,7 @@ Below is a list of all of the icons in the library.
 We can directly create Icon using createIcon function exported from `@gluestack-ui/themed` and use it by passing it in `as` prop in `Icon` component.
 CreateIcon function takes viewBox, d, path etc as parameters. We can use svgs from other icon libraries like fluent, react-icons etc.
 
-###### Notes to remember while using createIcon function
+##### Notes to remember while using createIcon function
 
 - Pass svg props such as `viewBox` in `createIcon` directly.
 - Copy the svg code without the SVG tag directly into the function argument `Path` or `D` or whichever prop justifies your svg.
@@ -352,19 +394,25 @@ After :
   />
 </AppProvider>
 
-> gluestack-ui provides a set of pre created icons that can be used directly in our app and can also integrate third party icons using [AsForwarder](https://style.gluestack.io/docs/api/as-forwarder) from [gluestack-style](https://style.gluestack.io/)
+> gluestack-ui provides a set of pre created icons that can be used directly in our app and can also integrate third party icons using [AsForwarder](https://style.gluestack.io/styleer) from [gluestack-style](/style)https://style.gluestack.io/style
 
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
 ### Customizing the Icon
 
-We have a function called `createIcon` which can be used to create a custom icon component. This function takes in a configuration object which contains the styled components that you want to use for the icon. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createIcon` which can be used to create a custom icon component. This function takes in a configuration object which contains the styled components that you want to use for the icon. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of all these components can be found in the `./components/core/icon` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Icons) of the styled `Icon` components.
+Default styling of all these components can be found in the `./components/core/icon` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Icons) of the styled `Icon` components.
 
 ```jsx
 // import the styles
@@ -381,3 +429,4 @@ const Icon = createIcon({
 // Using the icon component
 export default () => <Icon />;
 ```
+-->
diff --git a/example/storybook/src/components/MediaAndIcons/Image/index.stories.mdx b/example/storybook/src/components/MediaAndIcons/Image/index.stories.mdx
index fe3a7d6f89..1ef99c055b 100644
--- a/example/storybook/src/components/MediaAndIcons/Image/index.stories.mdx
+++ b/example/storybook/src/components/MediaAndIcons/Image/index.stories.mdx
@@ -19,11 +19,14 @@ import { VStack } from './ImageSizes';
 import { transformedCode } from '../../../utils';
 import Wrapper from '../../Wrapper';
 
-import { AppProvider, CodePreview, Text } from '@gluestack/design-system';
-
-## Themed
-
-Following is the default implementation of the **Image** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Image/styled-components) to learn about default styling of Image component.
+import {
+  AppProvider,
+  CodePreview,
+  Text,
+  Table,
+  TableContainer,
+  InlineCode,
+} from '@gluestack/design-system';
 
 <AppProvider>
   <CodePreview
@@ -77,11 +80,13 @@ Following is the default implementation of the **Image** component without any a
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
 
-```bash
+```jsx
 import { Image } from '@gluestack-ui/themed';
 ```
 
@@ -93,23 +98,76 @@ The structure provided below can help you identify and understand a Image compon
 export default () => <Image source={source} />;
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Image
 
 It inherits all the properties of React Native's [Image](https://reactnative.dev/docs/image) component.
 
+## Themed
+
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
+
+### Props
+
+Image component is created using Image component from react-native. It extends all the props supported by [React Native Image](https://reactnative.dev/docs/image#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
+
+#### Image
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Name</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Value</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Default</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>size</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>
+              {'2xs | xs | sm | md | lg | xl | 2xl | full'}
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>md</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
 ### Customizing the Image
 
 We have a function called `createImage` which can be used to create a custom image component. This function takes in a configuration object which contains the styled components that you want to use for the Image.
 
-For customizing the Image, you have to map styled Image to Image. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+For customizing the Image, you have to map styled Image to Image. You can refer [gluestack.io/style](/style) for more information on how to use styled components.
+-->
 
 #### How to use Next.js Image
 
@@ -137,7 +195,7 @@ const Image = createImage({
   Root: StyledImage
 });
 
-// you can also https://style.gluestack.io/docs/getting-started/styled to style the component
+// you can also https://style.gluestack.io/styled/styled to style the component
 
 export default () => <Image />;
 ```
@@ -163,9 +221,10 @@ const Image = createImage({
 export default () => <Image />;
 ```
 
+<!--
 #### Usage
 
-Default styling of the component can be found in the `components/core/image` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Image) of the styled `Image` component.
+Default styling of the component can be found in the `components/core/image` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Image) of the styled `Image` component.
 
 ```jsx
 // import the styles
@@ -182,3 +241,5 @@ const Image = createImage({
 // Using the Image component
 export default () => <Image />;
 ```
+
+-->
diff --git a/example/storybook/src/components/Others/Fab/index.stories.mdx b/example/storybook/src/components/Others/Fab/index.stories.mdx
index ae3aa1a660..19bd030430 100644
--- a/example/storybook/src/components/Others/Fab/index.stories.mdx
+++ b/example/storybook/src/components/Others/Fab/index.stories.mdx
@@ -255,7 +255,7 @@ It inherits all the properties of React Native's [Text](https://reactnative.dev/
 
 #### FabIcon
 
-Contains all Icon related layout style props and actions. It inherits all the properties of Gluestack Style's [AsForwarder](https://style.gluestack.io/docs/api/as-forwarder) component.
+Contains all Icon related layout style props and actions. It inherits all the properties of Gluestack Style's [AsForwarder](https://style.gluestack.io/styleer) component.
 
 ### Features
 
@@ -291,7 +291,7 @@ The following are the lists of all the libraries and packages the component reli
 
 ### Props
 
-Fab component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Fab component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Fab
 
@@ -769,11 +769,11 @@ We provide in-depth information on how to customize and extend the component's f
 
 ### Customizing the Fab
 
-We have a function called `createFab` which can be used to create a custom fab component. This function takes in a configuration object which contains the styled components that you want to use for the fab. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createFab` which can be used to create a custom fab component. This function takes in a configuration object which contains the styled components that you want to use for the fab. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of all these components can be found in the `components/core/fab` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Fab) of the styled `Fab` components.
+Default styling of all these components can be found in the `components/core/fab` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Fab) of the styled `Fab` components.
 
 ```jsx
 // import the styles
diff --git a/example/storybook/src/components/Overlay/AlertDialog/index.stories.mdx b/example/storybook/src/components/Overlay/AlertDialog/index.stories.mdx
index d6b272b6ea..21e050dad3 100644
--- a/example/storybook/src/components/Overlay/AlertDialog/index.stories.mdx
+++ b/example/storybook/src/components/Overlay/AlertDialog/index.stories.mdx
@@ -42,10 +42,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **AlertDialog** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/AlertDialog/styled-components) to learn about default styling of AlertDialog component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -135,18 +131,22 @@ Following is the default implementation of the **AlertDialog** component without
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
 
-```bash
-import {  AlertDialog,
+```jsx
+import {
+  AlertDialog,
   AlertDialogBackdrop,
   AlertDialogContent,
   AlertDialogHeader,
   AlertDialogCloseButton,
   AlertDialogFooter,
-  AlertDialogBody, } from '@gluestack-ui/themed';
+  AlertDialogBody,
+} from '@gluestack-ui/themed';
 ```
 
 ### Anatomy
@@ -168,14 +168,14 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### AlertDialog
 
-Contains all button related layout style props and actions.
-It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
+Contains all View related layout style props and actions.
+It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
 <AppProvider>
   <TableContainer>
@@ -362,6 +362,39 @@ It inherits all the properties of React Native's [Pressable](https://reactnative
   </TableContainer>
 </AppProvider>
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_content</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style AlertDialogContent Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+
+  </TableContainer>
+</AppProvider>
+
 #### AlertDialogBackdrop
 
 It is React Native's [Pressable](https://reactnative.dev/docs/pressable#props) component, created using [@legendapp/motion's](https://legendapp.com/open-source/motion/) `createMotionAnimatedComponent` function to add animation to the component. You can use any declarative animation library you prefer.
@@ -374,6 +407,48 @@ It is [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.V
 
 It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_text</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style AlertDialogCloseButton  Text Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_icon</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style AlertDialogCloseButton  Icon Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### AlertDialogHeader
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
@@ -390,20 +465,13 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 
 We have outlined the various features that ensure the AlertDialog component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.It uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/) which follows the [WAI-ARIA Alert and Message Dialogs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/).
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+## Themed
 
-- `@gluestack-ui/utils`
-- `@react-native-aria/focus`
-- `@react-native-aria/interactions`
-- `@gluestack-ui/hooks`
-- `@gluestack-ui/overlay`
-- `@react-native-aria/dialog`
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
 ### Props
 
-AlertDialog component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+AlertDialog component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### AlertDialog
 
@@ -444,6 +512,8 @@ AlertDialog component is created using View component from react-native. It exte
 
 ### Examples
 
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
 #### AlertDialog with semantic icon
 
 An example of an AlertDialog component incorporating an icon component for visually representing important information or actions.
@@ -635,17 +705,23 @@ An AlertDialog component with adjustable sizes, providing flexible and visually
 
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
 ### Customizing the AlertDialog
 
-We have a function called `createAlertDialog` which can be used to create a custom alert-dialog component. This function takes in a configuration object which contains the styled components that you want to use for the alert-dialog. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createAlertDialog` which can be used to create a custom alert-dialog component. This function takes in a configuration object which contains the styled components that you want to use for the alert-dialog. You can refer [gluestack.io/style](/style) for more information on how to use styled components.
 
-You can read more on how to animate components [here](https://ui.gluestack.io/docs/advanced/animations).
+You can read more on how to animate components [here](/ui/docs/advanced/animations).
 
 #### Usage
 
-Default styling of all these components can be found in the `components/core/alert-dialog` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/AlertDialog) of the styled `AlertDialog` components.
+Default styling of all these components can be found in the `components/core/alert-dialog` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/AlertDialog) of the styled `AlertDialog` components.
 
 ```jsx
 // import the styles
@@ -655,7 +731,7 @@ import {
   CloseButton,
   Header,
   Footer,
-  Body,
+  Body,https://style.gluestack.io/style
   Backdrop,
 } from '../components/core/alert-dialog/styled-components';
 
@@ -699,3 +775,4 @@ export default () => (
   </AlertDialog>
 );
 ```
+-->
diff --git a/example/storybook/src/components/Overlay/Menu/index.stories.mdx b/example/storybook/src/components/Overlay/Menu/index.stories.mdx
index 178d1c1a82..8924e6d5e1 100644
--- a/example/storybook/src/components/Overlay/Menu/index.stories.mdx
+++ b/example/storybook/src/components/Overlay/Menu/index.stories.mdx
@@ -41,10 +41,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Menu** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Menu/styled-components) to learn about default styling of Menu component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -122,11 +118,13 @@ Following is the default implementation of the **Menu** component without any ad
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
 
-```bash
+```jsx
 import { Menu } from '@gluestack-ui/themed';
 ```
 
@@ -144,9 +142,9 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Menu
 
@@ -445,6 +443,38 @@ Contains all button related layout style props and actions. It inherits all the
   </TableContainer>
 </AppProvider>
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_text</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style MenuItemLabel Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### MenuItemLabel
 
 Contains all text related layout style props and actions. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
@@ -460,20 +490,6 @@ We have outlined the various features that ensure the Menu component is accessib
 
 Adheres to the [MENU WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/).
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
-
-- `@gluestack-ui/overlay`
-- `@gluestack-ui/utils`
-- `@gluestack-ui/hooks`
-- `@react-native-aria/focus`
-- `@react-native-aria/interactions`
-- `@react-native-aria/menu`
-- `@react-native-aria/overlays`
-- `react-stately`
-- `@react-stately/utils`
-
 ### Examples
 
 The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
@@ -656,15 +672,21 @@ Our Menu component supports dynamic disabling of menu items, enabling you to con
 
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
 ### Customizing the Menu
 
-We have a function called `createMenu` which can be used to create a custom menu component. This function takes in a configuration object which contains the styled components that you want to use for the Menu You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createMenu` which can be used to create a custom menu component. This function takes in a configuration object which contains the styled components that you want to use for the Menu You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of all these components can be found in the `components/core/menu` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/components/Overlay/Menu) of the styled `Menu` components.
+Default styling of all these components can be found in the `components/core/menu` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Menu) of the styled `Menu` components.
 
 ```jsx
 // import the styles
@@ -695,3 +717,4 @@ export default () => (
   </Menu>
 );
 ```
+-->
diff --git a/example/storybook/src/components/Overlay/Modal/index.stories.mdx b/example/storybook/src/components/Overlay/Modal/index.stories.mdx
index c064dbe287..6d2789abc4 100644
--- a/example/storybook/src/components/Overlay/Modal/index.stories.mdx
+++ b/example/storybook/src/components/Overlay/Modal/index.stories.mdx
@@ -56,10 +56,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Modal** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Modal/styled-components) to learn about default styling of Modal component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -152,11 +148,13 @@ Following is the default implementation of the **Modal** component without any a
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
 
-```bash
+```jsx
 import { Modal } from '@gluestack-ui/themed';
 ```
 
@@ -179,13 +177,13 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Modal
 
-Contains all button related layout style props and actions. It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable#props) component.
+Contains all View related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.
 
 <AppProvider>
   <TableContainer>
@@ -372,6 +370,38 @@ Contains all button related layout style props and actions. It inherits all the
   </TableContainer>
 </AppProvider>
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_content</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style ModalContent Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 #### ModalBackdrop
 
 It is React Native's [Pressable](https://reactnative.dev/docs/pressable#props) component, created using [@legendapp/motion's](https://legendapp.com/open-source/motion/) `createMotionAnimatedComponent` function to add animation to the component. You can use any declarative animation library you prefer.
@@ -429,6 +459,49 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_text</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style ModalCloseButton  Text Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+         <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_icon</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style ModalCloseButton  Icon Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+
+  </TableContainer>
+</AppProvider>
+
 #### ModalBody
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
@@ -441,21 +514,13 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 
 We have outlined the various features that ensure the Modal component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. It uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+## Themed
 
-- `@gluestack-ui/hooks`
-- `@gluestack-ui/overlay`
-- `@gluestack-ui/utils`
-- `@react-native-aria/focus`
-- `@react-native-aria/interactions`
-- `@react-native-aria/overlays`
-- `@react-native-aria/dialog`
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
 ### Props
 
-Modal component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Modal component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Modal
 
@@ -826,17 +891,23 @@ A versatile modal component offering different sizes to accommodate various cont
 
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
 ### Customizing the Modal
 
-We have a function called `createModal` which can be used to create a custom Modal component. This function takes in a configuration object which contains the styled components that you want to use for the modal. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createModal` which can be used to create a custom Modal component. This function takes in a configuration object which contains the styled components that you want to use for the modal. You can refer [gluestack.io/style](/style) for more information on how to use styled components.
 
-You can read more on how to animate components [here](https://ui.gluestack.io/docs/advanced/animations).
+You can read more on how to animate components [here](/ui/docs/advanced/animations).
 
 #### Usage
 
-Default styling of all these components can be found in the `components/core/modal` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Modal) of the styled `Modal` components.
+Default styling of all these components can be found in the `components/core/modal` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Modal) of the styled `Modal` components.
 
 ```jsx
 // import the styles
@@ -846,7 +917,7 @@ import {
   CloseButton,
   Header,
   Footer,
-  Body,
+  Body,https://style.gluestack.io/style
   Backdrop,
 } from '../components/core/modal/styled-components';
 
@@ -891,3 +962,4 @@ export default () => (
   </Modal>
 );
 ```
+-->
diff --git a/example/storybook/src/components/Overlay/Popover/Popover.tsx b/example/storybook/src/components/Overlay/Popover/Popover.tsx
index 5ca923ce45..435d692b70 100644
--- a/example/storybook/src/components/Overlay/Popover/Popover.tsx
+++ b/example/storybook/src/components/Overlay/Popover/Popover.tsx
@@ -30,10 +30,12 @@ import { PhoneIcon, Clock3Icon, MailIcon } from 'lucide-react-native';
 const PopoverBasic = ({
   showPopover: showPopoverProp = true,
   placement = 'bottom',
+  size = 'md',
 }: any) => {
   return (
     <Center w={1200} h={800}>
       <Popover
+        size={size}
         offset={10}
         isOpen={showPopoverProp}
         placement={placement}
@@ -47,7 +49,7 @@ const PopoverBasic = ({
         }}
       >
         <PopoverBackdrop />
-        <PopoverContent maxWidth="$96">
+        <PopoverContent>
           <PopoverHeader>
             <Heading>Welcome!</Heading>
             <PopoverCloseButton>
diff --git a/example/storybook/src/components/Overlay/Popover/index.stories.mdx b/example/storybook/src/components/Overlay/Popover/index.stories.mdx
index ee3e65fc63..013af29055 100644
--- a/example/storybook/src/components/Overlay/Popover/index.stories.mdx
+++ b/example/storybook/src/components/Overlay/Popover/index.stories.mdx
@@ -55,10 +55,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Popover** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Popover/styled-components) to learn about default styling of Popover component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -175,6 +171,8 @@ Following is the default implementation of the **Popover** component without any
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
@@ -202,9 +200,9 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Popover
 
@@ -568,6 +566,39 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
   </TableContainer>
 </AppProvider>
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_content</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style PopoverContent Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+
+  </TableContainer>
+</AppProvider>
+
 #### PopoverBackdrop
 
 It is React Native's [Pressable](https://reactnative.dev/docs/pressable) component, created using [@legendapp/motion's](https://legendapp.com/open-source/motion/) `createMotionAnimatedComponent` function to add animation to the component. You can use any declarative animation library you prefer.
@@ -593,6 +624,49 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 
 It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
 
+**Descendants Styling Props**
+Props to style child components.
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_text</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style PopoverCloseButton  Text Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+         <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_icon</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style PopoverCloseButton  Icon Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+
+  </TableContainer>
+</AppProvider>
+
 ### Accessibility
 
 We have outlined the various features that ensure the Popover component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. It adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).
@@ -605,21 +679,13 @@ We have outlined the various features that ensure the Popover component is acces
 - `Shift + Tab`: Moves focus to the previous focusable element.
 - `Esc`: Closes the popover and moves focus to PopoverTrigger.
 
-### Dependencies
-
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+## Themed
 
-- `@gluestack-ui/hooks`
-- `@gluestack-ui/overlay`
-- `@gluestack-ui/utils`
-- `@react-native-aria/focus`
-- `@react-native-aria/interactions`
-- `@react-native-aria/overlays`
-- `@react-native-aria/dialog`
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
 
 ### Props
 
-Popover component is created using ScrollView component from react-native. It extends all the props supported by [React Native ScrollView](https://reactnative.dev/docs/scrollview#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Popover component is created using ScrollView component from react-native. It extends all the props supported by [React Native ScrollView](https://reactnative.dev/docs/scrollview#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Popover
 
@@ -793,17 +859,23 @@ A popover component can enhance the avatar by providing additional information a
 
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
-### Customizing the Popover
+### Customizing the Popoverhttps://style.gluestack.io/style
 
-We have a function called `createPopover` which can be used to create a custom popover component. This function takes in a configuration object which contains the styled components that you want to use for the Popover You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createPopover` which can be used to create a custom popover component. This function takes in a configuration object which contains the styled components that you want to use for the Popover You can refer [gluestack.io/style](/style) for more information on how to use styled components.
 
-You can read more on how to animate components [here](https://ui.gluestack.io/docs/advanced/animations).
+You can read more on how to animate components [here](/ui/docs/advanced/animations).
 
 #### Usage
 
-Default styling of all these components can be found in the `components/core/popover` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/components/Overlay/Popover) of the styled `Popover` components.
+Default styling of all these components can be found in the `components/core/popover` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Popover) of the styled `Popover` components.
 
 ```jsx
 // import the styles
@@ -848,3 +920,4 @@ export default () => (
   </Popover>
 );
 ```
+-->
diff --git a/example/storybook/src/components/Overlay/Tooltip/index.stories.mdx b/example/storybook/src/components/Overlay/Tooltip/index.stories.mdx
index 0bdef06c30..ae520d7faa 100644
--- a/example/storybook/src/components/Overlay/Tooltip/index.stories.mdx
+++ b/example/storybook/src/components/Overlay/Tooltip/index.stories.mdx
@@ -37,10 +37,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Tooltip** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Tooltip/styled-components) to learn about default styling of Tooltip component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -100,12 +96,13 @@ Following is the default implementation of the **Tooltip** component without any
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
 
 ```jsx
-// import the component from your components folder
 import { Tooltip } from '@gluestack-ui/themed';
 ```
 
@@ -123,9 +120,9 @@ export default () => (
 );
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Tooltip
 
@@ -436,20 +433,42 @@ Contains all text related layout style props and actions. It inherits all the pr
 
 Contains all backdrop related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
-### Accessibility
+**Descendants Styling Props**
+Props to style child components.
 
-We have outlined the various features that ensure the Tooltip component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. It adheres to the [ WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/).
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Sx Prop</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Description</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>_text</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`Prop to style TooltipText Component`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
 
-### Dependencies
+  </TableContainer>
+</AppProvider>
 
-The following are the lists of all the libraries and packages the component relies on. This information will help you ensure that your project has all the necessary dependencies installed to use the component.
+### Accessibility
 
-- `@gluestack-ui/hooks`
-- `@gluestack-ui/overlay`
-- `@gluestack-ui/utils`
-- `@react-native-aria/focus`
-- `@react-native-aria/interactions`
-- `@react-native-aria/overlays`
+We have outlined the various features that ensure the Tooltip component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. It adheres to the [ WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/).
 
 ### Examples
 
@@ -616,17 +635,23 @@ A tooltip component with an icon is a user interface element that provides conte
 
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
 ### Customizing the Tooltip
 
-We have a function called `createTooltip` which can be used to create a custom tooltip component. This function takes in a configuration object which contains the styled components that you want to use for the Tooltip You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+We have a function called `createTooltip` which can be used to create a custom tooltip component. This function takes in a configuration object which contains the styled components that you want to use for the Tooltip You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
-You can read more on how to animate components [here](https://ui.gluestack.io/docs/advanced/animations).
+You can read more on how to animate components [here](/ui/docs/advanced/animations).
 
 #### Usage
 
-Default styling of all these components can be found in the `components/core/tooltip` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Tooltip) of the styled `Tooltip` components.
+Default styling of all these components can be found in the `components/core/tooltip` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Tooltip) of the styled `Tooltip` components.
 
 ```jsx
 // import the styles
@@ -651,3 +676,4 @@ export default () => (
   </Tooltip>
 );
 ```
+-->
diff --git a/example/storybook/src/components/Provider.tsx b/example/storybook/src/components/Provider.tsx
index a0143bf6e5..a1eb6a3b9b 100644
--- a/example/storybook/src/components/Provider.tsx
+++ b/example/storybook/src/components/Provider.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { config } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
 import { StyledProvider } from '@gluestack-ui/themed';
 import { createProvider } from '@gluestack-ui/themed';
 
@@ -12,7 +12,7 @@ TempProvider.displayName = 'Provider';
 
 export const Provider = ({ children }: any) => {
   return (
-    <TempProvider config={config.theme}>
+    <TempProvider config={config}>
       <Box
         sx={{
           _dark: {
diff --git a/example/storybook/src/components/Provider/GluestackUIProvider/Provider.tsx b/example/storybook/src/components/Provider/GluestackUIProvider/Provider.tsx
index de4b41ae6b..b408b61601 100644
--- a/example/storybook/src/components/Provider/GluestackUIProvider/Provider.tsx
+++ b/example/storybook/src/components/Provider/GluestackUIProvider/Provider.tsx
@@ -7,7 +7,7 @@ import {
   Text,
   Box,
 } from '@gluestack-ui/themed';
-import { config } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
 
 const ProviderStory = () => {
   const [colorMode, setColorMode] = React.useState<
@@ -17,7 +17,7 @@ const ProviderStory = () => {
     colorMode === 'light' ? setColorMode('dark') : setColorMode('light');
   };
   return (
-    <GluestackUIProvider config={config.theme} colorMode={colorMode}>
+    <GluestackUIProvider config={config} colorMode={colorMode}>
       <Box w={100}>
         <Button onPress={toggleColorMode}>
           <ButtonText>Change Mode</ButtonText>
@@ -27,10 +27,10 @@ const ProviderStory = () => {
         </Pressable>
         <GluestackUIProvider
           config={{
-            ...config.theme,
+            ...config,
             tokens: {
-              ...config.theme.tokens,
-              colors: { ...config.theme.tokens.colors, pink600: 'red' },
+              ...config.tokens,
+              colors: { ...config.tokens.colors, pink600: 'red' },
             },
           }}
         >
diff --git a/example/storybook/src/components/Provider/GluestackUIProvider/index.stories.mdx b/example/storybook/src/components/Provider/GluestackUIProvider/index.stories.mdx
index 9e40df26a4..dd1352b24a 100644
--- a/example/storybook/src/components/Provider/GluestackUIProvider/index.stories.mdx
+++ b/example/storybook/src/components/Provider/GluestackUIProvider/index.stories.mdx
@@ -7,7 +7,7 @@ showHeader: true
 ---
 
 import { Meta } from '@storybook/addon-docs';
-import { config } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
 
 <Meta title="components/Provider/GluestackUIProvider" />
 
@@ -34,7 +34,7 @@ Following is the default implementation of the **GluestackUIProvider** component
       code: `
         function App(){
           return (
-                <GluestackUIProvider config={config.theme}>
+                <GluestackUIProvider config={config}>
                   <Button>
                     <ButtonText>Hello World</ButtonText>
                   </Button>
@@ -89,9 +89,10 @@ We have also exported all the providers separately so that you can use them indi
 To use only config and styled functionalities, you can use `GluestackUIStyledProvider` component.
 
 ```jsx
-import { GluestackUIStyledProvider, config } from '@gluestack-ui/themed';
+import { GluestackUIStyledProvider } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
 
-<GluestackUIStyledProvider config={config.theme}>
+<GluestackUIStyledProvider config={config}>
   <Button>
     <ButtonText>Hello World</ButtonText>
   </Button>
@@ -138,16 +139,16 @@ const GluestackUIProvider = ({ children, ...props }: any) => {
 
 ### Customizing the Provider
 
-We have a function called `createProvider` which can be used to create provider with `StyledProvider` exported from `@gluestack-style/react`. You can pass configuration object which consists theme. You can change the theme object specific to your brand. Refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to create a theme.
+We have a function called `createProvider` which can be used to create provider with `StyledProvider` exported from `@gluestack-style/react`. You can pass configuration object which consists theme. You can change the theme object specific to your brand. Refer [gluestack.io/style](/style) for more information on how to create a theme.
 
 #### Usage
-
+https://style.gluestack.io/style
 You can import the config For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Provider).
 
 ```jsx
 // import the createProvider function
 import { createProvider } from '@gluestack-ui/provider';
-import { config } from '../gluestack.config';
+import { config } from '@gluestack-ui/config';
 import { StyledProvider } from '@gluestack-style/react';
 
 export const Provider = createProvider({
@@ -156,7 +157,7 @@ export const Provider = createProvider({
 
 // Using the Provider component
 export default () => (
-  <Provider config={config.theme}>
+  <Provider config={config}>
     <Text />
   </Provider>
 );
diff --git a/example/storybook/src/components/Typography/Heading/index.stories.mdx b/example/storybook/src/components/Typography/Heading/index.stories.mdx
index 5022e8c8da..1b52868f67 100644
--- a/example/storybook/src/components/Typography/Heading/index.stories.mdx
+++ b/example/storybook/src/components/Typography/Heading/index.stories.mdx
@@ -27,10 +27,6 @@ import {
 
 import Wrapper from '../../Wrapper';
 
-## Themed
-
-Following is the default implementation of the **Heading** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Heading/styled-components) to learn about default styling of Heading component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -53,11 +49,13 @@ Following is the default implementation of the **Heading** component without any
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
 
-```bash
+```jsx
 import { Heading } from '@gluestack-ui/themed';
 ```
 
@@ -65,18 +63,156 @@ import { Heading } from '@gluestack-ui/themed';
 
 The structure provided below can help you identify and understand a Heading component's various parts.
 
-```bash
-export default () => <Heading/>;
+```jsx
+export default () => <Heading />;
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Heading
 
 It inherits all the properties of @expo/html-elements's [H1](https://github.com/expo/expo/tree/main/packages/html-elements) component.
 
+## Themed
+
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
+
+### Props
+
+Heading component is created using H1 component from @expo/html-elements. It extends all the props supported by [Expo HTML Heading Elements](https://www.npmjs.com/package/@expo/html-elements/v/0.0.5), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
+
+#### Button
+
+<AppProvider>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Name</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Value</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Default</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>isTruncated</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>true | false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>bold</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>true | false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>underline</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>true | false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>strikeThrough</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>true | false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>sub</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>true | false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>italic</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>true | false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>highlight</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>true | false</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>false</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>size</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>
+              5xl | 4xl | 3xl | 2xl | xl | lg | md | sm | xs
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>md</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</AppProvider>
+
 ### Examples
 
 The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
@@ -254,15 +390,21 @@ The Heading component also accepts some shorthands for basic quick styling.
 
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
 ### Customizing the Heading
 
-For customizing the Heading, you have to map styled view to Heading. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+For customizing the Heading, you have to map styled view to Heading. You can refer [gluestack.io/style](/style) for more information on how to use styled components.
 
 #### Usage
 
-Default styling of the component can be found in the `components/core/heading` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Heading) of the styled `Heading` component.
+Default styling of the component can be found in the `components/core/heading` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Heading) of the styled `Heading` component.
 
 ```jsx
 // import the styles
@@ -274,3 +416,4 @@ const Heading = Root;
 // Using the heading component
 export default () => <Heading />;
 ```
+-->
diff --git a/example/storybook/src/components/Typography/Text/index.stories.mdx b/example/storybook/src/components/Typography/Text/index.stories.mdx
index 2d2352a745..bd6eb01691 100644
--- a/example/storybook/src/components/Typography/Text/index.stories.mdx
+++ b/example/storybook/src/components/Typography/Text/index.stories.mdx
@@ -26,10 +26,6 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 
-## Themed
-
-Following is the default implementation of the **Text** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component. You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/Text/styled-components) to learn about default styling of Text component.
-
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -54,11 +50,13 @@ Following is the default implementation of the **Text** component without any ad
 
 <br />
 
+## API Reference
+
 ### Import
 
 To use the component in your project, run the command below into your import statement. This will import the component from your components folder.
 
-```bash
+```jsx
 import { Text } from '@gluestack-ui/themed';
 ```
 
@@ -70,17 +68,21 @@ The structure provided below can help you identify and understand a Text compone
 export default () => <Text />;
 ```
 
-### API Reference
+### Component Props
 
-The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
 
 #### Text
 
 It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
 
+## Themed
+
+The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project.
+
 ### Props
 
-Text component is created using Text component from react-native. It extends all the props supported by [React Native Text](https://reactnative.dev/docs/text#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+Text component is created using Text component from react-native. It extends all the props supported by [React Native Text](https://reactnative.dev/docs/text#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### Text
 
@@ -383,15 +385,21 @@ Text component also accepts some shorthands for basic quick styling.
 
 ## Unstyled
 
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme/customizing-components). The import names of components serve as keys to customize each component.
+
+<!--
+
+### Advanced
+
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
 
 ### Customizing the Text
 
-For customizing the Text, you have to map styled view to Text. You can refer [style.gluestack.io](https://style.gluestack.io/) for more information on how to use styled components.
+For customizing the Text, you have to map styled view to Text. You can refer [gluestack.io/style](https://style.gluestack.io/styleon on how to use styled components.
 
 #### Usage
 
-Default styling of the component can be found in the `components/core/text` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Text) of the styled `Text` component.
+Default styling of the component can be found in the `components/core/text` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Text) of the styled `Text` component.
 
 ```jsx
 // import the styles
@@ -403,3 +411,4 @@ const Text = Root;
 // Using the text component
 export default () => <Text />;
 ```
+-->
diff --git a/example/storybook/src/components/config.ts b/example/storybook/src/components/config.ts
index 60ea3dd3ff..885496b277 100644
--- a/example/storybook/src/components/config.ts
+++ b/example/storybook/src/components/config.ts
@@ -1,10 +1,11 @@
 // gluestack-ui.config.ts
 import { LinearGradient } from 'expo-linear-gradient';
-import { createConfig, config as defaultConfig } from '@gluestack-ui/themed';
-
+import { createComponents, createConfig } from '@gluestack-ui/themed';
+import { config as defaultConfig } from '@gluestack-ui/config';
 export const config = createConfig({
-  ...defaultConfig.theme,
-  components: {
+  ...defaultConfig,
+  components: createComponents({
+    ...defaultConfig.components,
     LinearGradient: {
       theme: {
         props: {
@@ -13,7 +14,7 @@ export const config = createConfig({
         },
       },
     },
-  },
+  }),
 });
 
 // Get the type of Config
diff --git a/example/storybook/src/core-concepts/ThemedLibrary/Themed.tsx b/example/storybook/src/core-concepts/ThemedLibrary/Themed.tsx
new file mode 100644
index 0000000000..2a9b4e735d
--- /dev/null
+++ b/example/storybook/src/core-concepts/ThemedLibrary/Themed.tsx
@@ -0,0 +1,3 @@
+export { config } from '@gluestack-ui/config';
+
+export { Button, ButtonText, GluestackUIProvider } from '@gluestack-ui/themed';
diff --git a/example/storybook/src/core-concepts/ThemedLibrary/index.stories.mdx b/example/storybook/src/core-concepts/ThemedLibrary/index.stories.mdx
index 2253591c8b..e5c8b44ee6 100644
--- a/example/storybook/src/core-concepts/ThemedLibrary/index.stories.mdx
+++ b/example/storybook/src/core-concepts/ThemedLibrary/index.stories.mdx
@@ -6,23 +6,27 @@ description: gluestack-ui is a themed library, it provides different themes whic
 pageTitle: Themed Library
 
 pageDescription: gluestack-ui is a themed library, it provides different themes which can be used according to the user. In this guide we will learn how to create new themes and use them.
+
+showHeader: true
 ---
 
 import { Meta } from '@storybook/addon-docs';
+import { config, Button, ButtonText, GluestackUIProvider } from './Themed';
+import { AppProvider, CodePreview } from '@gluestack/design-system';
 
 <Meta title="Core Concepts/Themed Library" />
 
-# Themed Library
+The `@gluestack-ui/themed` UI library is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer.
 
-`@gluestack-ui/themed` is a themed component library, it is a collection of pre-designed user interface components that are styled according to a specific theme or design language. These components are reusable, consistent, interactive and are accessible on web, iOS, and Android.
+For users looking for a seamless integration experience, we offer the `@gluestack-ui/config` package, which comes with pre-configured theme that can easily be integrated with `@gluestack-ui/themed` for a convenient styling solution.
 
-All the components of `@gluestack-ui/themed` are styled according to the default theme. This default theme ensures a consistent and polished visual identity. gluestack-ui simplifies the development process by wrapping your app within the `GluestackUIProvider` and passing the configuration as a parameter, you instantly unlock the magic of seamless styling.
+`gluestack-ui` simplifies the development process by wrapping your app within the `GluestackUIProvider` and passing the configuration as a parameter. This instantly unlocks the magic of seamless styling. These components are reusable, consistent, interactive, and accessible on web, iOS, and Android.
 
 ## Architecture
 
-We will try and understand how the components exported from `@gluestack-ui/themed` are created. Initially, we generate styled components using the [gluestack-style](https://style.gluestack.io/) styling engine. This allows us to customize styles, use theme tokens, provide styling for dark and light modes, and respond to different screen sizes using `@gluestack-style/react`. The specifics like themes, tokens, and breakpoints are defined in a configuration file.
+We will try and understand how the components exported from `@gluestack-ui/themed` are created. Initially, we generate unstyled components using the [gluestack-style](https://style.gluestack.io/) styling engine. This allows us to customize styles, use theme tokens, provide styling for dark and light modes, and respond to different screen sizes using `@gluestack-style/react`. The specifics like themes, tokens, breakpoints and component themes are defined in a configuration file.
 
-After that, we enhance the components with accessibility features, interactivity, and more using `@gluestack-ui`. This library provides creator functions that take our styled components and transform them into fully functional components. Once our components are both user-friendly and interactive, we bundle them together into a new package called `@gluestack-ui/themed`, which we can then easily use in our projects.
+After that, we enhance the components with accessibility features, interactivity, and more using `@gluestack-ui`. This library provides creator functions that take our components and transform them into fully functional components. Once our components are both user-friendly and interactive, we bundle them together into a new package called `@gluestack-ui/themed`, which we can then easily use in our project. This package is also themeable, and we can create new themes and use them in our project by passing it to `GluestackUIProvider`. `@gluestack-ui/config` provides a default theme config which can be passed to `GluestackUIProvider`. You can view default theme config [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/config). To see all the components with the default theme, please visit [All Components](https://gluestack.io/ui/docs/overview/all-components)."
 
 <img src="/images/themed.png" />
 
@@ -34,10 +38,37 @@ After that, we enhance the components with accessibility features, interactivity
 - Themes
 - Overwriting components base styles
 
-`@gluestack-ui/themed` exports a config file that allows us to manipulate the theme tokens and add new themes. Theme tokens are standardized values that represent various design attributes, such as colors, typography settings, spacing, and more. These tokens serve as a consistent and centralized way to define and manage the visual properties of UI components across your application. Customizing these tokens can also be done, for more information refer to this [doc](https://ui.gluestack.io/docs/theme/customizing-tokens).
-
-Support for multiple themes is also available. This can be achieved by updating the config file and adjusting the tokens accordingly for different themes.
-
-Component styling is accomplished through [`@gluestack-style/react`](https://style.gluestack.io/). You can customize the styles of each component, and detailed information related to that is available [here](https://ui.gluestack.io/docs/theme/customizing-components).
-
-<img src="/images/architecture.png" />
+`@gluestack-ui/config` exports a config file that allows us to manipulate the theme tokens and add new themes. Theme tokens are standardized values that represent various design attributes, such as colors, typography settings, spacing, and more. These tokens serve as a consistent and centralized way to define and manage the visual properties of UI components across your application. Customizing these tokens can also be done, for more information refer to this [doc](https://gluestack.io/ui/docs/theme-configuration/customize-theme).
+
+Component styling is accomplished through [`@gluestack-style/react`](https://gluestack.io/style). You can customize the styles of each component, and detailed information related to that is available [here](https://gluestack.io/ui/docs/theme-configuration/customize-theme).
+
+## Usage
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+    // import { GluestackUIProvider, Button, ButtonText } from "@gluestack-ui/themed";
+    // import { config } from "@gluestack-ui/config";
+    function App() {
+      return (
+        <GluestackUIProvider config={config}>
+            <Button>
+              <ButtonText>Hello world</ButtonText>
+            </Button>
+        </GluestackUIProvider>
+      );
+    }
+`,
+      scope: {
+        Button,
+        ButtonText,
+        GluestackUIProvider,
+        config,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
diff --git a/example/storybook/src/core-concepts/UnstyledComponents/UnstyledComponents.tsx b/example/storybook/src/core-concepts/UnstyledComponents/UnstyledComponents.tsx
deleted file mode 100644
index e2a5b92148..0000000000
--- a/example/storybook/src/core-concepts/UnstyledComponents/UnstyledComponents.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-import { Center, GluestackUIProvider } from '@gluestack-ui/themed';
-export { Center, GluestackUIProvider };
diff --git a/example/storybook/src/core-concepts/UnstyledComponents/index.stories.mdx b/example/storybook/src/core-concepts/UnstyledComponents/index.stories.mdx
deleted file mode 100644
index d3f14904d1..0000000000
--- a/example/storybook/src/core-concepts/UnstyledComponents/index.stories.mdx
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: Unstyled Components | gluestack-ui
-
-description: In this guide we will learn in depth about the right way to create unstyled components.
-
-pageTitle: Unstyled Components
-
-pageDescription: In this guide we will learn in depth about the right way to create unstyled components.
----
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { AppProvider, CodePreview } from '@gluestack/design-system';
-import { Center, GluestackUIProvider } from './UnstyledComponents';
-import { transformedCode } from '../../utils';
-import Wrapper from '../../components/Wrapper';
-import { styled } from '@gluestack-style/react';
-import {
-  ActivityIndicator,
-  Pressable,
-  Text as RNText,
-  View,
-} from 'react-native';
-// import the createButton function
-import { createButton } from '@gluestack-ui/button';
-// import {
-//   AppProvider,
-//   Box,
-//   HStack,
-//   Text,
-//   Hoverable,
-//   CodePreview,
-// } from '@gluestack/design-system';
-
-<Meta title="Core Concepts/Unstyled Components" />
-
-# Unstyled Components
-
-In this guide we will learn how we can create unstyled components using `@gluestack-ui`.
-
-Note: Using unstyled components is recommended in case you are building your own design system and want to create everything from scratch.
-
-Lets try creating an unstyled Button component
-
-We utilize a function named `createButton` for the creation of a customized button component. This function accepts a configuration object that contains the styled components you wish to apply to the button. For guidance on the usage of styled components, you can refer [style.gluestack.io](https://style.gluestack.io/). The `createButton` function expects an object containing the styled components that can be tailored to meet your specifications. These styled components can be generated using the `styled` function, which is exported by `@gluestack-style/react`. Here is a basic example provided below.
-
-<AppProvider>
-  <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
-    function App() {
-      const Root = styled(Pressable, {});
-      const Text = styled(RNText, {});
-      const Group = styled(View, {});
-      const GroupHSpacer = styled(View, {});
-      const GroupVSpacer = styled(View, {});
-      const Spinner = styled(ActivityIndicator, {});
-      // Understanding the API
-      const Button = createButton({
-        Root,
-        Text,
-        Group,
-        GroupHSpacer,
-        GroupVSpacer,
-        Spinner,
-      });
-      return (
-        <Button.Group>
-          <Button>
-            <Button.Text sx={{_dark:{
-              color:"white"
-            }}}>Hello world</Button.Text>
-          </Button>
-        </Button.Group>
-      );
-    }
-`,
-      transformCode: (code) => {
-        return transformedCode(code, 'function', 'App');
-      },
-      scope: {
-        Wrapper,
-        styled,
-        createButton,
-        Pressable,
-        RNText,
-        View,
-        ActivityIndicator,
-      },
-      argsType: {},
-    }}
-  />
-</AppProvider>
-
-In the above example, we are creating an accessible, universal `Button` component by using `createButton` function exported by `@gluestack-ui/button` package. We create various unstyled components using the API employed by `styled` function. These components are then passed as arguments to `createButton` function. Likewise, for each component, there exists a distinct package and API, specified in the documentation of the respective components.
-
-Styling these components is achieved with the aid of the `@gluestack-style/react` library. We generate styled components and encapsulate them within an object, which is then provided as input to the function.
diff --git a/example/storybook/src/core-concepts/UnstyledLibrary/UnstyledComponents.tsx b/example/storybook/src/core-concepts/UnstyledLibrary/UnstyledComponents.tsx
new file mode 100644
index 0000000000..fd64788288
--- /dev/null
+++ b/example/storybook/src/core-concepts/UnstyledLibrary/UnstyledComponents.tsx
@@ -0,0 +1,8 @@
+import {
+  Center,
+  GluestackUIProvider,
+  Button,
+  ButtonText,
+  ButtonGroup,
+} from '@gluestack-ui/themed';
+export { Center, GluestackUIProvider, Button, ButtonText, ButtonGroup };
diff --git a/example/storybook/src/core-concepts/UnstyledLibrary/index.stories.mdx b/example/storybook/src/core-concepts/UnstyledLibrary/index.stories.mdx
new file mode 100644
index 0000000000..18db2924df
--- /dev/null
+++ b/example/storybook/src/core-concepts/UnstyledLibrary/index.stories.mdx
@@ -0,0 +1,153 @@
+---
+title: Unstyled Library | gluestack-ui
+
+description: In this guide we will learn in depth about the right way to create unstyled library.
+
+pageTitle: Unstyled Library
+
+pageDescription: In this guide we will learn in depth about the right way to create unstyled components.
+
+showHeader: true
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { AppProvider, CodePreview } from '@gluestack/design-system';
+import {
+  Center,
+  GluestackUIProvider,
+  Button,
+  ButtonGroup,
+  ButtonText,
+} from './UnstyledComponents';
+import { transformedCode, transformedThemedCode } from '../../utils';
+import Wrapper from '../../components/Wrapper';
+import { styled } from '@gluestack-style/react';
+import {
+  ActivityIndicator,
+  Pressable,
+  Text as RNText,
+  View,
+} from 'react-native';
+// import the createButton function
+import { createButton } from '@gluestack-ui/button';
+// import {
+//   AppProvider,
+//   Box,
+//   HStack,
+//   Text,
+//   Hoverable,
+//   CodePreview,
+// } from '@gluestack/design-system';
+
+<Meta title="Core Concepts/Unstyled Library" />
+
+## Default Components
+
+By default, when you use `@gluestack-ui/themed`, you get plain, unstyled components.
+
+But, it also comes with a package called `@gluestack-ui/config`, which has ready-made styles for all the components. So, you can choose these styles if you like. Please visit [Themed Library](https://gluestack.io/ui/docs/core-concepts/themed-library) for more information.
+
+And, the cool part is, you can even create your own unique style if you want to give these components a personal touch.
+
+> Note: If you want to create your own design system with these components, it's advisable to refer to the customization guide available [guide](https://gluestack.io/ui/docs/guides/building-design-systems).
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+    // import { GluestackUIProvider, Button, ButtonText  } from '@gluestack-ui/themed';
+    function App() {
+      return (
+        <GluestackUIProvider>
+            <Button backgroundColor='purple' padding={12}>
+              <ButtonText color='white'>Hello world</ButtonText>
+            </Button>
+        </GluestackUIProvider>
+      );
+    }
+`,
+      scope: {
+        Wrapper,
+        styled,
+        createButton,
+        Pressable,
+        RNText,
+        View,
+        ActivityIndicator,
+        Button,
+        ButtonGroup,
+        ButtonText,
+        GluestackUIProvider,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+When we use the `GluestackUIProvider`, it doesn't come with any pre-defined styles. So, by default, all the components you get from `@gluestack-ui/themed` are unstyled.
+
+However, you can make these components look the way you want by adding your own unique styles.
+
+## Custom Components
+
+> Note: Using custom components is recommended in case you are building your own design system and want to create everything from scratch.
+
+Let's try creating an unstyled Button component
+
+We utilize a function named `createButton` for the creation of a customized button component. This function accepts a configuration object that contains the styled components you wish to apply to the button. For guidance on the usage of styled components, you can refer [gluestack.io/style](https://style.gluestack.io/style` function expects an object containing the styled components that can be tailored to meet your specifications. These styled components can be generated using the `styled` function, which is exported by `@gluestack-style/react`. Here is a basic example provided below.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+    function App() {
+      const Root = styled(Pressable, {});
+      const Text = styled(RNText, {});
+      const Group = styled(View, {});
+      const GroupHSpacer = styled(View, {});
+      const GroupVSpacer = styled(View, {});
+      const Spinner = styled(ActivityIndicator, {});
+      // Understanding the API
+      const Button = createButton({
+        Root,
+        Text,
+        Group,
+        GroupHSpacer,
+        GroupVSpacer,
+        Spinner,
+      });
+      return (
+        <Button.Group>
+          <Button>
+            <Button.Text sx={{_dark:{
+              color:"white"
+            }}}>Hello world</Button.Text>
+          </Button>
+        </Button.Group>
+      );
+    }
+`,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        styled,
+        createButton,
+        Pressable,
+        RNText,
+        View,
+        ActivityIndicator,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+In the above example, we are creating an accessible, universal `Button` component by using `createButton` function exported by `@gluestack-ui/button` package. We create various unstyled library using the API employed by `styled` function. These components are then passed as arguments to `createButton` function. Likewise, for each component, there exists a distinct package and API, specified in the documentation of the respective components.
+
+Styling these components is achieved with the aid of the `@gluestack-style/react` library. We generate styled components and encapsulate them within an object, which is then provided as input to the function.
diff --git a/example/storybook/src/customize-and-style/DefaultStyle/index.stories.mdx b/example/storybook/src/customize-and-style/DefaultStyle/index.stories.mdx
index 89156fb15f..3feb8cf256 100644
--- a/example/storybook/src/customize-and-style/DefaultStyle/index.stories.mdx
+++ b/example/storybook/src/customize-and-style/DefaultStyle/index.stories.mdx
@@ -25,15 +25,14 @@ import {
 
 ## Default Styles
 
-All the components of `@gluestack-ui/themed` by default are styled. Default styling is provided by our styling engine [`@gluestack-style/react`](https://style.gluestack.io/docs/overview/introduction) and it is defined in [`gluestack-ui.config.ts`](https://github.com/gluestack/gluestack-ui/blob/main/example/storybook/src/gluestack-ui.config.ts) file. Config file exports an object which is passed inside the `GluestackUIProvider`(a Wrapper component that applies the theme to all the children).
+All the components of `@gluestack-ui/themed` by default are styled. Default styling is provided by our styling engine [`@gluestack-style/react`](https://style.gluestack.io/style/docs/overview/introduction) and it is defined in [`gluestack-ui.config.ts`](https://github.com/gluestack/gluestack-ui/blob/main/example/storybook/src/gluestack-ui.config.ts) file. Config file exports an object which is passed inside the `GluestackUIProvider`(a Wrapper component that applies the theme to all the children).
 
 ```jsx
-import { config, GluestackUIProvider } from '@gluestack-ui/themed';
+import { GluestackUIProvider } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
 
 function App({ children }) {
-  return (
-    <GluestackUIProvider config={config.theme}>{children}</GluestackUIProvider>
-  );
+  return <GluestackUIProvider config={config}>{children}</GluestackUIProvider>;
 }
 ```
 
diff --git a/example/storybook/src/customize-and-style/Overwriting/Overwriting.tsx b/example/storybook/src/customize-and-style/Overwriting/Overwriting.tsx
index eedf3d14ce..159dc03956 100644
--- a/example/storybook/src/customize-and-style/Overwriting/Overwriting.tsx
+++ b/example/storybook/src/customize-and-style/Overwriting/Overwriting.tsx
@@ -1,11 +1,13 @@
+import { config } from '@gluestack-ui/config';
+
 export {
   createConfig,
   Box,
   Button,
   GluestackUIProvider,
-  config,
   VStack,
   ButtonText,
   Text,
   Center,
 } from '@gluestack-ui/themed';
+export { config };
diff --git a/example/storybook/src/customize-and-style/Overwriting/index.stories.mdx b/example/storybook/src/customize-and-style/Overwriting/index.stories.mdx
index 9edd6448b2..f7135ce02c 100644
--- a/example/storybook/src/customize-and-style/Overwriting/index.stories.mdx
+++ b/example/storybook/src/customize-and-style/Overwriting/index.stories.mdx
@@ -45,11 +45,11 @@ createConfig function takes an object as a parameter which takes in aliases, tok
 
 - aliases: This is useful when you want to use a shorter name for a token. For example, you can use bg instead of backgroundColor for the backgroundColor token.
 
-- tokens: This is where you define your design tokens. For more information refer [this](https://style.gluestack.io/docs/configuration/theme-tokens) doc.
+- tokens: This is where you define your design tokens. For more information refer [this](https://style.gluestack.io/style/docs/configuration/theme-tokens) doc.
 
-- globalStyle: The styles written inside globalStyle are applied globally in the application. For more information refer [this](https://style.gluestack.io/docs/configuration/global-style).
+- globalStyle: The styles written inside globalStyle are applied globally in the application. For more information refer [this](https://style.gluestack.io/style/docs/configuration/global-style).
 
-- components: This is where you can define styles for different components based on keys. API will look something like this. For more information refer [this](https://style.gluestack.io/docs/configuration/customizing-components).
+- components: This is where you can define styles for different components based on keys. API will look something like this. For more information refer [this](https://style.gluestack.io/style/docs/configuration/customizing-components).
 
 ```bash
 components: {
@@ -78,15 +78,15 @@ Refer to below code snippet for better understanding
      function App(){
       {/* Creating own theme */}
   const themeConfig = createConfig({
-    ...config.theme,
+    ...config,
     aliases: {
-      ...config.theme.aliases,
+      ...config.aliases,
       newbg: 'backgroundColor',
     },
     tokens: {
-      ...config.theme.tokens,
+      ...config.tokens,
       colors: {
-        ...config.theme.tokens.colors,
+        ...config.tokens.colors,
         secondary: 'green',
       },
     },
diff --git a/example/storybook/src/customize-and-style/Styling/States/index.stories.mdx b/example/storybook/src/customize-and-style/Styling/States/index.stories.mdx
index 67c56b2996..031f464bbc 100644
--- a/example/storybook/src/customize-and-style/Styling/States/index.stories.mdx
+++ b/example/storybook/src/customize-and-style/Styling/States/index.stories.mdx
@@ -34,7 +34,7 @@ import {
 
 ## States
 
-Styling of gluestack-ui components is done with help of [gluestack-style](https://style.gluestack.io/).
+Styling of gluestack-ui components is done with help of [gluestack-style](https://style.gluestack.io/style/).
 gluestack-style provides different features that help us to manage state, color mode, responsiveness and much more. Right now we will discuss how does gluestack style helps us to manage states like hover, active, focused etc.
 
 Easiest way to change styling of states would be using sx prop which enables state management.
diff --git a/example/storybook/src/customize-and-style/Tokens/index.stories.mdx b/example/storybook/src/customize-and-style/Tokens/index.stories.mdx
index a3ee766eaf..1d925f86ff 100644
--- a/example/storybook/src/customize-and-style/Tokens/index.stories.mdx
+++ b/example/storybook/src/customize-and-style/Tokens/index.stories.mdx
@@ -20,12 +20,13 @@ gluestack-ui components internally utilize theme tokens by consuming them within
 Theme and token configurations are exported under the name `config` from the `@gluestack-ui/themed` . This `config` can be passed to the `GluestackUIProvider`, allowing you to provide the necessary theme and styling information for the gluestack-ui components. This approach enables a centralized and consistent theming system across your application's UI components.
 
 ```jsx
-import { config, GluestackUIProvider } from 'gluestack-ui/react';
+import { GluestackUIProvider } from 'gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
 
 function App() {
   return (
-    <GluestackUIProvider config={config.theme}>
-      <App />
+    <GluestackUIProvider config={config}>
+      {/* Your code goes here */}
     </GluestackUIProvider>
   );
 }
@@ -85,4 +86,4 @@ function App() {
 
 - tokens: This is where you define your design tokens.
 
-You can refer to [gluestack-style](https://style.gluestack.io/docs/configuration/theme-tokens) for more information aliases, tokens and globalStyle.
+You can refer to [gluestack-style](https://style.gluestack.io/style/docs/configuration/theme-tokens) for more information aliases, tokens and globalStyle.
diff --git a/example/storybook/src/getting-started/Installation/Card.tsx b/example/storybook/src/getting-started/Installation/Card.tsx
index ceb868d3cd..515d0540b3 100644
--- a/example/storybook/src/getting-started/Installation/Card.tsx
+++ b/example/storybook/src/getting-started/Installation/Card.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import { Box, Text } from '@gluestack/design-system';
+import NextLink from 'next/link';
 
 export const Card = ({
   title,
   child,
+  href,
 }: {
   title: string;
   child: React.ReactNode;
+  href: string;
 }) => {
   return (
     <Box
@@ -44,9 +47,18 @@ export const Card = ({
         {child}
       </Box>
 
-      <Text fontSize="$xl" fontWeight="$medium" my="$3" px="$6">
-        {title}
-      </Text>
+      <NextLink
+        href={href}
+        style={{
+          textDecoration: 'none',
+        }}
+      >
+        <Box>
+          <Text fontSize="$xl" fontWeight="$medium" my="$3" px="$6">
+            {title}
+          </Text>
+        </Box>
+      </NextLink>
     </Box>
   );
 };
diff --git a/example/storybook/src/getting-started/Installation/Card1.tsx b/example/storybook/src/getting-started/Installation/Card1.tsx
index 4ad73d9092..b55e8993be 100644
--- a/example/storybook/src/getting-started/Installation/Card1.tsx
+++ b/example/storybook/src/getting-started/Installation/Card1.tsx
@@ -196,13 +196,31 @@ function Card1() {
                 Manual Installation
               </Text>
               <HStack flexWrap="wrap" gap="$2.5">
-                <NextLink href="/docs/guides/install-nextjs">
+                <NextLink
+                  href="/ui/docs/guides/install-nextjs"
+                  style={{
+                    borderRadius: 8,
+                    height: 72,
+                  }}
+                >
                   <Next />
                 </NextLink>
-                <NextLink href="/docs/guides/install-expo">
+                <NextLink
+                  href="/ui/docs/guides/install-expo"
+                  style={{
+                    borderRadius: 8,
+                    height: 72,
+                  }}
+                >
                   <Expo1 />
                 </NextLink>
-                <NextLink href="/docs/guides/install-rn">
+                <NextLink
+                  href="/ui/docs/guides/install-rn"
+                  style={{
+                    borderRadius: 8,
+                    height: 72,
+                  }}
+                >
                   <ReactN />
                 </NextLink>
               </HStack>
@@ -248,7 +266,13 @@ function Card1() {
                 VS Code Extension
               </Text>
               <HStack>
-                <NextLink href="/docs/getting-started/vscode-extensions">
+                <NextLink
+                  href="/ui/docs/getting-started/vscode-extensions"
+                  style={{
+                    borderRadius: 8,
+                    height: 72,
+                  }}
+                >
                   <VsCode />
                 </NextLink>
               </HStack>
@@ -287,6 +311,7 @@ function Card1() {
                   href="https://www.figma.com/@gluestack"
                   isExternal
                   target="_blank"
+                  borderRadius="$lg"
                 >
                   <Figma />
                 </Link>
@@ -326,6 +351,7 @@ function Card1() {
                   href="https://github.com/gluestack/next-head-starter-kit"
                   isExternal
                   target="_blank"
+                  borderRadius="$lg"
                 >
                   <Next />
                 </Link>
@@ -333,6 +359,7 @@ function Card1() {
                   href="https://github.com/gluestack/expo-head-starter-kit"
                   isExternal
                   target="_blank"
+                  borderRadius="$lg"
                 >
                   <Expo1 />
                 </Link>
diff --git a/example/storybook/src/getting-started/Installation/Card2.tsx b/example/storybook/src/getting-started/Installation/Card2.tsx
index 74c4a0cd94..5556f0c80c 100644
--- a/example/storybook/src/getting-started/Installation/Card2.tsx
+++ b/example/storybook/src/getting-started/Installation/Card2.tsx
@@ -40,34 +40,35 @@ function Card2() {
             href="https://snack.expo.dev/@gluestack/try-now-gluestack-ui"
             isExternal
             target="_blank"
-            sx={{
-              '_text': {
-                color: '$trueGray900',
-                textDecorationLine: 'none',
-              },
-              '_dark': {
-                _text: {
-                  color: '$textDark50',
-                },
-              },
-              ':hover': {
-                _text: {
-                  textDecorationLine: 'underline',
-                },
-              },
-            }}
+            borderRadius="$lg"
+            // sx={{
+            //   '_text': {
+            //     color: '$trueGray900',
+            //     textDecorationLine: 'none',
+            //   },
+            //   '_dark': {
+            //     _text: {
+            //       color: '$textDark50',
+            //     },
+            //   },
+            //   ':hover': {
+            //     _text: {
+            //       textDecorationLine: 'underline',
+            //     },
+            //   },
+            // }}
           >
             <Box p="$6">
               <VStack space="md">
                 <HStack w="$full" alignItems="center" space="md">
                   <Expo />
-                  <Link.Text
+                  <Text
                     fontWeight="$medium"
                     fontSize="$xl"
                     fontFamily="Plus Jakarta Sans"
                   >
                     Try gluestack-ui on Snack
-                  </Link.Text>
+                  </Text>
                 </HStack>
                 <Text fontSize="$md" fontWeight="$normal">
                   Get started without having to set up.
@@ -101,34 +102,35 @@ function Card2() {
           href="https://codesandbox.io/p/sandbox/try-now-next-codesandbox-zl8npm?file=/pages/index.js:1,1"
           target="_blank"
           isExternal
-          sx={{
-            '_text': {
-              color: '$trueGray900',
-              textDecorationLine: 'none',
-            },
-            '_dark': {
-              _text: {
-                color: '$textDark50',
-              },
-            },
-            ':hover': {
-              _text: {
-                textDecorationLine: 'underline',
-              },
-            },
-          }}
+          borderRadius="$lg"
+          // sx={{
+          //   '_text': {
+          //     color: '$trueGray900',
+          //     textDecorationLine: 'none',
+          //   },
+          //   '_dark': {
+          //     _text: {
+          //       color: '$textDark50',
+          //     },
+          //   },
+          //   ':hover': {
+          //     _text: {
+          //       textDecorationLine: 'underline',
+          //     },
+          //   },
+          // }}
         >
           <Box p="$6">
             <VStack space="md">
               <HStack w="$full" alignItems="center" space="md">
                 <Checkbox />
-                <Link.Text
+                <Text
                   fontWeight="$medium"
                   fontSize="$xl"
                   fontFamily="Plus Jakarta Sans"
                 >
                   Try gluestack-ui on CodeSandbox
-                </Link.Text>
+                </Text>
               </HStack>
               <Text fontSize="$md" fontWeight="$normal">
                 See how your app looks as you code.
diff --git a/example/storybook/src/getting-started/Installation/content.tsx b/example/storybook/src/getting-started/Installation/content.tsx
index 8a0410d495..178644a2ff 100644
--- a/example/storybook/src/getting-started/Installation/content.tsx
+++ b/example/storybook/src/getting-started/Installation/content.tsx
@@ -11,30 +11,37 @@ export const content = [
   {
     title: 'Select',
     child: <SelectDemo />,
+    href: '/ui/docs/components/forms/select',
   },
   {
     title: 'Checkbox',
     child: <CheckboxDemo />,
+    href: '/ui/docs/components/forms/checkbox',
   },
   {
     title: 'Toast',
     child: <ToastDemo />,
+    href: '/ui/docs/components/feedback/toast',
   },
   {
     title: 'FormControl',
     child: <FormControlDemo />,
+    href: '/ui/docs/components/forms/form-control',
   },
   {
     title: 'Badge',
     child: <BadgeDemo />,
+    href: '/ui/docs/components/data-display/badge',
   },
   {
     title: 'Avatar',
     child: <AvatarDemo />,
+    href: '/ui/docs/components/media-and-icons/avatar',
   },
 
   {
     title: 'Slider',
     child: <SliderDemo />,
+    href: '/ui/docs/components/forms/slider',
   },
 ];
diff --git a/example/storybook/src/getting-started/Installation/index1.tsx b/example/storybook/src/getting-started/Installation/index1.tsx
index db569d757e..7703a929c1 100644
--- a/example/storybook/src/getting-started/Installation/index1.tsx
+++ b/example/storybook/src/getting-started/Installation/index1.tsx
@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { Box, HStack, Text, VStack } from '@gluestack/design-system';
+import { Box, Text, VStack } from '@gluestack/design-system';
 import { Card } from './Card';
 import { content } from './content';
 import NextLink from 'next/link';
@@ -7,68 +7,93 @@ import { ArrowRightIcon } from '@gluestack-ui/themed';
 
 const Fold2 = memo(() => {
   return (
-    <HStack
+    <Box
       my="$6"
       flexDirection="column"
       flexWrap="wrap"
       gap="$5"
       sx={{
-        '@lg': { flexDirection: 'row' },
+        '@md': {
+          flexWrap: 'wrap',
+          flexDirection: 'row',
+          _web: {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, 1fr)',
+          },
+        },
+        '@lg': {
+          _web: {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, 1fr)',
+          },
+        },
+        '@xxl': {
+          _web: {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(4, 1fr)',
+          },
+        },
       }}
     >
       {content.map((item, index) => {
-        return <Card key={index} title={item.title} child={item.child} />;
+        return (
+          <Card
+            key={index}
+            title={item.title}
+            child={item.child}
+            href={item.href}
+          />
+        );
       })}
-      <Box
-        alignItems="center"
-        justifyContent="center"
-        flex={1}
-        minWidth={240}
-        minHeight={240}
-        borderRadius="$xl"
-        borderWidth={1}
-        sx={{
-          borderColor: '$trueGray300',
-          bg: '$trueGray100',
-          _dark: {
-            bg: '#071117',
-            borderColor: '$borderDark800',
-          },
+      <NextLink
+        href="/ui/docs/overview/all-components"
+        style={{
+          textDecoration: 'none',
         }}
       >
-        <VStack px="$6" justifyContent="center" alignItems="center">
-          <Text my={0} textAlign="center">
-            30+ components
-          </Text>
-          <Text mb="$6" my={0} textAlign="center">
-            for React, Next.js & React Native
-          </Text>
-          <NextLink
-            href="/docs/components/layout/box"
-            style={{
-              textDecoration: 'none',
-              display: 'flex',
-              alignItems: 'center',
-            }}
-          >
-            <Text
-              color="$primary400"
-              fontSize="$lg"
-              lineHeight="$md"
-              fontWeight="$bold"
-              sx={{
-                _dark: {
-                  color: '$darkBlue500',
-                },
-              }}
-            >
-              See All
+        <Box
+          alignItems="center"
+          justifyContent="center"
+          flex={1}
+          minWidth={240}
+          minHeight={240}
+          borderRadius="$xl"
+          borderWidth={1}
+          sx={{
+            borderColor: '$trueGray300',
+            bg: '$trueGray100',
+            _dark: {
+              bg: '#071117',
+              borderColor: '$borderDark800',
+            },
+          }}
+        >
+          <VStack px="$6" justifyContent="center" alignItems="center">
+            <Text my={0} textAlign="center">
+              30+ components
+            </Text>
+            <Text mb="$6" my={0} textAlign="center">
+              for React, Next.js & React Native
             </Text>
-            <ArrowRightIcon color="$darkBlue500" w="$5" h="$5" ml="$1" />
-          </NextLink>
-        </VStack>
-      </Box>
-    </HStack>
+            <Box flexDirection="row" alignItems="center">
+              <Text
+                color="$primary400"
+                fontSize="$lg"
+                lineHeight="$md"
+                sx={{
+                  _dark: {
+                    color: '$darkBlue500',
+                  },
+                }}
+              >
+                See All
+              </Text>
+              <ArrowRightIcon color="$darkBlue500" w="$5" h="$5" ml="$1" />
+            </Box>
+          </VStack>
+        </Box>
+      </NextLink>
+    </Box>
   );
 });
 
diff --git a/example/storybook/src/guides/building-design-systems/index.stories.mdx b/example/storybook/src/guides/building-design-systems/index.stories.mdx
index d6d8244b61..8e79577b8b 100644
--- a/example/storybook/src/guides/building-design-systems/index.stories.mdx
+++ b/example/storybook/src/guides/building-design-systems/index.stories.mdx
@@ -81,7 +81,7 @@ Navigate to the `example/storybook` and make updates to the specified files belo
 
 Theme tokens and other configuration is present in `packages/themed/src/components/gluestack-ui.config.ts`. You have the flexibility to modify these tokens as per your requirements.
 
-Check [this](/docs/theme/customizing-theme) for more details.
+Check [this](/ui/docs/theme/customizing-tokens) for more details.
 
 ### Components
 
diff --git a/example/storybook/src/guides/install-expo/index.stories.mdx b/example/storybook/src/guides/install-expo/index.stories.mdx
index e244e723e4..7a0a195805 100644
--- a/example/storybook/src/guides/install-expo/index.stories.mdx
+++ b/example/storybook/src/guides/install-expo/index.stories.mdx
@@ -10,9 +10,9 @@ pageDescription: In this guide, we will walk you through the steps required to a
 showHeader: true
 ---
 
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
 
-import { AppProvider, Link, Box, HStack, Text } from '@gluestack/design-system';
+import { AppProvider, Link, Box, HStack, Text } from "@gluestack/design-system";
 
 <Meta title="Guides/Install in Expo" />
 
@@ -65,11 +65,12 @@ The `GluestackUIProvider` is a component that provides aliases and tokens throug
 You can update your `App.tsx` file as follows:
 
 ```jsx
-import { GluestackUIProvider, Text, Box, config } from '@gluestack-ui/themed';
+import { GluestackUIProvider, Text, Box } from "@gluestack-ui/themed";
+import { config } from "@gluestack-ui/config";
 
 export default function App() {
   return (
-    <GluestackUIProvider config={config.theme}>
+    <GluestackUIProvider config={config}>
       <Box width="100%" justifyContent="center" alignItems="center">
         <Text>Open up App.js to start working on your app!</Text>
       </Box>
@@ -78,6 +79,6 @@ export default function App() {
 }
 ```
 
-This ensures that all components are wrapped with `<GluestackUIProvider />`, and the theme from `gluestack-ui.config.ts` is applied.
+This ensures that all components are wrapped with `<GluestackUIProvider />`, and the theme from `@gluestack-ui/config` is applied.
 
 This guide should help you get started with gluestack-ui in your expo project. If you run into any issues or have further questions, please refer to the official documentation or community forums.
diff --git a/example/storybook/src/guides/install-nextjs/index.stories.mdx b/example/storybook/src/guides/install-nextjs/index.stories.mdx
index e28305c8e5..c6a63112c5 100644
--- a/example/storybook/src/guides/install-nextjs/index.stories.mdx
+++ b/example/storybook/src/guides/install-nextjs/index.stories.mdx
@@ -53,11 +53,11 @@ npm i @gluestack-ui/themed @gluestack-style/react @gluestack/ui-next-adapter rea
 
 ### Step 2: Server-side rendering (SSR)
 
-It's also recommended to set up your server-side rendering (SSR) correctly. To do this, you will need to use the `flush()` function exported by the [@gluestack-style/react](https://style.gluestack.io/docs/configuration/ssr).
+It's also recommended to set up your server-side rendering (SSR) correctly. To do this, you will need to use the `flush()` function exported by the [@gluestack-ui/themed](/ui/docs/configuration/ssr).
 
 #### Next.js App Routers (which supports React Server Components)
 
-- For Next.js App Routers we will create a new `registry.tsx` file in the root of your project and use the flush function from `@gluestack-style/react`:
+- For Next.js App Routers we will create a new `registry.tsx` file in the root of your project and use the flush function from `@gluestack-ui/themed`:
 
 ```jsx
 'use client';
@@ -68,7 +68,7 @@ import { StyleRegistry, createStyleRegistry } from 'styled-jsx';
 import { Html, Head, Main, NextScript } from 'next/document';
 // @ts-ignore
 import { AppRegistry } from 'react-native-web';
-import { flush } from '@gluestack-style/react';
+import { flush } from '@gluestack-ui/themed';
 
 export default function StyledJsxRegistry({
   children,
@@ -190,17 +190,15 @@ module.exports = withGluestackUI(nextConfig);
 // app/providers.tsx
 'use client';
 
-import { GluestackUIProvider } from '../components';
-import { config } from '../gluestack-ui.config';
+import { GluestackUIProvider } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
 
 export function Providers({ children }: { children: React.ReactNode }) {
-  return (
-    <GluestackUIProvider config={config.theme}>{children}</GluestackUIProvider>
-  );
+  return <GluestackUIProvider config={config}>{children}</GluestackUIProvider>;
 }
 ```
 
-This component returns a `GluestackUIProvider` component which wraps the `children` with the theme from `gluestack-ui.config.ts` file.
+This component returns a `GluestackUIProvider` component which wraps the `children` with the theme from `@gluestack-ui/config` file.
 
 - After creating `providers.tsx` file, we need to wrap the exported `GluestackUIProvider` component around the `children` in `layout.tsx` file. The code in `layout.tsx` file at this point of time will look like this:
 
@@ -241,17 +239,18 @@ For Next.js Page Router just add `GluestackUIProvider` to the root of your app a
 ```jsx
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
-import { config, GluestackUIProvider } from '@gluestack-ui/themed';
+import { GluestackUIProvider } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <GluestackUIProvider config={config.theme}>
+    <GluestackUIProvider config={config}>
       <Component {...pageProps} />
     </GluestackUIProvider>
   );
 }
 ```
 
-This ensures that all components are wrapped with `<GluestackUIProvider />`, and the theme from `gluestack-ui.config.ts` is applied.
+This ensures that all components are wrapped with `<GluestackUIProvider />`, and the theme from `@gluestack-ui/config` is applied.
 
 This guide should help you get started with gluestack-ui in your expo project. If you run into any issues or have further questions, please refer to the official documentation or community forums.
diff --git a/example/storybook/src/guides/install-rn/index.stories.mdx b/example/storybook/src/guides/install-rn/index.stories.mdx
index 82797e282c..fa0c2cd4c4 100644
--- a/example/storybook/src/guides/install-rn/index.stories.mdx
+++ b/example/storybook/src/guides/install-rn/index.stories.mdx
@@ -10,9 +10,9 @@ pageDescription: In this guide, we will walk you through the steps required to a
 showHeader: true
 ---
 
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
 
-import { AppProvider, Link, Box, HStack, Text } from '@gluestack/design-system';
+import { AppProvider, Link, Box, HStack, Text } from "@gluestack/design-system";
 
 <Meta title="Guides/Install in React Native" />
 
@@ -49,17 +49,18 @@ The `GluestackUIProvider` is a component that provides aliases and tokens throug
 You can update your `App.tsx` file as follows:
 
 ```jsx
-import { config, GluestackUIProvider, Text } from '@gluestack-ui/themed';
+import { GluestackUIProvider, Text } from "@gluestack-ui/themed";
+import { config } from "@gluestack-ui/config";
 
 export default function App() {
   return (
-    <GluestackUIProvider config={config.theme}>
+    <GluestackUIProvider config={config}>
       <Text>Hello World!</Text>
     </GluestackUIProvider>
   );
 }
 ```
 
-This ensures that all components are wrapped with `<GluestackUIProvider />`, and the theme from `gluestack-ui.config.ts` is applied.
+This ensures that all components are wrapped with `<GluestackUIProvider />`, and the theme from `@gluestack-ui/config` is applied.
 
 This guide should help you get started with gluestack-ui in your expo project. If you run into any issues or have further questions, please refer to the official documentation or community forums.
diff --git a/example/storybook/src/hooks/use-token/use-token.stories.tsx b/example/storybook/src/hooks/use-token/use-token.stories.tsx
index 4b6f4b8c4b..09990bf080 100644
--- a/example/storybook/src/hooks/use-token/use-token.stories.tsx
+++ b/example/storybook/src/hooks/use-token/use-token.stories.tsx
@@ -1,5 +1,5 @@
 import type { ComponentMeta } from '@storybook/react-native';
-import { config } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
 import useToken from './useToken';
 const UseTokenMeta: ComponentMeta<typeof useToken> = {
   title: 'stories/hooks/useToken',
@@ -15,7 +15,7 @@ const UseTokenMeta: ComponentMeta<typeof useToken> = {
     },
     token: {
       control: 'select',
-      options: [...Object.keys(config.theme.tokens.colors)],
+      options: [...Object.keys(config.tokens.colors)],
     },
   },
 };
diff --git a/example/storybook/src/more/contribution-guidelines/index.stories.mdx b/example/storybook/src/more/contribution-guidelines/index.stories.mdx
index 7bcb38303a..e1d78e6f4f 100644
--- a/example/storybook/src/more/contribution-guidelines/index.stories.mdx
+++ b/example/storybook/src/more/contribution-guidelines/index.stories.mdx
@@ -59,8 +59,7 @@ You can request a new feature by submitting an issue to our [GitHub Repository](
 
 ### Issue submission guidelines
 
-Before you submit your issue search the archive, maybe your question was already answered. If your issue appears to be a bug, and hasn't been reported, open a new issue. Help us to maximize
-the effort we can spend fixing issues and adding new features, by not reporting duplicate issues.
+Before you submit your issue, search the archive, maybe your question was already answered. If your issue appears to be a bug, and hasn't been reported, open a new issue. Help us to maximize the effort we can spend fixing issues and adding new features, by not reporting duplicate issues.
 
 The "[new issue](https://github.com/gluestack/gluestack-ui/issues/new)" form contains a number of prompts that you should fill out to
 make it easier to understand and categorize the issue.
@@ -78,6 +77,8 @@ with quickly:
 
 ### Setting up your development environment:
 
+#### To make changes in the styles of the components:
+
 1. Fork this repository.
 
 2. Clone your fork of `gluestack/gluestack-ui`:
@@ -123,10 +124,62 @@ with quickly:
    ```
 
 9. To start app directly on Android
-   `bash
-yarn android
-`
-   and start making the changes in packages that gluestack-ui provides and check the changes in storybook.
+   ```bash
+   yarn android
+   ```
+
+Changes made to the component styles will be reflected in the storybook.
+
+#### To make changes in the component packages (API, accessibility, etc.):
+
+1. Fork [this](https://github.com/gluestack/gluestack-ui-unstyled) repository.
+
+2. Clone your fork of `gluestack/gluestack-ui-unstyled`:
+
+   ```git
+   git clone git@github.com:${YOUR_USERNAME}/gluestack/gluestack-ui-unstyled.git
+   ```
+
+3. Navigate to ui-unstyled
+
+   ```
+   cd gluestack-ui-unstyled
+   ```
+
+4. Add main repo remote:
+
+   ```git
+   git remote add origin git@github.com:gluestack/gluestack-ui-unstyled.git
+   ```
+
+5. Install dependencies:
+
+   ```bash
+   yarn
+   ```
+
+6. Move over to the storybook :
+
+   ```bash
+   cd example/storybook
+   ```
+
+7. Start the storybook, local aliasing of packages has been created.
+
+   ```bash
+   yarn storybook
+   ```
+
+8. To start app directly on IOS
+
+   ```bash
+   yarn ios
+   ```
+
+9. To start app directly on Android
+   ```bash
+   yarn android
+   ```
 
 ## Contributing Code
 
@@ -145,3 +198,11 @@ The process of proposing a change to `gluestack-ui` can be summarized as follows
 9. Review and address comments on your pull request.
 
 If all goes well, your pull request will be merged. If it is not merged, maintainers will do their best to explain the reason why.
+
+```
+
+```
+
+```
+
+```
diff --git a/example/storybook/src/components/Component-Catalog/ComponentCard.tsx b/example/storybook/src/overview/AllComponents/ComponentCard.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/ComponentCard.tsx
rename to example/storybook/src/overview/AllComponents/ComponentCard.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/ActionsheetDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/ActionsheetDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/ActionsheetDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/ActionsheetDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/AlertDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/AlertDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/AlertDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/AlertDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/AlertDialogDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/AlertDialogDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/AlertDialogDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/AlertDialogDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/AvatarDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/AvatarDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/AvatarDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/AvatarDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/BadgeDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/BadgeDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/BadgeDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/BadgeDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/BoxDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/BoxDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/BoxDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/BoxDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/ButtonDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/ButtonDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/ButtonDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/ButtonDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/CenterDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/CenterDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/CenterDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/CenterDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/CheckboxDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/CheckboxDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/CheckboxDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/CheckboxDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/DividerDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/DividerDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/DividerDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/DividerDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/FabDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/FabDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/FabDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/FabDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/FormControlDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/FormControlDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/FormControlDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/FormControlDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/HStackDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/HStackDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/HStackDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/HStackDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/HeadingDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/HeadingDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/HeadingDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/HeadingDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/IconDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/IconDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/IconDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/IconDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/ImageDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/ImageDemo.tsx
similarity index 52%
rename from example/storybook/src/components/Component-Catalog/Demos/ImageDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/ImageDemo.tsx
index 498283ff9f..6a9615d313 100644
--- a/example/storybook/src/components/Component-Catalog/Demos/ImageDemo.tsx
+++ b/example/storybook/src/overview/AllComponents/Demos/ImageDemo.tsx
@@ -6,7 +6,7 @@ const ImageDemo = () => {
     <Image
       size="xl"
       source={{
-        uri: 'https://plus.unsplash.com/premium_photo-1663853293870-7f3315a1f06e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2787&q=80',
+        uri: 'https://images.unsplash.com/photo-1507208773393-40d9fc670acf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2787&q=80',
       }}
     />
   );
diff --git a/example/storybook/src/components/Component-Catalog/Demos/InputDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/InputDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/InputDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/InputDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/LinkDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/LinkDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/LinkDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/LinkDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/MenuDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/MenuDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/MenuDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/MenuDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/ModalDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/ModalDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/ModalDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/ModalDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/PopoverDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/PopoverDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/PopoverDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/PopoverDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/PressableDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/PressableDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/PressableDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/PressableDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/ProgressDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/ProgressDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/ProgressDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/ProgressDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/RadioDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/RadioDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/RadioDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/RadioDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/SelectDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/SelectDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/SelectDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/SelectDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/SliderDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/SliderDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/SliderDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/SliderDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/SpinnerDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/SpinnerDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/SpinnerDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/SpinnerDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/SwitchDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/SwitchDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/SwitchDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/SwitchDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/TeaxtAreaDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/TeaxtAreaDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/TeaxtAreaDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/TeaxtAreaDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/TextDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/TextDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/TextDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/TextDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/ToastDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/ToastDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/ToastDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/ToastDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/TooltipDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/TooltipDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/TooltipDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/TooltipDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Demos/VStackDemo.tsx b/example/storybook/src/overview/AllComponents/Demos/VStackDemo.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Demos/VStackDemo.tsx
rename to example/storybook/src/overview/AllComponents/Demos/VStackDemo.tsx
diff --git a/example/storybook/src/components/Component-Catalog/Grid.tsx b/example/storybook/src/overview/AllComponents/Grid.tsx
similarity index 100%
rename from example/storybook/src/components/Component-Catalog/Grid.tsx
rename to example/storybook/src/overview/AllComponents/Grid.tsx
diff --git a/example/storybook/src/components/Component-Catalog/content.tsx b/example/storybook/src/overview/AllComponents/content.tsx
similarity index 69%
rename from example/storybook/src/components/Component-Catalog/content.tsx
rename to example/storybook/src/overview/AllComponents/content.tsx
index 7c4a73d44a..2aee386791 100644
--- a/example/storybook/src/components/Component-Catalog/content.tsx
+++ b/example/storybook/src/overview/AllComponents/content.tsx
@@ -38,186 +38,186 @@ export const content = [
     title: 'Actionsheet',
     child: <ActionsheetDemo />,
     padding: '$0',
-    href: '/docs/components/disclosure/actionsheet',
+    href: '/ui/docs/components/disclosure/actionsheet',
   },
   {
     title: 'AlertDialog',
     child: <AlertDialogDemo />,
     padding: '$0',
-    href: '/docs/components/overlay/alertdialog',
+    href: '/ui/docs/components/overlay/alert-dialog',
   },
   {
     title: 'Alert',
     child: <AlertDemo />,
-    href: '/docs/components/feedback/alert',
+    href: '/ui/docs/components/feedback/alert',
   },
   {
     title: 'Avatar',
     child: <AvatarDemo />,
-    href: '/docs/components/media-and-icons/avatar',
+    href: '/ui/docs/components/media-and-icons/avatar',
   },
 
   {
     title: 'Badge',
     child: <BadgeDemo />,
-    href: '/docs/components/data-display/badge',
+    href: '/ui/docs/components/data-display/badge',
   },
   {
     title: 'Box',
     child: <BoxDemo />,
-    href: '/docs/components/layout/box',
+    href: '/ui/docs/components/layout/box',
   },
   {
     title: 'Button',
     child: <ButtonDemo />,
-    href: '/docs/components/forms/button',
+    href: '/ui/docs/components/forms/button',
   },
 
   {
     title: 'Center',
     child: <CenterDemo />,
-    href: '/docs/components/layout/center',
+    href: '/ui/docs/components/layout/center',
   },
   {
     title: 'Checkbox',
     child: <CheckboxDemo />,
-    href: '/docs/components/forms/checkbox',
+    href: '/ui/docs/components/forms/checkbox',
   },
 
   {
     title: 'Divider',
     child: <DividerDemo />,
-    href: '/docs/components/data-display/divider',
+    href: '/ui/docs/components/data-display/divider',
   },
 
   {
     title: 'Fab',
     child: <FabDemo />,
-    href: '/docs/components/others/fab',
+    href: '/ui/docs/components/others/fab',
   },
   {
     title: 'FormControl',
     child: <FormControlDemo />,
-    href: '/docs/components/forms/form-control',
+    href: '/ui/docs/components/forms/form-control',
   },
   {
     title: 'Heading',
     child: <HeadingDemo />,
-    href: '/docs/components/typography/heading',
+    href: '/ui/docs/components/typography/heading',
   },
   {
     title: 'HStack',
     child: <HStackDemo />,
-    href: '/docs/components/layout/hstack',
+    href: '/ui/docs/components/layout/hstack',
   },
 
   {
     title: 'Icon',
     child: <IconDemo />,
-    href: '/docs/components/media-and-icons/icon',
+    href: '/ui/docs/components/media-and-icons/icon',
   },
   {
     title: 'Image',
     child: <ImageDemo />,
-    href: '/docs/components/media-and-icons/image',
+    href: '/ui/docs/components/media-and-icons/image',
   },
   {
     title: 'Input',
     child: <InputDemo />,
-    href: '/docs/components/forms/input',
+    href: '/ui/docs/components/forms/input',
   },
 
   {
     title: 'Link',
     child: <LinkDemo />,
-    href: '/docs/components/forms/link',
+    href: '/ui/docs/components/forms/link',
   },
 
   // {
   //   title: 'Menu',
   //   child: <MenuDemo />,
   //   padding: '$0',
-  //   href: '/docs/components/overlay/menu',
+  //   href: '/ui/docs/components/overlay/menu',
   // },
 
   {
     title: 'Modal',
     child: <ModalDemo />,
     padding: '$0',
-    href: '/docs/components/overlay/modal',
+    href: '/ui/docs/components/overlay/modal',
   },
 
   // {
   //   title: 'Popover',
   //   child: <PopoverDemo />,
   //   padding: '$0',
-  //   href: '/docs/components/overlay/popover',
+  //   href: '/ui/docs/components/overlay/popover',
   // },
 
   {
     title: 'Pressable',
     child: <PressableDemo />,
-    href: '/docs/components/forms/pressable',
+    href: '/ui/docs/components/forms/pressable',
   },
   {
     title: 'Progress',
     child: <ProgressDemo />,
-    href: '/docs/components/feedback/progress',
+    href: '/ui/docs/components/feedback/progress',
   },
 
   {
     title: 'Radio',
     child: <RadioDemo />,
-    href: '/docs/components/forms/radio',
+    href: '/ui/docs/components/forms/radio',
   },
 
   {
     title: 'Select',
     child: <SelectDemo />,
-    href: '/docs/components/forms/select',
+    href: '/ui/docs/components/forms/select',
   },
 
   {
     title: 'Slider',
     child: <SliderDemo />,
-    href: '/docs/components/forms/slider',
+    href: '/ui/docs/components/forms/slider',
   },
   {
     title: 'Spinner',
     child: <SpinnerDemo />,
-    href: '/docs/components/feedback/spinner',
+    href: '/ui/docs/components/feedback/spinner',
   },
   {
     title: 'Switch',
     child: <SwitchDemo />,
-    href: '/docs/components/forms/switch',
+    href: '/ui/docs/components/forms/switch',
   },
 
   {
     title: 'Text',
     child: <TextDemo />,
-    href: '/docs/components/typography/text',
+    href: '/ui/docs/components/typography/text',
   },
   {
     title: 'TextArea',
     child: <TextAreaDemo />,
-    href: '/docs/components/forms/textarea',
+    href: '/ui/docs/components/forms/textarea',
   },
   {
     title: 'Toast',
     child: <ToastDemo />,
-    href: '/docs/components/feedback/toast',
+    href: '/ui/docs/components/feedback/toast',
   },
 
   {
     title: 'Tooltip',
     child: <TooltipDemo />,
-    href: '/docs/components/overlay/tooltip',
+    href: '/ui/docs/components/overlay/tooltip',
   },
 
   {
     title: 'VStack',
     child: <VStackDemo />,
-    href: '/docs/components/layout/vstack',
+    href: '/ui/docs/components/layout/vstack',
   },
 ];
diff --git a/example/storybook/src/overview/AllComponents/index.stories.mdx b/example/storybook/src/overview/AllComponents/index.stories.mdx
new file mode 100644
index 0000000000..01e2ab4bac
--- /dev/null
+++ b/example/storybook/src/overview/AllComponents/index.stories.mdx
@@ -0,0 +1,27 @@
+---
+title: All Components | gluestack-ui
+
+description: gluestack-ui provides 30+ responsive components for every screen and style
+
+pageTitle: All Components
+
+pageDescription: gluestack-ui provides 30+ responsive components for every screen and style
+
+toc: false
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta title="Overview/All Components" />
+
+import { AppProvider } from '@gluestack/design-system';
+import { config } from '@gluestack-ui/config';
+import { Grid } from './Grid';
+
+# All Components
+
+30+ responsive components for every screen and style
+
+<AppProvider config={config}>
+  <Grid />
+</AppProvider>
diff --git a/example/storybook/src/overview/Component-Catalog/ComponentCard.tsx b/example/storybook/src/overview/Component-Catalog/ComponentCard.tsx
new file mode 100644
index 0000000000..720d26ea3a
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/ComponentCard.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Box, Text, VStack } from '@gluestack/design-system';
+import NextLink from 'next/link';
+
+export const ComponentCard = ({
+  title,
+  child,
+  padding,
+  href,
+}: {
+  title: string;
+  child: React.ReactNode;
+  padding?: string;
+  props?: any;
+  href: string;
+}) => {
+  return (
+    <VStack
+      borderRadius="$xl"
+      borderWidth={1}
+      borderColor="$trueGray300"
+      minWidth="100%"
+      sx={{
+        '@md': {
+          flex: 1,
+        },
+        '_dark': {
+          borderColor: '$borderDark800',
+        },
+      }}
+    >
+      <Box
+        minHeight={236}
+        padding={padding ? padding : '$6'}
+        borderTopLeftRadius="$xl"
+        borderTopRightRadius="$xl"
+        borderBottomWidth={1}
+        borderBottomColor="$trueGray300"
+        bg="$trueGray50"
+        justifyContent="center"
+        alignItems="center"
+        sx={{
+          _dark: {
+            borderBottomColor: '$borderDark800',
+            bg: '#0C0E12',
+          },
+        }}
+      >
+        {child}
+      </Box>
+      <NextLink
+        href={href}
+        style={{
+          textDecoration: 'none',
+        }}
+      >
+        <Box>
+          <Text
+            fontSize="$xl"
+            fontWeight="$medium"
+            lineHeight="$xl"
+            px="$6"
+            py="$4"
+          >
+            {title}
+          </Text>
+        </Box>
+      </NextLink>
+    </VStack>
+  );
+};
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/ActionsheetDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/ActionsheetDemo.tsx
new file mode 100644
index 0000000000..4c9c2e6bc2
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/ActionsheetDemo.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import {
+  Actionsheet,
+  ActionsheetBackdrop,
+  ActionsheetContent,
+  ActionsheetDragIndicatorWrapper,
+  ActionsheetItem,
+  ActionsheetItemText,
+  ActionsheetDragIndicator,
+  Box,
+  Button,
+  ButtonText,
+} from '@gluestack-ui/themed';
+const ActionsheetDemo = () => {
+  const [showActionsheet, setShowActionsheet] = React.useState(false);
+  const handleClose = () => setShowActionsheet(!showActionsheet);
+  return (
+    <Box>
+      <Button onPress={handleClose}>
+        <ButtonText>Open</ButtonText>
+      </Button>
+      <Actionsheet
+        isOpen={showActionsheet}
+        onClose={handleClose}
+        zIndex={999}
+        _experimentalOverlay={showActionsheet}
+      >
+        <ActionsheetBackdrop />
+        <ActionsheetContent zIndex={999}>
+          <ActionsheetDragIndicatorWrapper>
+            <ActionsheetDragIndicator />
+          </ActionsheetDragIndicatorWrapper>
+          <ActionsheetItem onPress={handleClose}>
+            <ActionsheetItemText>Delete</ActionsheetItemText>
+          </ActionsheetItem>
+          <ActionsheetItem onPress={handleClose}>
+            <ActionsheetItemText>Share</ActionsheetItemText>
+          </ActionsheetItem>
+          <ActionsheetItem onPress={handleClose}>
+            <ActionsheetItemText>Play</ActionsheetItemText>
+          </ActionsheetItem>
+          <ActionsheetItem onPress={handleClose}>
+            <ActionsheetItemText>Favourite</ActionsheetItemText>
+          </ActionsheetItem>
+          <ActionsheetItem onPress={handleClose}>
+            <ActionsheetItemText>Cancel</ActionsheetItemText>
+          </ActionsheetItem>
+        </ActionsheetContent>
+      </Actionsheet>
+    </Box>
+  );
+};
+
+export default ActionsheetDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/AlertDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/AlertDemo.tsx
new file mode 100644
index 0000000000..38660a8aa5
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/AlertDemo.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Alert, AlertIcon, AlertText, InfoIcon } from '@gluestack-ui/themed';
+
+const AlertDemo = () => {
+  return (
+    <Alert mx="$2.5" action="info" variant="solid">
+      <AlertIcon as={InfoIcon} mr="$3" w={18} h={18} />
+      <AlertText>We have updated our terms of service.</AlertText>
+    </Alert>
+  );
+};
+
+export default AlertDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/AlertDialogDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/AlertDialogDemo.tsx
new file mode 100644
index 0000000000..3d58c0c54f
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/AlertDialogDemo.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import {
+  Button,
+  ButtonText,
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogContent,
+  AlertDialogHeader,
+  Heading,
+  Icon,
+  HStack,
+  AlertDialogBody,
+  Text,
+  AlertDialogFooter,
+  CheckCircleIcon,
+} from '@gluestack-ui/themed';
+
+const AlertDialogDemo = () => {
+  const [showAlertDialog, setShowAlertDialog] = React.useState(true);
+  const [showButton, setShowButton] = React.useState(false);
+  return (
+    <>
+      <Button
+        display={showButton ? 'flex' : 'none'}
+        onPress={() => {
+          setShowAlertDialog(true);
+          setShowButton(false);
+        }}
+      >
+        <ButtonText>Click me</ButtonText>
+      </Button>
+      <AlertDialog
+        initialFocusRef={React.useRef(null)}
+        isOpen={showAlertDialog}
+        onClose={() => {
+          setShowAlertDialog(false);
+        }}
+        // @ts-ignore
+        _experimentalOverlay={showAlertDialog}
+      >
+        <AlertDialogBackdrop />
+        <AlertDialogContent>
+          <AlertDialogHeader borderBottomWidth="$0">
+            <HStack space="sm" alignItems="center">
+              <Icon
+                as={CheckCircleIcon}
+                w={18}
+                h={18}
+                color="$success700"
+                sx={{
+                  _dark: {
+                    color: '$success300',
+                  },
+                }}
+              />
+              <Heading size="lg">Order placed</Heading>
+            </HStack>
+          </AlertDialogHeader>
+          <AlertDialogBody>
+            <Text size="sm">Congratulations, your order has been placed!</Text>
+          </AlertDialogBody>
+          <AlertDialogFooter borderTopWidth="$0">
+            <Button
+              variant="outline"
+              size="sm"
+              action="secondary"
+              onPress={() => {
+                setShowAlertDialog(false);
+                setShowButton(true);
+              }}
+            >
+              <ButtonText>Okay</ButtonText>
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+};
+
+export default AlertDialogDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/AvatarDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/AvatarDemo.tsx
new file mode 100644
index 0000000000..0bf0a1b04a
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/AvatarDemo.tsx
@@ -0,0 +1,11 @@
+import { Avatar, AvatarFallbackText } from '@gluestack-ui/themed';
+import React from 'react';
+const Avatardemo = () => {
+  return (
+    <Avatar bgColor="$indigo600" size="md" borderRadius="$full">
+      <AvatarFallbackText>Richard Bay</AvatarFallbackText>
+    </Avatar>
+  );
+};
+
+export default Avatardemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/BadgeDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/BadgeDemo.tsx
new file mode 100644
index 0000000000..dee34ebd81
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/BadgeDemo.tsx
@@ -0,0 +1,11 @@
+import { Badge, BadgeText } from '@gluestack-ui/themed';
+import React from 'react';
+const BadgeDemo = () => {
+  return (
+    <Badge size="lg" variant="solid" borderRadius="$none" action="info">
+      <BadgeText>Verified</BadgeText>
+    </Badge>
+  );
+};
+
+export default BadgeDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/BoxDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/BoxDemo.tsx
new file mode 100644
index 0000000000..5dcb35abdf
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/BoxDemo.tsx
@@ -0,0 +1,12 @@
+import { Box, Text } from '@gluestack-ui/themed';
+import React from 'react';
+
+const BoxDemo = () => {
+  return (
+    <Box bg="$primary500" p="$5">
+      <Text color="white">This is the Box</Text>
+    </Box>
+  );
+};
+
+export default BoxDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/ButtonDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/ButtonDemo.tsx
new file mode 100644
index 0000000000..d9b68746ae
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/ButtonDemo.tsx
@@ -0,0 +1,26 @@
+import { Button, ButtonText } from '@gluestack-ui/themed';
+import React from 'react';
+
+const ButtonDemo = () => {
+  return (
+    <Button
+      variant="solid"
+      bg="$success700"
+      borderColor="$success700"
+      sx={{
+        ':hover': {
+          bg: '$success800',
+        },
+        ':active': {
+          bg: '$success700',
+        },
+      }}
+    >
+      <ButtonText fontSize="$sm" fontWeight="$medium">
+        Submit
+      </ButtonText>
+    </Button>
+  );
+};
+
+export default ButtonDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/CenterDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/CenterDemo.tsx
new file mode 100644
index 0000000000..beb49d130b
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/CenterDemo.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Center, Text } from '@gluestack-ui/themed';
+
+const CenterDemo = () => {
+  return (
+    <Center bg="$indigo500" h={120} w={180}>
+      <Text color="white" fontWeight="$bold">
+        This is the center.
+      </Text>
+    </Center>
+  );
+};
+
+export default CenterDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/CheckboxDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/CheckboxDemo.tsx
new file mode 100644
index 0000000000..7eaba2bc62
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/CheckboxDemo.tsx
@@ -0,0 +1,25 @@
+import {
+  CheckIcon,
+  Checkbox,
+  CheckboxIcon,
+  CheckboxIndicator,
+  CheckboxLabel,
+} from '@gluestack-ui/themed';
+import React from 'react';
+
+export const CheckboxDemo = () => {
+  return (
+    <Checkbox
+      size="md"
+      isInvalid={false}
+      isDisabled={false}
+      value="Label 1"
+      aria-label="Label 1"
+    >
+      <CheckboxIndicator mr="$2">
+        <CheckboxIcon as={CheckIcon} />
+      </CheckboxIndicator>
+      <CheckboxLabel>Try me!</CheckboxLabel>
+    </Checkbox>
+  );
+};
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/DividerDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/DividerDemo.tsx
new file mode 100644
index 0000000000..edbdab398e
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/DividerDemo.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Center, Divider, Text } from '@gluestack-ui/themed';
+
+const DividerDemo = () => {
+  return (
+    <Center>
+      <Text>Easy</Text>
+      <Divider my="$0.5" />
+      <Text>Difficult</Text>
+    </Center>
+  );
+};
+
+export default DividerDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/FabDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/FabDemo.tsx
new file mode 100644
index 0000000000..953a2260b4
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/FabDemo.tsx
@@ -0,0 +1,77 @@
+import {
+  Fab,
+  FabIcon,
+  EditIcon,
+  HStack,
+  Avatar,
+  AvatarImage,
+  VStack,
+  Heading,
+  Text,
+  Box,
+} from '@gluestack-ui/themed';
+import React from 'react';
+
+const FabDemo = () => {
+  return (
+    <Box
+      borderColor="$borderLight200"
+      borderRadius="$lg"
+      borderWidth="$1"
+      p="$5"
+      minWidth={210}
+      sx={{
+        '_dark': {
+          bg: '$backgroundDark900',
+          borderColor: '$borderDark800',
+        },
+        '@sm': {
+          minWidth: 220,
+        },
+        '@md': {
+          minWidth: 200,
+        },
+        '@lg': {
+          minWidth: 220,
+        },
+        '@xl': {
+          minWidth: 215,
+        },
+      }}
+    >
+      <VStack space="md">
+        <HStack space="sm" alignItems="center">
+          <Avatar size="sm">
+            <AvatarImage
+              source={{
+                uri: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80',
+              }}
+            />
+          </Avatar>
+          <VStack>
+            <Heading size="xs">Kevin Jay</Heading>
+            <Text size="xs">Hi Rachel</Text>
+          </VStack>
+        </HStack>
+        <HStack space="sm" alignItems="center">
+          <Avatar size="sm">
+            <AvatarImage
+              source={{
+                uri: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1180&q=80',
+              }}
+            />
+          </Avatar>
+          <VStack>
+            <Heading size="xs">Albert</Heading>
+            <Text size="xs">Coffee?</Text>
+          </VStack>
+        </HStack>
+      </VStack>
+      <Fab bg="$emerald600" size="md" sx={{ ':hover': { bg: '$emerald500' } }}>
+        <FabIcon as={EditIcon} w={16} h={16} />
+      </Fab>
+    </Box>
+  );
+};
+
+export default FabDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/FormControlDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/FormControlDemo.tsx
new file mode 100644
index 0000000000..9b236f1115
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/FormControlDemo.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import {
+  AlertCircleIcon,
+  FormControl,
+  FormControlHelper,
+  Input,
+  FormControlLabel,
+  FormControlLabelText,
+  FormControlHelperText,
+  FormControlError,
+  FormControlErrorText,
+  FormControlErrorIcon,
+  InputField,
+} from '@gluestack-ui/themed';
+const FormControlDemo = () => {
+  return (
+    <FormControl
+      isDisabled={false}
+      isInvalid={false}
+      isReadOnly={false}
+      isRequired={true}
+    >
+      <FormControlLabel>
+        <FormControlLabelText>Label</FormControlLabelText>
+      </FormControlLabel>
+      <Input my="$1">
+        <InputField
+          type="text"
+          placeholder="Write here"
+          placeholderTextColor="gray"
+        />
+      </Input>
+      <FormControlHelper>
+        <FormControlHelperText>This is a helper text.</FormControlHelperText>
+      </FormControlHelper>
+
+      <FormControlError>
+        <FormControlErrorIcon as={AlertCircleIcon} />
+        <FormControlErrorText>
+          Atleast 6 characters are required.
+        </FormControlErrorText>
+      </FormControlError>
+    </FormControl>
+  );
+};
+
+export default FormControlDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/HStackDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/HStackDemo.tsx
new file mode 100644
index 0000000000..954621b726
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/HStackDemo.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Box, HStack } from '@gluestack-ui/themed';
+
+const HStackDemo = () => {
+  return (
+    <HStack space="sm" reversed={false}>
+      <Box w="$9" h="$9" bg="$blue300" />
+      <Box w="$9" h="$9" bg="$blue400" />
+      <Box w="$9" h="$9" bg="$blue500" />
+    </HStack>
+  );
+};
+
+export default HStackDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/HeadingDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/HeadingDemo.tsx
new file mode 100644
index 0000000000..9613c797f2
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/HeadingDemo.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { Heading } from '@gluestack-ui/themed';
+const HeadingDemo = () => {
+  return <Heading>I am a Heading</Heading>;
+};
+
+export default HeadingDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/IconDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/IconDemo.tsx
new file mode 100644
index 0000000000..36e4ef47ab
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/IconDemo.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { EditIcon, Icon } from '@gluestack-ui/themed';
+
+const IconDemo = () => {
+  return <Icon as={EditIcon} size="xl" />;
+};
+export default IconDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/ImageDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/ImageDemo.tsx
new file mode 100644
index 0000000000..6a9615d313
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/ImageDemo.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Image } from '@gluestack-ui/themed';
+
+const ImageDemo = () => {
+  return (
+    <Image
+      size="xl"
+      source={{
+        uri: 'https://images.unsplash.com/photo-1507208773393-40d9fc670acf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2787&q=80',
+      }}
+    />
+  );
+};
+
+export default ImageDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/InputDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/InputDemo.tsx
new file mode 100644
index 0000000000..f33732bcfe
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/InputDemo.tsx
@@ -0,0 +1,12 @@
+import { Input, InputField } from '@gluestack-ui/themed';
+import React from 'react';
+
+const InputDemo = () => {
+  return (
+    <Input w="90%">
+      <InputField placeholder="Enter Text here" />
+    </Input>
+  );
+};
+
+export default InputDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/LinkDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/LinkDemo.tsx
new file mode 100644
index 0000000000..8e48fb5933
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/LinkDemo.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link, LinkText } from '@gluestack-ui/themed';
+
+const LinkDemo = () => {
+  return (
+    <Link href="https://gluestack.io/" isExternal>
+      <LinkText>gluestack</LinkText>
+    </Link>
+  );
+};
+
+export default LinkDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/MenuDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/MenuDemo.tsx
new file mode 100644
index 0000000000..9a3423170f
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/MenuDemo.tsx
@@ -0,0 +1,43 @@
+import {
+  Menu,
+  Button,
+  MenuItem,
+  Icon,
+  MenuItemLabel,
+  GlobeIcon,
+  ButtonText,
+} from '@gluestack-ui/themed';
+import { PuzzleIcon, SettingsIcon } from 'lucide-react-native';
+import React from 'react';
+
+const MenuDemo = () => {
+  return (
+    <Menu
+      _experimentalOverlay={true}
+      isOpen={true}
+      placement="bottom"
+      trigger={(triggerProps) => {
+        return (
+          <Button {...triggerProps} mb="$2">
+            <ButtonText>Menu</ButtonText>
+          </Button>
+        );
+      }}
+    >
+      <MenuItem key="Community" textValue="Community" p="$2">
+        <Icon as={GlobeIcon} size="sm" mr="$2" />
+        <MenuItemLabel size="sm">Community</MenuItemLabel>
+      </MenuItem>
+      <MenuItem key="Settings" textValue="Settings" p="$2">
+        <Icon as={SettingsIcon} size="sm" mr="$2" />
+        <MenuItemLabel size="sm">Settings</MenuItemLabel>
+      </MenuItem>
+      <MenuItem key="Plugins" textValue="Plugins">
+        <Icon as={PuzzleIcon} size="sm" mr="$2" />
+        <MenuItemLabel size="sm">Plugins</MenuItemLabel>
+      </MenuItem>
+    </Menu>
+  );
+};
+
+export default MenuDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/ModalDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/ModalDemo.tsx
new file mode 100644
index 0000000000..dad5879d6a
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/ModalDemo.tsx
@@ -0,0 +1,88 @@
+import {
+  Heading,
+  ModalBackdrop,
+  Button,
+  ButtonText,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  Icon,
+  CloseIcon,
+  ModalBody,
+  Text,
+  ModalFooter,
+} from '@gluestack-ui/themed';
+import React, { useState, useRef } from 'react';
+
+const ModalDemo = () => {
+  const [showModal, setShowModal] = useState(true);
+  const [showButton, setShowButton] = useState(false);
+  const ref = useRef(null);
+  return (
+    <>
+      <Button
+        onPress={() => {
+          setShowModal(true);
+          setShowButton(false);
+        }}
+        ref={ref}
+        display={showButton ? 'flex' : 'none'}
+      >
+        <ButtonText>Show Modal</ButtonText>
+      </Button>
+      <Modal
+        initialFocusRef={React.useRef(null)}
+        isOpen={showModal}
+        onClose={() => {
+          setShowModal(false);
+          setShowButton(true);
+        }}
+        finalFocusRef={ref}
+        //@ts-ignore
+        _experimentalOverlay={showModal}
+      >
+        <ModalBackdrop />
+        <ModalContent>
+          <ModalHeader>
+            <Heading size="md">Delete Folder</Heading>
+            <ModalCloseButton>
+              <Icon as={CloseIcon} w={18} h={18} />
+            </ModalCloseButton>
+          </ModalHeader>
+          <ModalBody>
+            <Text size="sm">You sure you want to delete the folder?</Text>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              variant="outline"
+              size="sm"
+              action="secondary"
+              mr="$3"
+              onPress={() => {
+                setShowModal(false);
+                setShowButton(true);
+              }}
+            >
+              <ButtonText>No</ButtonText>
+            </Button>
+            <Button
+              size="sm"
+              bg="$error600"
+              action="negative"
+              borderWidth="$0"
+              onPress={() => {
+                setShowModal(false);
+                setShowButton(true);
+              }}
+            >
+              <ButtonText>Yes</ButtonText>
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default ModalDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/PopoverDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/PopoverDemo.tsx
new file mode 100644
index 0000000000..45e14d2348
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/PopoverDemo.tsx
@@ -0,0 +1,59 @@
+import {
+  Avatar,
+  Box,
+  Popover,
+  Pressable,
+  Text,
+  PopoverContent,
+  AvatarFallbackText,
+  PopoverBody,
+  HStack,
+  CircleIcon,
+} from '@gluestack-ui/themed';
+import React from 'react';
+
+const PopoverDemo = () => {
+  const [showPopover, setShowPopover] = React.useState(true);
+
+  return (
+    <Box>
+      <Popover
+        _experimentalOverlay={true}
+        offset={6}
+        placement="bottom"
+        isOpen={showPopover}
+        trigger={(triggerProps) => {
+          return (
+            <Pressable
+              borderRadius="$full"
+              {...triggerProps}
+              onPress={() => {
+                setShowPopover(!showPopover);
+              }}
+            >
+              <Avatar bg="$indigo600">
+                <AvatarFallbackText>Kevin James</AvatarFallbackText>
+              </Avatar>
+            </Pressable>
+          );
+        }}
+      >
+        <PopoverContent w={130} ml={-55}>
+          <PopoverBody p="$2.5">
+            <Text size="sm" pl="$1.5" mb="$1.5">
+              Kevin James
+            </Text>
+            <HStack alignItems="center">
+              <CircleIcon color="$green700" h="$2" w="$2" />
+              <Text size="xs" pl="$1.5">
+                Active
+              </Text>
+            </HStack>
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    </Box>
+  );
+};
+
+export default PopoverDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/PressableDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/PressableDemo.tsx
new file mode 100644
index 0000000000..dc16c93c0b
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/PressableDemo.tsx
@@ -0,0 +1,12 @@
+import { Pressable, Text } from '@gluestack-ui/themed';
+import React from 'react';
+
+const PressableDemo = () => {
+  return (
+    <Pressable p="$5" bg="$primary500" sx={{ ':hover': { bg: '$primary400' } }}>
+      <Text color="white">Press me</Text>
+    </Pressable>
+  );
+};
+
+export default PressableDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/ProgressDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/ProgressDemo.tsx
new file mode 100644
index 0000000000..0b9bf1b459
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/ProgressDemo.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Progress, ProgressFilledTrack } from '@gluestack-ui/themed';
+const ProgressDemo = () => {
+  return (
+    <Progress value={46} size="sm">
+      <ProgressFilledTrack bg="$amber600" />
+    </Progress>
+  );
+};
+
+export default ProgressDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/RadioDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/RadioDemo.tsx
new file mode 100644
index 0000000000..d9fb83199b
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/RadioDemo.tsx
@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import {
+  CircleIcon,
+  Radio,
+  RadioGroup,
+  RadioIcon,
+  RadioIndicator,
+  RadioLabel,
+  VStack,
+} from '@gluestack-ui/themed';
+
+const RadioDemo = () => {
+  const [values, setValues] = useState('Monday');
+  return (
+    <RadioGroup value={values} onChange={setValues}>
+      <VStack space="md" w="$40">
+        <Radio value="Monday" justifyContent="space-between">
+          <RadioLabel>Option A</RadioLabel>
+          <RadioIndicator>
+            <RadioIcon as={CircleIcon} />
+          </RadioIndicator>
+        </Radio>
+        <Radio value="Tuesday" justifyContent="space-between">
+          <RadioLabel>Option B</RadioLabel>
+          <RadioIndicator>
+            <RadioIcon as={CircleIcon} />
+          </RadioIndicator>
+        </Radio>
+      </VStack>
+    </RadioGroup>
+  );
+};
+
+export default RadioDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/SelectDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/SelectDemo.tsx
new file mode 100644
index 0000000000..1b1d63aa53
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/SelectDemo.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  ChevronDownIcon,
+  Icon,
+  Select,
+  SelectTrigger,
+  SelectInput,
+  SelectIcon,
+  SelectPortal,
+  SelectBackdrop,
+  SelectContent,
+  SelectDragIndicatorWrapper,
+  SelectDragIndicator,
+  SelectItem,
+} from '@gluestack-ui/themed';
+
+const SelectDemo = () => {
+  return (
+    <Select>
+      <SelectTrigger>
+        <SelectInput
+          color="$textDark50"
+          placeholder="Select option"
+          placeholderTextColor="gray"
+        />
+        <SelectIcon mr="$3">
+          <Icon as={ChevronDownIcon} />
+        </SelectIcon>
+      </SelectTrigger>
+      <SelectPortal>
+        <SelectBackdrop />
+        <SelectContent>
+          <SelectDragIndicatorWrapper>
+            <SelectDragIndicator />
+          </SelectDragIndicatorWrapper>
+          <SelectItem label="UX Research" value="ux" />
+          <SelectItem label="Web Development" value="web" />
+          <SelectItem
+            label="Cross Platform Development Process"
+            value="Cross Platform Development Process"
+          />
+          <SelectItem label="Backend Development" value="backend" />
+        </SelectContent>
+      </SelectPortal>
+    </Select>
+  );
+};
+
+export default SelectDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/SliderDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/SliderDemo.tsx
new file mode 100644
index 0000000000..c7ff626583
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/SliderDemo.tsx
@@ -0,0 +1,24 @@
+import {
+  Slider,
+  SliderFilledTrack,
+  SliderThumb,
+  SliderTrack,
+} from '@gluestack-ui/themed';
+import React from 'react';
+
+export const SliderDemo = () => {
+  return (
+    <Slider
+      defaultValue={30}
+      size="md"
+      orientation="horizontal"
+      isDisabled={false}
+      isReversed={false}
+    >
+      <SliderTrack>
+        <SliderFilledTrack />
+      </SliderTrack>
+      <SliderThumb />
+    </Slider>
+  );
+};
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/SpinnerDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/SpinnerDemo.tsx
new file mode 100644
index 0000000000..3d9d7b2e4a
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/SpinnerDemo.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Spinner } from '@gluestack-ui/themed';
+
+const SpinnerDemo = () => {
+  return <Spinner size="large" />;
+};
+
+export default SpinnerDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/SwitchDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/SwitchDemo.tsx
new file mode 100644
index 0000000000..f4c4ee6392
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/SwitchDemo.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { HStack, Switch, Text } from '@gluestack-ui/themed';
+
+const SwitchDemo = () => {
+  return (
+    <HStack space="md">
+      <Switch />
+      <Text size="sm">Allow notifications</Text>
+    </HStack>
+  );
+};
+
+export default SwitchDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/TeaxtAreaDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/TeaxtAreaDemo.tsx
new file mode 100644
index 0000000000..06a0c8613c
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/TeaxtAreaDemo.tsx
@@ -0,0 +1,18 @@
+import { Textarea, TextareaInput } from '@gluestack-ui/themed';
+import React from 'react';
+
+const TextAreaDemo = () => {
+  return (
+    <Textarea
+      size="md"
+      isReadOnly={false}
+      isInvalid={false}
+      isDisabled={false}
+      // w="$64"
+    >
+      <TextareaInput placeholder="Your text goes here..." />
+    </Textarea>
+  );
+};
+
+export default TextAreaDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/TextDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/TextDemo.tsx
new file mode 100644
index 0000000000..b70303f770
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/TextDemo.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Text } from '@gluestack-ui/themed';
+
+const TextDemo = () => {
+  return <Text>Hello World!</Text>;
+};
+
+export default TextDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/ToastDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/ToastDemo.tsx
new file mode 100644
index 0000000000..b5167d42df
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/ToastDemo.tsx
@@ -0,0 +1,20 @@
+import {
+  Toast,
+  ToastDescription,
+  ToastTitle,
+  VStack,
+} from '@gluestack-ui/themed';
+import React from 'react';
+
+const ToastDemo = () => {
+  return (
+    <Toast action="info" variant="accent">
+      <VStack space="xs">
+        <ToastTitle>Info</ToastTitle>
+        <ToastDescription>Add a note here</ToastDescription>
+      </VStack>
+    </Toast>
+  );
+};
+
+export default ToastDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/TooltipDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/TooltipDemo.tsx
new file mode 100644
index 0000000000..af85e63cfd
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/TooltipDemo.tsx
@@ -0,0 +1,29 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipText,
+  Button,
+  ButtonText,
+} from '@gluestack-ui/themed';
+import React from 'react';
+
+const TooltipDemo = () => {
+  return (
+    <Tooltip
+      placement="top"
+      trigger={(triggerProps) => {
+        return (
+          <Button {...triggerProps}>
+            <ButtonText>Hover </ButtonText>
+          </Button>
+        );
+      }}
+    >
+      <TooltipContent>
+        <TooltipText>Tooltip</TooltipText>
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+export default TooltipDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Demos/VStackDemo.tsx b/example/storybook/src/overview/Component-Catalog/Demos/VStackDemo.tsx
new file mode 100644
index 0000000000..66b69fbcca
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Demos/VStackDemo.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Box, VStack } from '@gluestack-ui/themed';
+
+const VStackDemo = () => {
+  return (
+    <VStack space="sm" reversed={false}>
+      <Box w="$9" h="$9" bg="$blue300" />
+      <Box w="$9" h="$9" bg="$blue400" />
+      <Box w="$9" h="$9" bg="$blue500" />
+    </VStack>
+  );
+};
+
+export default VStackDemo;
diff --git a/example/storybook/src/overview/Component-Catalog/Grid.tsx b/example/storybook/src/overview/Component-Catalog/Grid.tsx
new file mode 100644
index 0000000000..ea5130412b
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/Grid.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Box } from '@gluestack-ui/themed';
+import { ComponentCard } from './ComponentCard';
+import { content } from './content';
+
+export const Grid = () => {
+  return (
+    <>
+      <Box
+        mb="$6"
+        flexDirection="column"
+        gap="$6"
+        sx={{
+          '@md': {
+            flexWrap: 'wrap',
+            flexDirection: 'row',
+            _web: {
+              display: 'grid',
+              gridTemplateColumns: 'repeat(2, 1fr)',
+            },
+          },
+          '@lg': {
+            _web: {
+              display: 'grid',
+              gridTemplateColumns: 'repeat(3, 1fr)',
+            },
+          },
+          '@xxl': {
+            _web: {
+              display: 'grid',
+              gridTemplateColumns: 'repeat(4, 1fr)',
+            },
+          },
+        }}
+      >
+        {content.map((item, index) => (
+          <ComponentCard
+            key={index}
+            title={item.title}
+            child={item.child}
+            padding={item.padding}
+            href={item.href}
+          />
+        ))}
+      </Box>
+    </>
+  );
+};
diff --git a/example/storybook/src/overview/Component-Catalog/content.tsx b/example/storybook/src/overview/Component-Catalog/content.tsx
new file mode 100644
index 0000000000..2aee386791
--- /dev/null
+++ b/example/storybook/src/overview/Component-Catalog/content.tsx
@@ -0,0 +1,223 @@
+import React from 'react';
+import SelectDemo from './Demos/SelectDemo';
+import { CheckboxDemo } from './Demos/CheckboxDemo';
+import { SliderDemo } from './Demos/SliderDemo';
+import FormControlDemo from './Demos/FormControlDemo';
+import BadgeDemo from './Demos/BadgeDemo';
+import ToastDemo from './Demos/ToastDemo';
+import AvatarDemo from './Demos/AvatarDemo';
+import HeadingDemo from './Demos/HeadingDemo';
+import TextDemo from './Demos/TextDemo';
+import BoxDemo from './Demos/BoxDemo';
+import DividerDemo from './Demos/DividerDemo';
+import HStackDemo from './Demos/HStackDemo';
+import VStackDemo from './Demos/VStackDemo';
+import AlertDemo from './Demos/AlertDemo';
+import ProgressDemo from './Demos/ProgressDemo';
+import SpinnerDemo from './Demos/SpinnerDemo';
+import ButtonDemo from './Demos/ButtonDemo';
+import InputDemo from './Demos/InputDemo';
+import LinkDemo from './Demos/LinkDemo';
+import PressableDemo from './Demos/PressableDemo';
+import RadioDemo from './Demos/RadioDemo';
+import SwitchDemo from './Demos/SwitchDemo';
+import TextAreaDemo from './Demos/TeaxtAreaDemo';
+import TooltipDemo from './Demos/TooltipDemo';
+import IconDemo from './Demos/IconDemo';
+import ImageDemo from './Demos/ImageDemo';
+import FabDemo from './Demos/FabDemo';
+import CenterDemo from './Demos/CenterDemo';
+import AlertDialogDemo from './Demos/AlertDialogDemo';
+import ModalDemo from './Demos/ModalDemo';
+// import MenuDemo from './Demos/MenuDemo';
+// import PopoverDemo from './Demos/PopoverDemo';
+import ActionsheetDemo from './Demos/ActionsheetDemo';
+
+export const content = [
+  {
+    title: 'Actionsheet',
+    child: <ActionsheetDemo />,
+    padding: '$0',
+    href: '/ui/docs/components/disclosure/actionsheet',
+  },
+  {
+    title: 'AlertDialog',
+    child: <AlertDialogDemo />,
+    padding: '$0',
+    href: '/ui/docs/components/overlay/alert-dialog',
+  },
+  {
+    title: 'Alert',
+    child: <AlertDemo />,
+    href: '/ui/docs/components/feedback/alert',
+  },
+  {
+    title: 'Avatar',
+    child: <AvatarDemo />,
+    href: '/ui/docs/components/media-and-icons/avatar',
+  },
+
+  {
+    title: 'Badge',
+    child: <BadgeDemo />,
+    href: '/ui/docs/components/data-display/badge',
+  },
+  {
+    title: 'Box',
+    child: <BoxDemo />,
+    href: '/ui/docs/components/layout/box',
+  },
+  {
+    title: 'Button',
+    child: <ButtonDemo />,
+    href: '/ui/docs/components/forms/button',
+  },
+
+  {
+    title: 'Center',
+    child: <CenterDemo />,
+    href: '/ui/docs/components/layout/center',
+  },
+  {
+    title: 'Checkbox',
+    child: <CheckboxDemo />,
+    href: '/ui/docs/components/forms/checkbox',
+  },
+
+  {
+    title: 'Divider',
+    child: <DividerDemo />,
+    href: '/ui/docs/components/data-display/divider',
+  },
+
+  {
+    title: 'Fab',
+    child: <FabDemo />,
+    href: '/ui/docs/components/others/fab',
+  },
+  {
+    title: 'FormControl',
+    child: <FormControlDemo />,
+    href: '/ui/docs/components/forms/form-control',
+  },
+  {
+    title: 'Heading',
+    child: <HeadingDemo />,
+    href: '/ui/docs/components/typography/heading',
+  },
+  {
+    title: 'HStack',
+    child: <HStackDemo />,
+    href: '/ui/docs/components/layout/hstack',
+  },
+
+  {
+    title: 'Icon',
+    child: <IconDemo />,
+    href: '/ui/docs/components/media-and-icons/icon',
+  },
+  {
+    title: 'Image',
+    child: <ImageDemo />,
+    href: '/ui/docs/components/media-and-icons/image',
+  },
+  {
+    title: 'Input',
+    child: <InputDemo />,
+    href: '/ui/docs/components/forms/input',
+  },
+
+  {
+    title: 'Link',
+    child: <LinkDemo />,
+    href: '/ui/docs/components/forms/link',
+  },
+
+  // {
+  //   title: 'Menu',
+  //   child: <MenuDemo />,
+  //   padding: '$0',
+  //   href: '/ui/docs/components/overlay/menu',
+  // },
+
+  {
+    title: 'Modal',
+    child: <ModalDemo />,
+    padding: '$0',
+    href: '/ui/docs/components/overlay/modal',
+  },
+
+  // {
+  //   title: 'Popover',
+  //   child: <PopoverDemo />,
+  //   padding: '$0',
+  //   href: '/ui/docs/components/overlay/popover',
+  // },
+
+  {
+    title: 'Pressable',
+    child: <PressableDemo />,
+    href: '/ui/docs/components/forms/pressable',
+  },
+  {
+    title: 'Progress',
+    child: <ProgressDemo />,
+    href: '/ui/docs/components/feedback/progress',
+  },
+
+  {
+    title: 'Radio',
+    child: <RadioDemo />,
+    href: '/ui/docs/components/forms/radio',
+  },
+
+  {
+    title: 'Select',
+    child: <SelectDemo />,
+    href: '/ui/docs/components/forms/select',
+  },
+
+  {
+    title: 'Slider',
+    child: <SliderDemo />,
+    href: '/ui/docs/components/forms/slider',
+  },
+  {
+    title: 'Spinner',
+    child: <SpinnerDemo />,
+    href: '/ui/docs/components/feedback/spinner',
+  },
+  {
+    title: 'Switch',
+    child: <SwitchDemo />,
+    href: '/ui/docs/components/forms/switch',
+  },
+
+  {
+    title: 'Text',
+    child: <TextDemo />,
+    href: '/ui/docs/components/typography/text',
+  },
+  {
+    title: 'TextArea',
+    child: <TextAreaDemo />,
+    href: '/ui/docs/components/forms/textarea',
+  },
+  {
+    title: 'Toast',
+    child: <ToastDemo />,
+    href: '/ui/docs/components/feedback/toast',
+  },
+
+  {
+    title: 'Tooltip',
+    child: <TooltipDemo />,
+    href: '/ui/docs/components/overlay/tooltip',
+  },
+
+  {
+    title: 'VStack',
+    child: <VStackDemo />,
+    href: '/ui/docs/components/layout/vstack',
+  },
+];
diff --git a/example/storybook/src/components/Component-Catalog/index.stories.mdx b/example/storybook/src/overview/Component-Catalog/index.stories.mdx
similarity index 80%
rename from example/storybook/src/components/Component-Catalog/index.stories.mdx
rename to example/storybook/src/overview/Component-Catalog/index.stories.mdx
index ab16bcd38e..6a7962eac8 100644
--- a/example/storybook/src/components/Component-Catalog/index.stories.mdx
+++ b/example/storybook/src/overview/Component-Catalog/index.stories.mdx
@@ -1,9 +1,9 @@
 ---
-title: Component Catalog | gluestack-ui
+title: All Components | gluestack-ui
 
 description: gluestack-ui provides 30+ responsive components for every screen and style
 
-pageTitle: Component Catalog
+pageTitle: All Components
 
 pageDescription: gluestack-ui provides 30+ responsive components for every screen and style
 
@@ -12,7 +12,7 @@ toc: false
 
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
-<Meta title="components/Component Catalog" />
+<Meta title="components/All Components" />
 
 import { AppProvider } from '@gluestack/design-system';
 import { Grid } from './Grid';
diff --git a/example/storybook/src/overview/Introduction/index.stories.mdx b/example/storybook/src/overview/Introduction/index.stories.mdx
index fcd3433dc0..2f8a68c0e8 100644
--- a/example/storybook/src/overview/Introduction/index.stories.mdx
+++ b/example/storybook/src/overview/Introduction/index.stories.mdx
@@ -18,8 +18,8 @@ gluestack-ui is a universal UI library that provides optionally styled and acces
 gluestack-ui originally started as part of NativeBase, a universal component library for both React and React Native. However, we realized that not everyone needs all the components from NativeBase, so here we created separate package for each of them to incrementally adopt those and add them directly to your project using CLI.
 We alse broke down the library into two separate libraries for two different responsibilities.
 
-- [style.gluestack.io](https://style.gluestack.io/) - The high-performing and universal CSS-in-JS library.
-- [ui.gluestack.io](https://ui.gluestack.io/) - A set of ready-to-use universal components that can be added to any project and styled to fit your needs. You can even customize the components as desired.
+- [gluestack.io/style](https://style.gluestack.io/styleing and universal CSS-in-JS library.
+- [gluestack-ui](/ui/docs/components/layout/box) - A set of ready-to-use universal components that can be added to any project and styled to fit your needs. You can even customize the components as desired.
 
 ## Features
 
@@ -33,7 +33,7 @@ We alse broke down the library into two separate libraries for two different res
 
 - **Theming tokens**: gluestack-ui takes a config file in the Gluestack provider, which contains theme tokens, aliases, component themes, etc, to help with the project requirements.
 
-- **Animation**: gluestack-ui provides a plugin to add support for Animation using Animation libraries like [@legendapp/motion](https://legendapp.com/open-source/motion/), [framer-motion](https://www.framer.com/motion/), and [moti](https://moti.fyi/). [Check here](https://style.gluestack.io/docs/plugins/animation-plugin).
+- **Animation**: gluestack-ui provides a plugin to add support for Animation using Animation libraries like [@legendapp/motion](https://legendapp.com/open-source/motion/), [framer-motion](https://www.framer.com/motion/), and [moti](https://moti.fyi/). [Check here](https://gluestack.io/style/docs).
 
 ## But aren’t React Native and React Native Web sufficient?
 
diff --git a/example/storybook/src/performance/benchmarks/index.stories.mdx b/example/storybook/src/performance/benchmarks/index.stories.mdx
index 8294453df1..7ad3a5b4da 100644
--- a/example/storybook/src/performance/benchmarks/index.stories.mdx
+++ b/example/storybook/src/performance/benchmarks/index.stories.mdx
@@ -12,13 +12,13 @@ import { Graph } from './Progress';
 
 `gluestack-ui` harnesses the power of [`gluestack-style`](https://style.gluestack.io), a universal and highly performant styling library, to create beautifully styled components. **With a babel plugin for pre-computing styles during the build process, and runtime performance optimizations, gluestack-style delivers high performance styling, even in the most demanding applications.**
 
-# React Native
+# React Nativehttps://style.gluestack.io/style
 
 We performed the [benchmarks](https://github.com/gluestack/gluestack-ui-benchmarks) with some famous React Native libraries like gluestack-ui, Tamagui, NativeBase, Styled Components and React Native built-in styling.
 
 **In each case we have rendered 1000 components with styling of each library. Results are average of 5 mounts.**
 
-> **All the benchmarks were measured in production enviornment on iPhone 13.**
+> **All the benchmarks were measured in production environment on iPhone 13.**
 
 ## Simple Component
 
diff --git a/example/storybook/src/production-optimizations/babel-plugin/index.stories.mdx b/example/storybook/src/production-optimizations/babel-plugin/index.stories.mdx
index 5fdd180576..badd0c9434 100644
--- a/example/storybook/src/production-optimizations/babel-plugin/index.stories.mdx
+++ b/example/storybook/src/production-optimizations/babel-plugin/index.stories.mdx
@@ -3,8 +3,8 @@ title: With a Babel Plugin | gluestack-ui
 description: With a Babel Plugin
 ---
 
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { AppProvider, Box } from '@gluestack/design-system';
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+import { AppProvider, Box } from "@gluestack/design-system";
 
 <Meta title="Production Optimizations/With a Babel Plugin" />
 
@@ -12,7 +12,7 @@ import { AppProvider, Box } from '@gluestack/design-system';
 
 ### @gluestack-style/babel-plugin-styled-resolver
 
-@gluestack-style/babel-plugin-styled-resolver transpiles your `themed` component inline styles and resolves the `component styling` in build time. It also generates all the `CSS rules` and style ids based on which these CSS styles are applied on the component. Doing this saves tons of time on runtime because all your style calculation is already done and all your app has to do is inject this style into a style tag and viola! All your styles appear instantaneously.
+`@gluestack-style/babel-plugin-styled-resolver` transpiles your `themed` component inline styles and resolves the `component styling` in build time. It also generates all the `CSS rules` and style ids based on which these CSS styles are applied on the component. Doing this saves tons of time on runtime because all your style calculation is already done and all your app has to do is inject this style into a style tag and viola! All your styles appear instantaneously.
 
 ## Installation Steps:
 
@@ -26,19 +26,31 @@ import { AppProvider, Box } from '@gluestack/design-system';
 
    ```bash
    const path = require('path');
-   const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
    module.exports = function (api) {
      api.cache(true);
      return {
        presets: ['babel-preset-expo'],
-       plugins: [
-         gluestackStyleResolver,
-       ],
+       plugins: ['@gluestack-style/babel-plugin-styled-resolver'],
      };
    };
    ```
 
-3. Just make sure your `babel.config.js` and `gluestack-ui.config.js/ts` are in the same directory. We suggest you keep both of them at the root of your app codebase. If you can't, then use the `configPath` option to specify the path of the `gluestack-ui.config.js/ts` file.
+3. Add `GLUESTACK_STYLE_TARGET` enviornment variable, 'native' or 'web' depending on platform to remove unwanted props and data
+
+   Below is an example of how you can add this in your `expo app`, you can change it depending on the project,
+
+   ```
+     "scripts": {
+       "start": "GLUESTACK_STYLE_TARGET=native expo start -c",
+       "web": "GLUESTACK_STYLE_TARGET=web expo start --web -c",
+       "android": "GLUESTACK_STYLE_TARGET=native expo start --android -c",
+       "ios": "GLUESTACK_STYLE_TARGET=native expo start --ios -c",
+     },
+   ```
+
+   - We added the `GLUESTACK_STYLE_TARGE` with values 'native' or 'web' environment variable to our enviornment variable so that it can automatically get rid of extra props and data that it doesn't need, depending on the platform.
+
+4. Just make sure your `babel.config.js` and `gluestack-ui.config.js/ts` are in the same directory. We suggest you keep both of them at the root of your app codebase. If you can't, then use the `configPath` option to specify the path of the `gluestack-ui.config.js/ts` file.
 
 > **Note:** We already provide you with the plugin config for `@gluestack-ui/themed`. So you have to do minimal configuration to get it working.
 
@@ -56,7 +68,7 @@ Here’s a small diagram explaining how the flow works:
   <Box
     sx={{
       _dark: {
-        display: 'none',
+        display: "none",
       },
     }}
   >
@@ -69,7 +81,7 @@ Here’s a small diagram explaining how the flow works:
   <Box
     sx={{
       _light: {
-        display: 'none',
+        display: "none",
       },
     }}
   >
@@ -90,20 +102,20 @@ The `@gluestack-style/babel-plugin-styled-resolver` plugin offers advanced funct
 - `configPath`: The `configPath` option allows you to define the path to the configuration file. This configuration file contains the aliases and tokens used by the plugin. By default, the plugin assumes that the configuration file is located in the same directory as the `babel.config.js` file.
 
 ```js
-const path = require('path');
-const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
+const path = require("path");
+const gluestackStyleResolver = require("@gluestack-style/babel-plugin-styled-resolver");
 
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ["babel-preset-expo"],
     plugins: [
       [
         gluestackStyleResolver,
         {
           configPath: path.resolve(
             __dirname,
-            './config/gluestack-ui.config.js' // Specify the path of the config file
+            "./config/gluestack-ui.config.js" // Specify the path of the config file
           ),
         },
       ],
@@ -118,7 +130,7 @@ if your config file looks like below:
 
 ```js
 const config = {
-  componentPath: '/core/components',
+  componentPath: "/core/components",
   theme: {
     aliases: {},
     tokens: {},
@@ -130,18 +142,18 @@ You can use the following babel config:
 
 ```js
 // babel.config.js
-const path = require('path');
-const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
+const path = require("path");
+const gluestackStyleResolver = require("@gluestack-style/babel-plugin-styled-resolver");
 
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ["babel-preset-expo"],
     plugins: [
       [
         gluestackStyleResolver,
         {
-          configThemePath: ['config', 'theme'], // Specify the path of the theme object in your config file
+          configThemePath: ["config", "theme"], // Specify the path of the theme object in your config file
         },
       ],
     ],
@@ -153,18 +165,18 @@ module.exports = function (api) {
 
 ```js
 // babel.config.js
-const path = require('path');
-const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
+const path = require("path");
+const gluestackStyleResolver = require("@gluestack-style/babel-plugin-styled-resolver");
 
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ["babel-preset-expo"],
     plugins: [
       [
         gluestackStyleResolver,
         {
-          styledAlias: 'myStyled', // Specify your styled aliases function name if different
+          styledAlias: "myStyled", // Specify your styled aliases function name if different
         },
       ],
     ],
@@ -176,20 +188,20 @@ module.exports = function (api) {
 
 ```js
 // babel.config.js
-const path = require('path');
-const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
+const path = require("path");
+const gluestackStyleResolver = require("@gluestack-style/babel-plugin-styled-resolver");
 
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ["babel-preset-expo"],
     plugins: [
       [
         gluestackStyleResolver,
         {
           styled: [
-            '@gluestack-style/react', // import path of the styled function
-            path.resolve(__dirname, './gluestack-ui-components/core/styled'), // file path of the styled function
+            "@gluestack-style/react", // import path of the styled function
+            path.resolve(__dirname, "./gluestack-ui-components/core/styled"), // file path of the styled function
           ],
         },
       ],
@@ -204,20 +216,20 @@ module.exports = function (api) {
 
 ```js
 // babel.config.js
-const path = require('path');
-const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
+const path = require("path");
+const gluestackStyleResolver = require("@gluestack-style/babel-plugin-styled-resolver");
 
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ["babel-preset-expo"],
     plugins: [
       [
         gluestackStyleResolver,
         {
           components: [
-            '@gluestack-ui/themed', // import path of the components folder or library name
-            path.resolve(__dirname, './gluestack-ui-components/core/component'), // file path of the components folder
+            "@gluestack-ui/themed", // import path of the components folder or library name
+            path.resolve(__dirname, "./gluestack-ui-components/core/component"), // file path of the components folder
           ],
         },
       ],
diff --git a/example/storybook/src/react-native-components/KeyboardAvoidingView/KeyboardAvoidingView.tsx b/example/storybook/src/react-native-components/KeyboardAvoidingView/KeyboardAvoidingView.tsx
index 2c909f5bb5..158dee722f 100644
--- a/example/storybook/src/react-native-components/KeyboardAvoidingView/KeyboardAvoidingView.tsx
+++ b/example/storybook/src/react-native-components/KeyboardAvoidingView/KeyboardAvoidingView.tsx
@@ -94,3 +94,37 @@ export default function KeyboardAvoidingViewStory() {
     </Center>
   );
 }
+
+export {
+  GluestackUIProvider,
+  Button,
+  Center,
+  FormControl,
+  FormControlLabelText,
+  Text,
+  VStack,
+  InputIcon,
+  HStack,
+  InputField,
+  InputSlot,
+  Box,
+  Actionsheet,
+  ActionsheetBackdrop,
+  ActionsheetContent,
+  ActionsheetDragIndicator,
+  ActionsheetDragIndicatorWrapper,
+  ActionsheetItem,
+  ActionsheetItemText,
+  FormControlLabel,
+  Input,
+  Image,
+  Icon,
+  ButtonText,
+  KeyboardAvoidingView,
+} from '@gluestack-ui/themed';
+
+import Wrapper from '../../components/Wrapper';
+
+export { Wrapper };
+
+export { config } from '@gluestack-ui/config';
diff --git a/example/storybook/src/react-native-components/KeyboardAvoidingView/index.stories.mdx b/example/storybook/src/react-native-components/KeyboardAvoidingView/index.stories.mdx
index f5ba9f1f93..d20efc58a2 100644
--- a/example/storybook/src/react-native-components/KeyboardAvoidingView/index.stories.mdx
+++ b/example/storybook/src/react-native-components/KeyboardAvoidingView/index.stories.mdx
@@ -13,9 +13,9 @@ import {
   InlineCode,
 } from '@gluestack/design-system';
 import { Platform } from 'react-native';
-import Wrapper from '../../components/Wrapper';
-import { KeyboardAvoidingView } from './KeyboardAvoidingView';
 import {
+  KeyboardAvoidingView,
+  Wrapper,
   GluestackUIProvider,
   Button,
   Center,
@@ -25,7 +25,6 @@ import {
   VStack,
   InputIcon,
   HStack,
-  LeadingIcon,
   InputField,
   InputSlot,
   Box,
@@ -41,9 +40,10 @@ import {
   Image,
   Icon,
   ButtonText,
-  config,
 } from '@gluestack-ui/themed';
 
+import { config } from '@gluestack-ui/config';
+
 <Meta title="React Native Components/KeyboardAvoidingView" />
 
 # KeyboardAvoidingView
@@ -106,7 +106,7 @@ Provides a view that moves out of the way of virtual keyboard automatically. It
                 </FormControlLabel>
                 <Input w="$full">
                   <InputSlot>
-                   <InputIcon as={LeadingIcon} ml="$2" />
+                   <InputIcon as={InputIcon} ml="$2" />
                   </InputSlot>
                   <InputField placeholder="CVC/CVV" />
                 </Input>
@@ -122,9 +122,6 @@ Provides a view that moves out of the way of virtual keyboard automatically. It
     );
 }
 `,
-      transformCode: (code) => {
-        return transformedCode(code, 'function', 'App');
-      },
       scope: {
         Wrapper,
         GluestackUIProvider,
@@ -140,7 +137,6 @@ Provides a view that moves out of the way of virtual keyboard automatically. It
         InputSlot,
         ButtonText,
         InputIcon,
-        LeadingIcon,
         HStack,
         Box,
         Actionsheet,
@@ -162,7 +158,7 @@ Provides a view that moves out of the way of virtual keyboard automatically. It
 
 <br />
 
-> Note: You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/KeyboaardAvoidingView/styled-components) to learn about default styling of FlatList component
+> Note: You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/KeyboardAvoidingView/styled-components) to learn about default styling of FlatList component
 
 ### Import
 
@@ -182,7 +178,7 @@ export default () => <KeyboardAvoidingView></KeyboardAvoidingView>;
 
 ### Props
 
-gluestack-ui KeyboardAvoidingView component is created using KeyboardAvoidingView component from react-native. It extends all the props supported by [React Native KeyboardAvoidingView](https://reactnative.dev/docs/keyboardAvoidingView#props), [React Native View](https://reactnative.dev/docs/view#props),[utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+gluestack-ui KeyboardAvoidingView component is created using KeyboardAvoidingView component from react-native. It extends all the props supported by [React Native KeyboardAvoidingView](https://reactnative.dev/docs/keyboardAvoidingView#props), [React Native View](https://reactnative.dev/docs/view#props),[utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### View
 
diff --git a/example/storybook/src/react-native-components/ScrollView/ScrollView.tsx b/example/storybook/src/react-native-components/ScrollView/ScrollView.tsx
index bea9629f07..5707b2173a 100644
--- a/example/storybook/src/react-native-components/ScrollView/ScrollView.tsx
+++ b/example/storybook/src/react-native-components/ScrollView/ScrollView.tsx
@@ -3,10 +3,11 @@ import {
   Center,
   Heading,
   VStack,
-  config,
   Text,
 } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
 import React from 'react';
+import Wrapper from '../../components/Wrapper';
 
 export default function ScrollViewStory() {
   return (
@@ -16,7 +17,7 @@ export default function ScrollViewStory() {
           <Heading fontSize="xl">Primary</Heading>
         </Center>
         <VStack flex={1}>
-          {Object.keys(config.theme.tokens.colors).map((key) => {
+          {Object.keys(config.tokens.colors).map((key: any) => {
             if (
               key.includes('primary') &&
               !(
@@ -28,17 +29,19 @@ export default function ScrollViewStory() {
               )
             )
               return (
-                <Center py="$4" bg={config.theme.tokens.colors[key]}>
+                // @ts-ignore
+                <Center py="$4" bg={config.tokens.colors[key]}>
                   <Text>{key}</Text>
                 </Center>
               );
+            return null; // add this line to fix Problem 1
           })}
         </VStack>
         <Center mt="$10" mb="$4">
           <Heading fontSize="$xl">Yellow</Heading>
         </Center>
         <VStack flex="1">
-          {Object.keys(config.theme.tokens.colors).map((key) => {
+          {Object.keys(config.tokens.colors).map((key) => {
             if (
               key.includes('yellow') &&
               !(
@@ -50,7 +53,7 @@ export default function ScrollViewStory() {
               )
             )
               return (
-                <Center py="$4" bg={config.theme.tokens.colors[key]}>
+                <Center py="$4" bg={config.tokens.colors[key]}>
                   <Text>{key}</Text>
                 </Center>
               );
@@ -60,7 +63,7 @@ export default function ScrollViewStory() {
           <Heading fontSize="$xl">Violet</Heading>
         </Center>
         <VStack flex="1">
-          {Object.keys(config.theme.tokens.colors).map((key) => {
+          {Object.keys(config.tokens.colors).map((key) => {
             if (
               key.includes('violet') &&
               !(
@@ -72,7 +75,7 @@ export default function ScrollViewStory() {
               )
             )
               return (
-                <Center py="$4" bg={config.theme.tokens.colors[key]}>
+                <Center py="$4" bg={config.tokens.colors[key]}>
                   <Text>{key}</Text>
                 </Center>
               );
@@ -82,3 +85,14 @@ export default function ScrollViewStory() {
     </Center>
   );
 }
+
+export {
+  VStack,
+  Center,
+  Heading,
+  GluestackUIProvider,
+  ScrollView,
+  Text,
+} from '@gluestack-ui/themed';
+
+export { config, Wrapper };
diff --git a/example/storybook/src/react-native-components/ScrollView/index.stories.mdx b/example/storybook/src/react-native-components/ScrollView/index.stories.mdx
index 361ec9868d..0fb0bda006 100644
--- a/example/storybook/src/react-native-components/ScrollView/index.stories.mdx
+++ b/example/storybook/src/react-native-components/ScrollView/index.stories.mdx
@@ -12,16 +12,16 @@ import {
   TableContainer,
   InlineCode,
 } from '@gluestack/design-system';
-import Wrapper from '../../components/Wrapper';
-import { ScrollView } from './ScrollView';
 import {
+  ScrollView,
   VStack,
   Center,
   Heading,
   GluestackUIProvider,
-  config,
   Text,
-} from '@gluestack-ui/themed';
+  Wrapper,
+  config,
+} from './ScrollView';
 
 <Meta title="React Native Components/ScrollView" />
 
@@ -41,7 +41,7 @@ Provides a scrolling container that can host multiple components and views.
           <Heading fontSize="xl">Primary</Heading>
         </Center>
         <VStack flex={1}>
-          {Object.keys(config.theme.tokens.colors).map((key, index) => {
+          {Object.keys(config.tokens.colors).map((key, index) => {
             if (
               key.includes('primary') &&
               !(
@@ -53,7 +53,7 @@ Provides a scrolling container that can host multiple components and views.
               )
             )
               return (
-                <Center py="$4" bg={config.theme.tokens.colors[key]}>
+                <Center py="$4" bg={config.tokens.colors[key]}>
                   <Text>{key}</Text>
                 </Center>
               );
@@ -63,7 +63,7 @@ Provides a scrolling container that can host multiple components and views.
           <Heading fontSize="$xl">Yellow</Heading>
         </Center>
         <VStack flex="1">
-          {Object.keys(config.theme.tokens.colors).map((key, index) => {
+          {Object.keys(config.tokens.colors).map((key, index) => {
             if (
               key.includes('yellow') &&
               !(
@@ -75,7 +75,7 @@ Provides a scrolling container that can host multiple components and views.
               )
             )
               return (
-                <Center py="$4" bg={config.theme.tokens.colors[key]}>
+                <Center py="$4" bg={config.tokens.colors[key]}>
                   <Text>{key}</Text>
                 </Center>
               );
@@ -85,7 +85,7 @@ Provides a scrolling container that can host multiple components and views.
           <Heading fontSize="$xl">Violet</Heading>
         </Center>
         <VStack flex="1">
-          {Object.keys(config.theme.tokens.colors).map((key, index) => {
+          {Object.keys(config.tokens.colors).map((key, index) => {
             if (
               key.includes('violet') &&
               !(
@@ -97,7 +97,7 @@ Provides a scrolling container that can host multiple components and views.
               )
             )
               return (
-                <Center py="$4" bg={config.theme.tokens.colors[key]}>
+                <Center py="$4" bg={config.tokens.colors[key]}>
                  <Text>{key}</Text>
                 </Center>
               );
@@ -144,7 +144,7 @@ export default () => <ScrollView></ScrollView>;
 
 ### Props
 
-gluestack-ui ScrollView component is created using ScrollView component from react-native. It extends all the props supported by [React Native ScrollView](https://reactnative.dev/docs/scrollview#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+gluestack-ui ScrollView component is created using ScrollView component from react-native. It extends all the props supported by [React Native ScrollView](https://reactnative.dev/docs/scrollview#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### ScrollView
 
diff --git a/example/storybook/src/react-native-components/View/View.tsx b/example/storybook/src/react-native-components/View/View.tsx
index 2075cba9ba..7186369526 100644
--- a/example/storybook/src/react-native-components/View/View.tsx
+++ b/example/storybook/src/react-native-components/View/View.tsx
@@ -1,5 +1,6 @@
 import { View, Center, Heading, Text } from '@gluestack-ui/themed';
 import React from 'react';
+import Wrapper from '../../components/Wrapper';
 
 export default function ViewStory() {
   return (
@@ -17,3 +18,5 @@ export default function ViewStory() {
     </Center>
   );
 }
+
+export { View, Center, Heading, Text, Wrapper };
diff --git a/example/storybook/src/react-native-components/View/index.stories.mdx b/example/storybook/src/react-native-components/View/index.stories.mdx
index 47bd2cc935..a4fa2d3a65 100644
--- a/example/storybook/src/react-native-components/View/index.stories.mdx
+++ b/example/storybook/src/react-native-components/View/index.stories.mdx
@@ -12,9 +12,7 @@ import {
   TableContainer,
   InlineCode,
 } from '@gluestack/design-system';
-import Wrapper from '../../components/Wrapper';
-import { View } from './View';
-import { Text, Heading } from '@gluestack-ui/themed';
+import { View, Text, Heading, Wrapper } from './View';
 
 <Meta title="React Native Components/View" />
 
@@ -28,7 +26,6 @@ The most fundamental component for building a UI.
     showArgsController={false}
     metaData={{
       code: `
-      <>
        <View p="$4">
       <Heading>
         A component library for the{" "}
@@ -39,7 +36,6 @@ The most fundamental component for building a UI.
         gives you building blocks to build you React applications.
       </Text>
     </View>
-</>
 `,
       transformCode: (code) => {
         return transformedCode(code);
@@ -76,7 +72,7 @@ export default () => <View></View>;
 
 ### Props
 
-gluestack-ui View component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below.
+gluestack-ui View component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
 #### View
 
diff --git a/example/storybook/src/recipes/card/index.stories.mdx b/example/storybook/src/recipes/card/index.stories.mdx
index 0db64a9d0e..0b3b930646 100644
--- a/example/storybook/src/recipes/card/index.stories.mdx
+++ b/example/storybook/src/recipes/card/index.stories.mdx
@@ -16,15 +16,8 @@ import {
   Alert,
 } from '@gluestack/design-system';
 import Wrapper from '../../components/Wrapper';
-import {
-  Box,
-  Image,
-  VStack,
-  Text,
-  Heading,
-  Link,
-  config,
-} from '@gluestack-ui/themed';
+import { Box, Image, VStack, Text, Heading, Link } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
 
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
@@ -38,7 +31,7 @@ A card is a flexible and extensible content container. It comes in caries shapes
 
 A card component is a common and widely used UI element which helps to display related information or content in a visually cohesive and organized manner. Below is the implementation of card component usign `gluestack-ui`.
 
-<AppProvider config={config.theme}>
+<AppProvider config={config}>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
diff --git a/example/storybook/src/resources/todo-list/index.stories.mdx b/example/storybook/src/resources/todo-list/index.stories.mdx
index 8d067b3982..de126999e3 100644
--- a/example/storybook/src/resources/todo-list/index.stories.mdx
+++ b/example/storybook/src/resources/todo-list/index.stories.mdx
@@ -13,8 +13,8 @@ import {
   AddIcon,
   Button,
   Box,
-  config,
 } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
 import { transformedCode } from '../../utils';
 import Wrapper from '../../components/Wrapper';
 import {
diff --git a/example/storybook/src/styling/overview/index.stories.mdx b/example/storybook/src/styling/overview/index.stories.mdx
index 7e5498f525..0621ef4d52 100644
--- a/example/storybook/src/styling/overview/index.stories.mdx
+++ b/example/storybook/src/styling/overview/index.stories.mdx
@@ -9,39 +9,48 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 # Styling Overview
 
-All the components of `@gluestack-ui/themed` by default are styled. Default styling is provided by our styling engine [@gluestack-style/react](https://style.gluestack.io/docs/overview/introduction) and it is defined in [`gluestack-ui.config.ts`](https://github.com/gluestack/gluestack-ui/blob/main/example/storybook/src/gluestack-ui.config.ts) file. Config file exports an object which is passed inside the `GluetackUIProvider`(a Wrapper component that applies the theme to all the children).
+All the components of [**`@gluestack-ui/themed`**](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed) by default are unstyled. Styling is provided by our styling engine [**`@gluestack-style/react`**](https://style.gluestack.io/docs/overview/introduction) by passing [`config`](https://github.com/gluestack/gluestack-ui/blob/main/packages/config/src/gluestack-ui.config.ts) file from [**`@gluestack-ui/config`**](https://github.com/gluestack/gluestack-ui/blob/main/packages/config). Config file exports an object which is passed inside the `GluetackUIProvider`(a Wrapper component that applies the theme to all the children).
 
 ```jsx
-import { config, GluestackUIProvider } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
+import { GluestackUIProvider } from '@gluestack-ui/themed';
 
 function App({ children }) {
-  return <GluestackUIProvider>{children}</GluestackUIProvider>;
+  return <GluestackUIProvider config={config}>{children}</GluestackUIProvider>;
 }
 ```
 
 The imported config contains a theme object which contains all the configuration, the structure looks something like the following:
 
-```bash
+```json
 {
-  "theme": {
-    "aliases": {
-      # Adding bg as alias of background Color
-      "bg": "backgroundColor"
-    },
-    "tokens": {
-      # All the tokens are defined here like colors, borderWidths, radii, breakpoints, mediaQueries ....
-    },
-    "globalStyle": {
-      # All the global style is defined here
-    }
-  }
+  "aliases": {
+    # Adding bg as alias of background Color
+    "bg": "backgroundColor"
+  },
+  "tokens": {
+    # All the tokens are defined here like colors, borderWidths, radii, breakpoints, mediaQueries ....
+  },
+  "globalStyle": {
+    # All the global style is defined here
+  },
+  "components": {
+    # All the components style is defined here
+  },
+  "themes": {
+    # All the themes are defined here
+  },
 }
 ```
 
-The theme object has aliases, tokens and global style.
+The theme object has aliases, tokens ,global style, components and themes.
 
-- aliases: This is useful when you want to use a shorter name for a token. For example, you can use bg instead of backgroundColor for the backgroundColor token.
+- [aliases](https://gluestack.io/style/docs/configuration/theme-tokens): This is useful when you want to use a shorter name for a token. For example, you can use bg instead of backgroundColor for the backgroundColor token.
 
-- tokens: This is where you define your design tokens. Tokens helps us to maintain consistent designs.
+- [tokens](https://gluestack.io/style/docs/configuration/theme-tokens): This is where you define your design tokens. Tokens helps us to maintain consistent designs.
 
-- globalStyle: The styles written inside globalStyle are applied globally in the application.
+- [globalStyle](https://gluestack.io/style/docs/configuration/global-style): The styles written inside globalStyle are applied globally in the application.
+
+- [components](https://gluestack.io/style/docs/configuration/customizing-components): This is where you can add component specific styling
+
+- [themes](https://gluestack.io/style/docs/configuration/themes): Here you can create themes for your app with different values for a particular token for more flexibility and reusability of tokens.
diff --git a/example/storybook/src/styling/responsive/index.stories.mdx b/example/storybook/src/styling/responsive/index.stories.mdx
index 875eeaf54f..e65217d37d 100644
--- a/example/storybook/src/styling/responsive/index.stories.mdx
+++ b/example/storybook/src/styling/responsive/index.stories.mdx
@@ -27,9 +27,9 @@ import {
 
 # Responsive
 
-gluestack-ui components are responsive, to manage that we define different **breakpoints** according to which styles are applied.
+**`@gluestack-ui/themed`** components are responsive, once we pass the default [`config`](https://github.com/gluestack/gluestack-ui/blob/main/packages/config/src/gluestack-ui.config.ts) file imported from [**`@gluestack-ui/config`**](https://github.com/gluestack/gluestack-ui/blob/main/packages/config) to `GluetackUIProvider`, were we have defined different **breakpoints** according to which styles can be applied.
 
-By default gluestack-ui provide basic breakpoint.
+Basic breakpoints defined in `config` imported from **`@gluestack-ui/config`**.
 
 ```jsx
 mediaQueries: {
diff --git a/example/storybook/src/styling/state/index.stories.mdx b/example/storybook/src/styling/state/index.stories.mdx
index 87fcfb24ce..87b4b84434 100644
--- a/example/storybook/src/styling/state/index.stories.mdx
+++ b/example/storybook/src/styling/state/index.stories.mdx
@@ -16,7 +16,6 @@ import {
 } from '@gluestack-ui/themed';
 import { transformedCode, transformedThemedCode } from '../../utils';
 import Wrapper from '../../components/Wrapper';
-
 import {
   AppProvider,
   CodePreview,
@@ -27,8 +26,7 @@ import {
 
 # States
 
-Styling of gluestack-ui components is done with help of [gluestack-style](https://style.gluestack.io/).
-gluestack-style provides different features that help us to manage **state**, **color mode**, **responsiveness** and much more. Right now we will discuss how does gluestack style helps us to manage states like hover, active, focused etc.
+Styling of gluestack-ui components is achieved through the utilization of [**`@gluestack-style/react`**](https://style.gluestack.io/), a resource that provides a range of capabilities for effectively controlling states like **hover**, **active**, **focused**, and others. You can pass [`config`](https://github.com/gluestack/gluestack-ui/blob/main/packages/config/src/gluestack-ui.config.ts) file from [**`@gluestack-ui/config`**](https://github.com/gluestack/gluestack-ui/blob/main/packages/config) for default state styling. Config file exports an object which is passed inside the `GluetackUIProvider`. In this context, we will delve into how gluestack-style simplifies the management of these states and their associated styles.
 
 Easiest way to change styling of states would be using `sx` prop which enables state management.
 
@@ -61,7 +59,7 @@ Easiest way to change styling of states would be using `sx` prop which enables s
 
 <br />
 
-We can define styles that can be applied on different states and pass them as an object in `sx` prop.
+We can define styles that can be applied on different states and pass them as an object in `sx` prop. For more details, checkout [State Based Styles](https://gluestack.io/style/docs/api/state-bases-styles) documentation.
 
 ### Supported States are
 
diff --git a/example/storybook/src/styling/utility-and-sx-props/index.stories.mdx b/example/storybook/src/styling/utility-and-sx-props/index.stories.mdx
index 92d48b1528..9905471afa 100644
--- a/example/storybook/src/styling/utility-and-sx-props/index.stories.mdx
+++ b/example/storybook/src/styling/utility-and-sx-props/index.stories.mdx
@@ -26,16 +26,14 @@ import {
 import { transformedCode } from '../../utils';
 import Wrapper from '../../components/Wrapper';
 import { styled } from '@gluestack-style/react';
-
 import { Pressable, Text, View, Image, StyleSheet } from 'react-native';
-// import the createButton function
 import { createButton } from '@gluestack-ui/button';
 
 <Meta title="Styling/Utility and SX props" />
 
 # Utility Props
 
-React Native has a great StyleSheet API which is optimal for component-based systems. [@gluestack-style/react](https://style.gluestack.io) leverages it and adds a layer of utility props and constraint based designed tokens on top of it. `@gluestack-style/react` is used as styling engine for `@gluestack-ui/themed`.
+React Native has a great StyleSheet API which is optimal for component-based systems. [**`@gluestack-style/react`**](https://style.gluestack.io) leverages it and adds a layer of utility props and constraint based designed tokens on top of it. **gluestack-style** is used as styling engine for [**`@gluestack-ui/themed`**](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed).
 To understand utility props, let's take an example.
 
 ### With React Native (without gluestack-ui)
@@ -136,8 +134,9 @@ Let's try the traditional way of building the following card in React Native.
 
 ### With gluestack-ui
 
-Now let's try to build the same card using `@gluestack-ui/themed`.
-By using `@gluestack-ui/themed` components, you can apply styles directly in the layout using shorthands.
+Let's try to build the same card using **`@gluestack-ui/themed`**. Since it is unstyled by default, we'll need to provide the [`config`](https://github.com/gluestack/gluestack-ui/blob/main/packages/config/src/gluestack-ui.config.ts) file from **`@gluestack-ui/config`** to the `GluetackUIProvider`. All the aliases are defined in config.
+
+Once this is set up, you can easily apply styles to the layout using shorthands when working with **`@gluestack-ui/themed`** components.
 
 <AppProvider>
   <CodePreview
diff --git a/example/storybook/src/styling/variants/index.stories.mdx b/example/storybook/src/styling/variants/index.stories.mdx
index b199b4397c..b40a6a8e7f 100644
--- a/example/storybook/src/styling/variants/index.stories.mdx
+++ b/example/storybook/src/styling/variants/index.stories.mdx
@@ -8,10 +8,10 @@ import {
   Box,
   Button,
   GluestackUIProvider,
-  config,
   VStack,
   ButtonText,
 } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
 import { createConfig } from '@gluestack-ui/themed';
 import { transformedCode } from '../../utils';
 import Wrapper from '../../components/Wrapper';
@@ -28,12 +28,11 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 # Variants
 
-Creating variants of components in a UI component library is crucial for maintaining a consistent user experience across `web`, `iOS`, and `Android` platforms.
-We can create different variants of components using gluestack-style.
+Creating variants of components in a UI component library is crucial for maintaining a consistent user experience across `web`, `iOS`, and `android` platforms. We can create different variants of components using **gluestack-style**.
 
-To update components styles, we need to create a new which extends the default config and we can style the components aditionally.
+To update components styles, we need to create a new config which extends the default [`config`](https://github.com/gluestack/gluestack-ui/blob/main/packages/config/src/gluestack-ui.config.ts) file imported from [**`@gluestack-ui/config`**](https://github.com/gluestack/gluestack-ui/blob/main/packages/config) and pass it inside the `GluetackUIProvider`, then we can style the components aditionally.
 
-To create a new variant of a Button Component, just import the `createConfig` function from `@gluestack-style/react` and the pass the below object to the function. Inside the components object define the component name which is imported from `@gluestack-ui/themed` library, and then all the styles that needs to be applied on the component.
+To create a new variant of a Button Component, just import the `createConfig` function from **`@gluestack-style/react`** and the pass the below object to the function. Inside the components object define the component name which is imported from **`@gluestack-ui/themed`** library, and then all the styles that needs to be applied on the component.
 
 ```jsx
  {
@@ -70,7 +69,7 @@ To create a new variant of a Button Component, just import the `createConfig` fu
      function App(){
       {/* Creating own theme using createConfig function */}
    const themeConfig = createConfig({
-    ...config.theme,
+    ...config,
     components: {
       Button: {
         // write same component name which is passed in styled
@@ -127,6 +126,6 @@ To create a new variant of a Button Component, just import the `createConfig` fu
   />
 </AppProvider>
 
-You can refer to [this](/docs/theme/customizing-components) link for detailed information related to customizing theme of components.
+You can refer to [this](/ui/docs/theme/customizing-components) link for detailed information related to customizing theme of components.
 
 Refer to [this](https://snack.expo.dev/@gluestack/variants-example) for live expo snack example.
diff --git a/example/storybook/src/theme-configuration/customizing-theme/CustomComponent.tsx b/example/storybook/src/theme-configuration/customizing-theme/CustomComponent.tsx
new file mode 100644
index 0000000000..8828fa83ab
--- /dev/null
+++ b/example/storybook/src/theme-configuration/customizing-theme/CustomComponent.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  Button as DefaultButton,
+  Box,
+  ButtonText as DefaultButtonText,
+  Center,
+  StyledProvider,
+  createConfig,
+  styled,
+  createComponents,
+} from '@gluestack-ui/themed';
+
+import { config as defaultConfig } from '@gluestack-ui/config';
+import { createProvider } from '@gluestack-ui/provider';
+const Provider = createProvider({ StyledProvider }) as any;
+Provider.displayName = 'CustomProvider';
+
+const componentTheme = createComponents({
+  ...defaultConfig.components,
+  Button: {
+    theme: {
+      variants: {
+        variant: {
+          ghost: {
+            bg: 'transparent',
+          },
+        },
+      },
+    },
+    componentConfig: {
+      descendantStyle: ['_text'],
+    },
+  },
+});
+
+const config = createConfig({
+  ...defaultConfig,
+  tokens: {
+    ...defaultConfig.tokens,
+    colors: {
+      ...defaultConfig.tokens.colors,
+      primary600_alpha_10: '#1a91ff1a',
+      primary600_alpha_20: '#1a91ff33',
+    },
+  },
+  components: {
+    ...componentTheme,
+  },
+});
+
+const Wrapper = ({ children }: any) => {
+  return (
+    <Provider config={config} colorMode="dark">
+      <Box
+        sx={{
+          _ios: {
+            h: '100%',
+          },
+        }}
+      >
+        <Center h="100%">{children}</Center>
+      </Box>
+    </Provider>
+  );
+};
+
+const Button = styled(
+  DefaultButton,
+  {},
+  {
+    componentName: 'Button',
+  }
+);
+const ButtonText = styled(
+  DefaultButtonText,
+  {},
+  {
+    componentName: 'ButtonText',
+  }
+);
+
+export { Button, ButtonText, Wrapper };
diff --git a/example/storybook/src/theme/customizing-tokens/CustomTheme.tsx b/example/storybook/src/theme-configuration/customizing-theme/CustomTheme.tsx
similarity index 87%
rename from example/storybook/src/theme/customizing-tokens/CustomTheme.tsx
rename to example/storybook/src/theme-configuration/customizing-theme/CustomTheme.tsx
index 64ef9c5d1f..9b4ad4208d 100644
--- a/example/storybook/src/theme/customizing-tokens/CustomTheme.tsx
+++ b/example/storybook/src/theme-configuration/customizing-theme/CustomTheme.tsx
@@ -3,21 +3,21 @@ import {
   Box as DefaultBox,
   Center,
   StyledProvider,
-  config as defaultConfig,
   createConfig,
   styled,
 } from '@gluestack-ui/themed';
+import { config as defaultConfig } from '@gluestack-ui/config';
 import { createProvider } from '@gluestack-ui/provider';
 const Provider = createProvider({ StyledProvider }) as any;
 Provider.displayName = 'CustomProvider';
 
 const Box = styled(DefaultBox, {}, {});
 const config = createConfig({
-  ...defaultConfig.theme,
+  ...defaultConfig,
   tokens: {
-    ...defaultConfig.theme.tokens,
+    ...defaultConfig.tokens,
     colors: {
-      ...defaultConfig.theme.tokens.colors,
+      ...defaultConfig.tokens.colors,
       primary0: '#ffffff',
       primary50: '#a3fff4',
       primary100: '#82fff0',
diff --git a/example/storybook/src/theme-configuration/customizing-theme/index.stories.mdx b/example/storybook/src/theme-configuration/customizing-theme/index.stories.mdx
new file mode 100644
index 0000000000..0d825ac79b
--- /dev/null
+++ b/example/storybook/src/theme-configuration/customizing-theme/index.stories.mdx
@@ -0,0 +1,188 @@
+---
+title: Customizing Theme
+description: Customizing the theme in gluestack-ui involves defining a theme configuration and applying it using GluestackUIProvider, enabling you to style your application's visual elements according to your design preferences.
+showHeader: true
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Box, Wrapper as CustomThemeWrapper } from './CustomTheme';
+import {
+  Button,
+  ButtonText,
+  Wrapper as CustomComponentTheme,
+} from './CustomComponent';
+import { transformedCode } from '../../utils';
+import { AppProvider, CodePreview, Text } from '@gluestack/design-system';
+
+<Meta title="Theme Configuration/Customizing Theme" />
+
+The `@gluestack-ui/themed` UI library is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer. For users looking for a seamless integration experience, we offer the `@gluestack-ui/config` package, which comes with pre-configured theme that can easily be integrated with `@gluestack-ui/themed` for a convenient styling solution.
+
+## Customizing Tokens
+
+Customizing tokens allows you to tailor the core design elements of the `@gluestack-ui/themed` library to match your project's unique visual identity. To customize tokens, follow these steps:
+
+1. **Eject Theme**: Run following command to eject the theme. This will create a config folder in your project root directory.
+
+```bash
+npx gluestack-ui-scripts eject-theme
+```
+
+2. **Update Tokens**: go to `config/gluestack-ui.config.ts` file. Update the tokens as per your requirements.
+
+```jsx
+//gluestack-ui.config.ts
+
+export const config = createConfig({
+  // ...Theme config
+  tokens: {
+    colors: {
+      // replacing primary color
+      primary0: '#ffffff',
+      primary50: '#a3fff4',
+      primary100: '#82fff0',
+      primary200: '#61ffed',
+      primary300: '#45fae5',
+      primary400: '#24f9e1',
+      primary500: '#17f3d9',
+      primary600: '#12e4cb',
+      primary700: '#17ccb7',
+      primary800: '#1ab5a3',
+      primary900: '#1c9f90',
+      primary950: '#000000',
+    },
+  },
+});
+```
+
+3. **Apply Config**: Apply the config to the `GluestackUIProvider`.
+
+```jsx
+// App.tsx
+import { GluestackUIProvider } from '@gluestack-ui/themed';
+import { config } from './config/gluestack-ui.config';
+
+function App() {
+  return (
+    <GluestackUIProvider config={config}>
+      {/* Your app code here */}
+    </GluestackUIProvider>
+  );
+}
+```
+
+You can customize all the tokens of the theme in `config`. For a complete list of tokens and default values, please check [default Tokens](https://gluestack.io/ui/docs/theme/default-tokens).
+
+By utilizing this approach, you can seamlessly modify the primary color tokens of the theme while maintaining the overall theme configuration intact.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+<Box
+  bg="$primary500"
+  p="$5"
+  rounded="$lg"
+>
+  <Text color="$primary700">
+    Box with new primary color
+  </Text>
+</Box>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper: CustomThemeWrapper,
+        Box,
+        Text,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+## Customizing Components
+
+Customizing components allows you to fine-tune the appearance and behavior of individual UI components within the `@gluestack-ui/themed`. To customize components, follow these steps:
+
+1. **Eject Theme**: Run following command to eject the theme. This will create a config folder
+
+```bash
+npx gluestack-ui-scripts eject-theme
+```
+
+2. **Update Tokens**: you can find all of your components theme inside `config/theme` folder. you can find theme file for each component. For example, if you want to customize `Button` component, you can find its theme file at `config/theme/Button.ts`. Update component theme as per your requirements.
+
+3. **Apply Config**: Apply the config to the `GluestackUIProvider`.
+
+```jsx
+// App.tsx
+import { GluestackUIProvider, Button, ButtonText } from '@gluestack-ui/themed';
+import { config } from './config/gluestack-ui.config';
+
+function App() {
+  return (
+    <GluestackUIProvider config={config}>
+      <Button>
+        <ButtonText>Button</ButtonText>
+      </Button>
+    </GluestackUIProvider>
+  );
+}
+```
+
+## Customizing Animations
+
+Customizing animations allows you to change the animation behavior of all the animatable UI components within the `@gluestack-ui/themed`. Currently customization is limited to the using `moti` or `legend-motion` for Animated Components and is supported via a driver plugin system, To customize animations, follow these steps:
+
+1. **Eject Theme**: Run following command to eject the theme. This will create a config folder
+
+```bash
+npx gluestack-ui-scripts eject-theme
+```
+
+2. **Update Plugins**: go to `config/gluestack-ui.config.ts` file. Update the `plugins` property as per your requirements.
+
+```jsx
+//gluestack-ui.config.ts
+
+import { config as defaultConfig } from '@gluestack-ui/config';
+import { createConfig } from '@gluestack-ui/themed';
+import { AnimationResolver } from '@gluestack-style/animation-resolver';
+import { MotionDriver } from '@gluestack-style/legend-motion-animation-driver';
+import { MotiDriver } from '@gluestack-style/moti-animation-driver';
+
+export const config = createConfig({
+  ...defaultConfig
+  plugins: [
+    ...defaultConfig.plugins,
+    // using legend-motion
+    new AnimationResolver(MotionDriver,{
+      // You can override animated aliases here if you want by default driver have support for all the animated components aliases required.
+    }),
+    // using moti
+    // new AnimationResolver(MotiDriver),
+  ],
+});
+```
+
+3. **Apply Config**: Apply the config to the `GluestackUIProvider`.
+
+```jsx
+// App.tsx
+import { GluestackUIProvider, Button, ButtonText } from '@gluestack-ui/themed';
+import { config } from './config/gluestack-ui.config';
+
+function App() {
+  return (
+    <GluestackUIProvider config={config}>
+      <Button>
+        <ButtonText>Button</ButtonText>
+      </Button>
+    </GluestackUIProvider>
+  );
+}
+```
diff --git a/example/storybook/src/theme/overview/index.stories.mdx b/example/storybook/src/theme-configuration/overview/index.stories.mdx
similarity index 88%
rename from example/storybook/src/theme/overview/index.stories.mdx
rename to example/storybook/src/theme-configuration/overview/index.stories.mdx
index 97bf07bf4a..4d814b21ed 100644
--- a/example/storybook/src/theme/overview/index.stories.mdx
+++ b/example/storybook/src/theme-configuration/overview/index.stories.mdx
@@ -5,7 +5,7 @@ description: Theme Overview
 
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
-<Meta title="Theme/Overview" />
+<Meta title="Configuration Theme/Overview" />
 
 # Theme Overview
 
@@ -29,15 +29,12 @@ You can also customize your own theme by extending default theme by using create
 
 ```jsx
 // gluestack-ui.config.ts
-import {
-  config as defaultConfig,
-  createConfig,
-} from '@gluestack-ui/themed';
-
+import { createConfig } from '@gluestack-ui/themed';
+import { config as defaultConfig } from "@gluestack-ui/config";
 export const config = createConfig({
-  ...defaultConfig.theme,
+  ...defaultConfig,
   aliases: {
-    ...defaultConfig.theme.aliases,
+    ...defaultConfig.aliases,
     jc: 'justifyContent',
   },
 });
@@ -76,13 +73,11 @@ You can add custom theme for components by extending default config and adding t
 
 ```jsx
 // gluestack-ui.config.ts
-import {
-  config as defaultConfig,
-  createConfig,
-} from '@gluestack-ui/themed';
+import { createConfig } from '@gluestack-ui/themed';
+import { config as defaultConfig } from "@gluestack-ui/config";
 
 export const config = createConfig({
-  ...defaultConfig.theme,
+  ...defaultConfig,
   components: {
     Button: {
       theme: {
@@ -131,12 +126,13 @@ If you want to switch theme on the fly, you will need to create multiple theme i
 
 ```jsx
 // gluestack-ui.config.ts
-import { createConfig, config as defaultConfig } from '@gluestack-ui/themed';
+import { createConfig } from '@gluestack-ui/themed';
+import { config as defaultConfig } from "@gluestack-ui/config";
 
 export const config = createConfig({
-  ...defaultConfig.theme,
+  ...defaultConfig,
   themes: {
-    ...defaultConfig.theme.themes,
+    ...defaultConfig.themes,
     classic: {
       colors: {
         $primary: '$colors.$brown400',
@@ -197,15 +193,13 @@ You add global styles by extending default config and adding your own global sty
 
 ```jsx
 // gluestack-ui.config.ts
-import {
-  config as defaultConfig,
-  createConfig,
-} from '@gluestack-ui/themed';
+import { createConfig } from '@gluestack-ui/themed';
+import { config as defaultConfig } from "@gluestack-ui/config";
 
 export const config = createConfig({
-  ...defaultConfig.theme,
+  ...defaultConfig,
   globalStyles: {
-    ...defaultConfig.theme.globalStyles,
+    ...defaultConfig.globalStyles,
     variants: {
       variant: {
         blackBackground: {
diff --git a/example/storybook/src/theme-configuration/theme/default-components/index.stories.mdx b/example/storybook/src/theme-configuration/theme/default-components/index.stories.mdx
new file mode 100644
index 0000000000..7ef564cc74
--- /dev/null
+++ b/example/storybook/src/theme-configuration/theme/default-components/index.stories.mdx
@@ -0,0 +1,28 @@
+---
+title: Defalut Components
+description: gluestack-ui ships with defalut components theme that provide access to theme values.
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta title="Theme Configuration/Theme/Default Components" />
+
+# Default Components
+
+The `@gluestack-ui/config` package comes with a pre-configured default theme, which can be integrated with the `GluestackUIProvider` as demonstrated below.
+
+### Usage
+
+```jsx
+import { config } from '@gluestack-ui/config';
+
+function App() {
+  return (
+    <GluestackUIProvider config={config}>
+      {/* Your app code */}
+    </GluestackUIProvider>
+  );
+}
+```
+
+You can view default theme config [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/config). To see all the components with the default theme, please visit [All Components](https://gluestack.io/ui/docs/overview/all-components) section."
diff --git a/example/storybook/src/theme/default-tokens/DefaultComponent.tsx b/example/storybook/src/theme-configuration/theme/default-tokens/DefaultComponent.tsx
similarity index 96%
rename from example/storybook/src/theme/default-tokens/DefaultComponent.tsx
rename to example/storybook/src/theme-configuration/theme/default-tokens/DefaultComponent.tsx
index 9da23c216a..8f67152fcf 100644
--- a/example/storybook/src/theme/default-tokens/DefaultComponent.tsx
+++ b/example/storybook/src/theme-configuration/theme/default-tokens/DefaultComponent.tsx
@@ -4,13 +4,13 @@ import {
   VStack,
   HStack,
   Box,
-  config,
   GluestackUIProvider,
   Heading,
   Divider,
 } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
 
-const colors: any = config.theme?.tokens.colors;
+const colors: any = config.tokens.colors;
 
 const colorPalette: any = {
   primary: {},
@@ -71,7 +71,7 @@ const ColorPaletteComponent = () => {
                 {Object.keys(sortedColorPalette[category]).map(
                   (shade: string) => {
                     return (
-                      <HStack flexBasis="30%">
+                      <HStack flexBasis="30%" key={shade}>
                         <Box
                           key={shade}
                           bg={sortedColorPalette[category][shade]}
@@ -101,7 +101,7 @@ const ColorPaletteComponent = () => {
   );
 };
 
-const spaces: any = config.theme?.tokens.space;
+const spaces: any = config.tokens.space;
 
 const sortedSpaceObject: any = spaces;
 
@@ -188,7 +188,7 @@ const SpaceComponent = () => {
   );
 };
 
-const opacity: any = config.theme?.tokens.opacity;
+const opacity: any = config.tokens.opacity;
 
 const OpacityComponent = () => {
   return (
@@ -313,7 +313,7 @@ const ShadowsComponent = () => {
   );
 };
 
-const borderWidths = config.theme?.tokens.borderWidths;
+const borderWidths = config.tokens.borderWidths;
 const BorderWidthComponent = () => {
   return (
     <GluestackUIProvider>
@@ -348,7 +348,7 @@ const BorderWidthComponent = () => {
   );
 };
 
-const radii = config.theme?.tokens.radii;
+const radii = config.tokens.radii;
 const RadiiComponent = () => {
   return (
     <GluestackUIProvider>
diff --git a/example/storybook/src/theme/default-tokens/index.stories.mdx b/example/storybook/src/theme-configuration/theme/default-tokens/index.stories.mdx
similarity index 87%
rename from example/storybook/src/theme/default-tokens/index.stories.mdx
rename to example/storybook/src/theme-configuration/theme/default-tokens/index.stories.mdx
index 0e20857df5..fc8b77b36f 100644
--- a/example/storybook/src/theme/default-tokens/index.stories.mdx
+++ b/example/storybook/src/theme-configuration/theme/default-tokens/index.stories.mdx
@@ -1,5 +1,5 @@
 ---
-title: Default Tokens | gluestack-ui
+title: Default Tokens
 description: gluestack-ui ships with default tokens that provide access to theme values and lets you build and customize your own themed components. It has colors, typography, size, opacity, shadows, breakpoints and more.
 pageTitle: Default Tokens
 pageDescription: gluestack-ui ships with default tokens that provide access to theme values and lets you build and customize your own themed components. It has colors, typography, size, opacity, shadows, breakpoints and more.
@@ -16,14 +16,12 @@ import {
   RadiiComponent,
 } from './DefaultComponent';
 
-<Meta title="Theme/Default Tokens" />
+<Meta title="Theme Configuration/Theme/Default Tokens" />
 
 Theming in `@gluestack-ui/themed` is based on the [Styled System Theme Specification](https://github.com/system-ui/theme-specification).
 
 ## Colors
 
-You can define your unique colors or override existing ones using the `createConfig` function under the `tokens` section.
-
 We recommend adding a palette that ranges from 50 to 900. Tools like [JSON Color Palette Generator](https://json-color-palette-generator.vercel.app), [Smart Swatch](https://smart-swatch.netlify.app/) or [Palx](https://palx.jxnblk.com/) are available to generate these palettes.
 
 <ColorPaletteComponent />
@@ -39,14 +37,15 @@ To manage Typography options, the tokens object supports the following keys:
 - `letterSpacings`
 
 ```jsx
-import { createConfig, config } from '@gluestack-ui/themed';
+import { createConfig } from '@gluestack-ui/themed';
+import {config as defaultConfig } from '@gluestack-ui/config';
 
-const extendedConfig = createConfig({
-  ...config.theme,
+const config = createConfig({
+  ...defaultConfig,
   tokens: {
-    ...config.theme.tokens,
+    ...defaultConfig.tokens,
     fontSizes: {
-      ...config.theme.tokens.fontSizes,
+      ...defaultConfig.tokens.fontSizes,
       newFontSize: 90,
     },
     ...// other tokens
diff --git a/example/storybook/src/theme/customizing-components/CustomComponent.tsx b/example/storybook/src/theme/customizing-components/CustomComponent.tsx
deleted file mode 100644
index 4ba66d19e6..0000000000
--- a/example/storybook/src/theme/customizing-components/CustomComponent.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from 'react';
-import {
-  Button as DefaultButton,
-  Box,
-  ButtonText as DefaultButtonText,
-  Center,
-  StyledProvider,
-  config as defaultConfig,
-  createConfig,
-  styled,
-} from '@gluestack-ui/themed';
-import { createProvider } from '@gluestack-ui/provider';
-const Provider = createProvider({ StyledProvider }) as any;
-Provider.displayName = 'CustomProvider';
-
-const config = createConfig({
-  ...defaultConfig.theme,
-  tokens: {
-    ...defaultConfig.theme.tokens,
-    colors: {
-      ...defaultConfig.theme.tokens.colors,
-      primary600_alpha_10: '#1a91ff1a',
-      primary600_alpha_20: '#1a91ff33',
-    },
-  },
-
-  components: {
-    Button: {
-      theme: {
-        variants: {
-          variant: {
-            ghost: {
-              'bg': '$transparent',
-              '_text': {
-                color: '$primary600',
-              },
-              ':hover': {
-                _text: {
-                  color: '$primary600',
-                },
-                bg: '$primary600_alpha_10',
-              },
-              ':active': {
-                _text: {
-                  color: '$primary600',
-                },
-                bg: '$primary600_alpha_20',
-              },
-              '_dark': {
-                'bg': '$transparent',
-                '_text': {
-                  color: '$primary600',
-                },
-                ':hover': {
-                  _text: {
-                    color: '$primary600',
-                  },
-                  bg: '$primary600_alpha_10',
-                },
-                ':active': {
-                  _text: {
-                    color: '$primary600',
-                  },
-                  bg: '$primary600_alpha_20',
-                },
-              },
-            },
-          },
-        },
-      },
-      componentConfig: {
-        descendantStyle: ['_text'],
-      },
-    },
-  },
-});
-const Wrapper = ({ children }: any) => {
-  return (
-    <Provider config={config} colorMode="dark">
-      <Box
-        sx={{
-          _ios: {
-            h: '100%',
-          },
-        }}
-      >
-        <Center h="100%">{children}</Center>
-      </Box>
-    </Provider>
-  );
-};
-
-const Button = styled(
-  DefaultButton,
-  {},
-  {
-    componentName: 'Button',
-  }
-);
-const ButtonText = styled(
-  DefaultButtonText,
-  {},
-  {
-    componentName: 'ButtonText',
-  }
-);
-
-export { Button, ButtonText, Wrapper };
diff --git a/example/storybook/src/theme/customizing-components/index.stories.mdx b/example/storybook/src/theme/customizing-components/index.stories.mdx
deleted file mode 100644
index af90000c75..0000000000
--- a/example/storybook/src/theme/customizing-components/index.stories.mdx
+++ /dev/null
@@ -1,147 +0,0 @@
----
-title: Customizing Components | gluestack-ui
-description: Customizing Components
-showHeader: false
----
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import { Button, ButtonText, Wrapper } from './CustomComponent';
-import { transformedCode } from '../../utils';
-import { AppProvider, CodePreview, Text } from '@gluestack/design-system';
-
-<Meta title="Theme/Customizing Components" />
-
-# Customizing Components
-
-You can add custom theme for components by extending default config and adding theme for specific component in createConfig function.
-
-### Step 1: Create a config file.
-
-Let's create a config file `gluestack-ui.config.ts` in your project and add a new variant for `Button` component called `ghost` as shown below.
-
-```js
-// gluestack-ui.config.ts
-
-import { createConfig, config as defaultConfig, } from '@gluestack-ui/themed';
-
-   const config = createConfig({
-   ...defaultConfig.theme,
-   tokens: {
-     ...defaultConfig.theme.tokens,
-     colors: {
-       ...defaultConfig.theme.tokens.colors,
-       primary600_alpha_10: '#1a91ff1a',
-       primary600_alpha_20: '#1a91ff33',
-     },
-   },
-
-   components: {
-     Button: {
-       theme: {
-         variants: {
-           variant: {
-             ghost: {
-               'bg': 'transparent',
-               '_text': {
-                 color: '$primary600',
-               },
-               ':hover': {
-                 _text: {
-                   color: '$primary600',
-                 },
-                 bg: '$primary600_alpha_10',
-               },
-               ':active': {
-                 _text: {
-                   color: '$primary600',
-                 },
-                 bg: '$primary600_alpha_20',
-               },
-               '_dark': {
-                 'bg': 'transparent',
-                 '_text': {
-                   color: '$primary600',
-                 },
-                 ':hover': {
-                   _text: {
-                     color: '$primary600',
-                   },
-                   bg: '$primary600_alpha_10',
-                 },
-                 ':active': {
-                   _text: {
-                     color: '$primary600',
-                   },
-                   bg: '$primary600_alpha_20',
-                 },
-               },
-             },
-           },
-         },
-       },
-       componentConfig: {
-         descendantStyle: ['_text'],
-       },
-     },
-   },
- });
-
-// Get the type of Config
-type ConfigType = typeof config;
-
-// Extend the internal ui config
-declare module "@gluestack-ui/themed" {
-  interface UIConfig extends ConfigType {}
-}
-```
-
-### Step 2: Use your config.
-
-Import the `config` from `gluestack-ui.config.ts` and pass it to GluestackUIProvider. Now you can use the new variant in Button.
-
-```jsx
-// App.tsx
-import {
-  createConfig,
-  GluestackUIProvider,
-  Button,
-  ButtonText,
-} from '@gluestack-ui/themed';
-import { config } from './gluestack-ui.config.ts';
-
-function App({ children }) {
-  return (
-    <GluestackUIProvider config={config}>
-      <Button variant="ghost">
-        <ButtonText>Hello World</ButtonText>
-      </Button>
-    </GluestackUIProvider>
-  );
-}
-```
-
-By utilizing this approach, you can seamlessly add variant to Button component.
-
-<AppProvider>
-  <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
-<Button variant="ghost">
-    <ButtonText>Hello World</ButtonText>
-</Button>
-`,
-      transformCode: (code) => {
-        return transformedCode(code);
-      },
-      scope: {
-        Wrapper,
-        Button,
-        ButtonText,
-      },
-      argsType: {},
-    }}
-  />
-</AppProvider>
diff --git a/example/storybook/src/theme/customizing-fonts/index.stories.mdx b/example/storybook/src/theme/customizing-fonts/index.stories.mdx
deleted file mode 100644
index 1c2d0a30fc..0000000000
--- a/example/storybook/src/theme/customizing-fonts/index.stories.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Customizing Fonts | gluestack-ui
-description: Customizing Fonts
-tag: coming-soon
----
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-<Meta title="Theme/Customizing Fonts" />
-
-# Customizing Fonts
diff --git a/example/storybook/src/theme/customizing-tokens/index.stories.mdx b/example/storybook/src/theme/customizing-tokens/index.stories.mdx
deleted file mode 100644
index ffaf5af460..0000000000
--- a/example/storybook/src/theme/customizing-tokens/index.stories.mdx
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: Customizing Tokens | gluestack-ui
-description: Customizing Theme description
-showHeader: false
----
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Box, Wrapper } from './CustomTheme';
-import { transformedCode } from '../../utils';
-import { AppProvider, CodePreview, Text } from '@gluestack/design-system';
-
-<Meta title="Theme/Customizing Tokens" />
-
-# Customizing Tokens
-
-`@gluestack-ui/themed` ships with default theme which can found in `config.theme`. It has Colors, Aliases, Typography, Size, Opacity, Shadows, Breakpoint tokens. You can override any of these tokens.
-
-You can customize all the tokens of the theme in `config`. For this recipe we will update primary color token of the theme. In order to change the primary color of the theme, first create a file `gluestack-ui.config.ts`. In this file you need to update the token of `colors` primary. we can do that using createConfig as demonstrated below. Don't forget to add type definition for the new token at the end.
-
-```js
-//gluestack-ui.config.ts
-
-import { createConfig, config as defaultConfig } from '@gluestack-ui/themed';
-const config = createConfig({
-  ...defaultConfig.theme,
-  tokens: {
-    ...defaultConfig.theme.tokens,
-    colors: {
-      ...defaultConfig.theme.tokens.colors,
-      primary0: '#ffffff',
-      primary50: '#a3fff4',
-      primary100: '#82fff0',
-      primary200: '#61ffed',
-      primary300: '#45fae5',
-      primary400: '#24f9e1',
-      primary500: '#17f3d9',
-      primary600: '#12e4cb',
-      primary700: '#17ccb7',
-      primary800: '#1ab5a3',
-      primary900: '#1c9f90',
-      primary950: '#000000',
-    },
-  },
-});
-
-export { config }
-
-// Get the type of Config
-type ConfigType = typeof config;
-
-// Extend the internal ui config
-declare module "@gluestack-ui/themed" {
-  interface UIConfig extends ConfigType {}
-}
-```
-
-By utilizing this approach, you can seamlessly modify the primary color tokens of the theme while maintaining the overall theme configuration intact.
-
-<AppProvider>
-  <CodePreview
-    showComponentRenderer={true}
-    showArgsController={false}
-    metaData={{
-      code: `
-<Box
-  bg="$primary500"
-  p="$5"
-  rounded="$lg"
->
-  <Text color="$primary700">
-    Box with new primary color
-  </Text>
-</Box>
-`,
-      transformCode: (code) => {
-        return transformedCode(code);
-      },
-      scope: {
-        Wrapper,
-        Box,
-        Text,
-      },
-      argsType: {},
-    }}
-  />
-</AppProvider>
diff --git a/example/storybook/src/theme/theme-tokens/index.stories.mdx b/example/storybook/src/theme/theme-tokens/index.stories.mdx
index 4c6c9c4b3b..6d9b0387d6 100644
--- a/example/storybook/src/theme/theme-tokens/index.stories.mdx
+++ b/example/storybook/src/theme/theme-tokens/index.stories.mdx
@@ -87,4 +87,4 @@ function App() {
 
 - tokens: This is where you define your design tokens.
 
-You can refer to [gluestack-style](https://style.gluestack.io/docs/configuration/theme-tokens) for more information aliases, tokens and globalStyle.
+You can refer to [gluestack-style](https://style.gluestack.io/style/docs/configuration/theme-tokens) for more information aliases, tokens and globalStyle.
diff --git a/example/storybook/tsconfig.json b/example/storybook/tsconfig.json
index 8f84525822..374d898a53 100644
--- a/example/storybook/tsconfig.json
+++ b/example/storybook/tsconfig.json
@@ -4,6 +4,7 @@
     "baseUrl": ".",
     "paths": {
       "@gluestack-ui/themed": ["../../packages/themed/src"],
+      "@gluestack-ui/config": ["../../packages/config/src/gluestack-ui.config"],
       "react-native": ["./node_modules/react-native-web"]
     },
     "emitDeclarationOnly": true,
diff --git a/package.json b/package.json
index ab844e19f8..de5f125e4d 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
   "private": true,
   "workspaces": [
-    "packages/*",
-    "example/*"
+    "packages/themed",
+    "example/storybook"
   ],
   "scripts": {
     "dev": "turbo run dev",
diff --git a/packages/config/.npmignore b/packages/config/.npmignore
new file mode 100644
index 0000000000..684ae5d80c
--- /dev/null
+++ b/packages/config/.npmignore
@@ -0,0 +1 @@
+!build
\ No newline at end of file
diff --git a/packages/config/CHANGELOG.md b/packages/config/CHANGELOG.md
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/config/README.md b/packages/config/README.md
new file mode 100644
index 0000000000..143704bb6d
--- /dev/null
+++ b/packages/config/README.md
@@ -0,0 +1,44 @@
+# @gluestack-ui/themed
+
+## Installation
+
+To use gluestack-ui components, all you need to do is install the
+`@gluestack-ui/themed` package:
+
+```sh
+$ yarn add @gluestack-ui/themed @gluestack-style/react react-native-svg@13.4.0
+
+# or
+
+$ npm i @gluestack-ui/themed @gluestack-style/react react-native-svg@13.4.0
+```
+
+## Usage
+
+A button component is a graphical user interface element that enables users to act by clicking or tapping. It can be customized in size, shape, color, and behavior to fit the design of the application or website. Here's an example how to use this package to create one:
+
+```jsx
+import { createButton } from '@gluestack-ui/themed';
+import {
+  Root,
+  Text,
+  Group,
+  GroupHSpacer,
+  GroupVSpacer,
+  Spinner,
+  Icon,
+} from '@gluestack-ui/themed';
+
+export const Button = createButton({
+  Root,
+  Text,
+  Group,
+  GroupHSpacer,
+  GroupVSpacer,
+  Spinner,
+  Icon,
+});
+```
+
+More guides on how to get started are available
+[here](https://ui.gluestack.io/).
diff --git a/packages/config/package.json b/packages/config/package.json
new file mode 100644
index 0000000000..1edba3f82d
--- /dev/null
+++ b/packages/config/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "@gluestack-ui/config",
+  "version": "1.0.0",
+  "main": "build/gluestack-ui.config.js",
+  "types": "build/gluestack-ui.config.d.ts",
+  "module": "build/gluestack-ui.config",
+  "sideEffects": false,
+  "description": "Themed configuration for gluestack-ui components",
+  "keywords": [
+    "react",
+    "native",
+    "react-native",
+    "gluestack-ui",
+    "universal",
+    "headless",
+    "typescript",
+    "component",
+    "android",
+    "ios",
+    "nextjs"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepare": "tsc",
+    "watch": "tsc --watch",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "clean": "rm -rf lib"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@gluestack-style/react": "^0.2.54-alpha.3",
+    "@gluestack-ui/themed": "^0.1.53"
+  },
+  "peerDependencies": {
+    "@gluestack-style/react": ">=0.2",
+    "@gluestack-ui/themed": ">=0.1"
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    }
+  },
+  "dependencies": {}
+}
diff --git a/packages/config/src/gluestack-ui.config.ts b/packages/config/src/gluestack-ui.config.ts
new file mode 100644
index 0000000000..1638d76358
--- /dev/null
+++ b/packages/config/src/gluestack-ui.config.ts
@@ -0,0 +1,721 @@
+import { AnimationResolver } from '@gluestack-style/animation-resolver';
+import { MotionAnimationDriver } from '@gluestack-style/legend-motion-animation-driver';
+import { createConfig, createComponents } from '@gluestack-style/react';
+import * as componentsTheme from './theme';
+
+export const gluestackUIConfig = createConfig({
+  aliases: {
+    bg: 'backgroundColor',
+    bgColor: 'backgroundColor',
+    h: 'height',
+    w: 'width',
+    p: 'padding',
+    px: 'paddingHorizontal',
+    py: 'paddingVertical',
+    pt: 'paddingTop',
+    pb: 'paddingBottom',
+    pr: 'paddingRight',
+    pl: 'paddingLeft',
+    m: 'margin',
+    mx: 'marginHorizontal',
+    my: 'marginVertical',
+    mt: 'marginTop',
+    mb: 'marginBottom',
+    mr: 'marginRight',
+    ml: 'marginLeft',
+    rounded: 'borderRadius',
+  } as const,
+  tokens: {
+    colors: {
+      rose50: '#fff1f2',
+      rose100: '#ffe4e6',
+      rose200: '#fecdd3',
+      rose300: '#fda4af',
+      rose400: '#fb7185',
+      rose500: '#f43f5e',
+      rose600: '#e11d48',
+      rose700: '#be123c',
+      rose800: '#9f1239',
+      rose900: '#881337',
+      pink50: '#fdf2f8',
+      pink100: '#fce7f3',
+      pink200: '#fbcfe8',
+      pink300: '#f9a8d4',
+      pink400: '#f472b6',
+      pink500: '#ec4899',
+      pink600: '#db2777',
+      pink700: '#be185d',
+      pink800: '#9d174d',
+      pink900: '#831843',
+      fuchsia50: '#fdf4ff',
+      fuchsia100: '#fae8ff',
+      fuchsia200: '#f5d0fe',
+      fuchsia300: '#f0abfc',
+      fuchsia400: '#e879f9',
+      fuchsia500: '#d946ef',
+      fuchsia600: '#c026d3',
+      fuchsia700: '#a21caf',
+      fuchsia800: '#86198f',
+      fuchsia900: '#701a75',
+      purple50: '#faf5ff',
+      purple100: '#f3e8ff',
+      purple200: '#e9d5ff',
+      purple300: '#d8b4fe',
+      purple400: '#c084fc',
+      purple500: '#a855f7',
+      purple600: '#9333ea',
+      purple700: '#7e22ce',
+      purple800: '#6b21a8',
+      purple900: '#581c87',
+      violet50: '#f5f3ff',
+      violet100: '#ede9fe',
+      violet200: '#ddd6fe',
+      violet300: '#c4b5fd',
+      violet400: '#a78bfa',
+      violet500: '#8b5cf6',
+      violet600: '#7c3aed',
+      violet700: '#6d28d9',
+      violet800: '#5b21b6',
+      violet900: '#4c1d95',
+      indigo50: '#eef2ff',
+      indigo100: '#e0e7ff',
+      indigo200: '#c7d2fe',
+      indigo300: '#a5b4fc',
+      indigo400: '#818cf8',
+      indigo500: '#6366f1',
+      indigo600: '#4f46e5',
+      indigo700: '#4338ca',
+      indigo800: '#3730a3',
+      indigo900: '#312e81',
+      blue50: '#eff6ff',
+      blue100: '#dbeafe',
+      blue200: '#bfdbfe',
+      blue300: '#93c5fd',
+      blue400: '#60a5fa',
+      blue500: '#3b82f6',
+      blue600: '#2563eb',
+      blue700: '#1d4ed8',
+      blue800: '#1e40af',
+      blue900: '#1e3a8a',
+      lightBlue50: '#f0f9ff',
+      lightBlue100: '#e0f2fe',
+      lightBlue200: '#bae6fd',
+      lightBlue300: '#7dd3fc',
+      lightBlue400: '#38bdf8',
+      lightBlue500: '#0ea5e9',
+      lightBlue600: '#0284c7',
+      lightBlue700: '#0369a1',
+      lightBlue800: '#075985',
+      lightBlue900: '#0c4a6e',
+      darkBlue50: '#dbf4ff',
+      darkBlue100: '#addbff',
+      darkBlue200: '#7cc2ff',
+      darkBlue300: '#4aa9ff',
+      darkBlue400: '#1a91ff',
+      darkBlue500: '#0077e6',
+      darkBlue600: '#005db4',
+      darkBlue700: '#004282',
+      darkBlue800: '#002851',
+      darkBlue900: '#000e21',
+      cyan50: '#ecfeff',
+      cyan100: '#cffafe',
+      cyan200: '#a5f3fc',
+      cyan300: '#67e8f9',
+      cyan400: '#22d3ee',
+      cyan500: '#06b6d4',
+      cyan600: '#0891b2',
+      cyan700: '#0e7490',
+      cyan800: '#155e75',
+      cyan900: '#164e63',
+      teal50: '#f0fdfa',
+      teal100: '#ccfbf1',
+      teal200: '#99f6e4',
+      teal300: '#5eead4',
+      teal400: '#2dd4bf',
+      teal500: '#14b8a6',
+      teal600: '#0d9488',
+      teal700: '#0f766e',
+      teal800: '#115e59',
+      teal900: '#134e4a',
+      emerald50: '#ecfdf5',
+      emerald100: '#d1fae5',
+      emerald200: '#a7f3d0',
+      emerald300: '#6ee7b7',
+      emerald400: '#34d399',
+      emerald500: '#10b981',
+      emerald600: '#059669',
+      emerald700: '#047857',
+      emerald800: '#065f46',
+      emerald900: '#064e3b',
+      green50: '#f0fdf4',
+      green100: '#dcfce7',
+      green200: '#bbf7d0',
+      green300: '#86efac',
+      green400: '#4ade80',
+      green500: '#22c55e',
+      green600: '#16a34a',
+      green700: '#15803d',
+      green800: '#166534',
+      green900: '#14532d',
+      lime50: '#f7fee7',
+      lime100: '#ecfccb',
+      lime200: '#d9f99d',
+      lime300: '#bef264',
+      lime400: '#a3e635',
+      lime500: '#84cc16',
+      lime600: '#65a30d',
+      lime700: '#4d7c0f',
+      lime800: '#3f6212',
+      lime900: '#365314',
+      yellow50: '#fefce8',
+      yellow100: '#fef9c3',
+      yellow200: '#fef08a',
+      yellow300: '#fde047',
+      yellow400: '#facc15',
+      yellow500: '#eab308',
+      yellow600: '#ca8a04',
+      yellow700: '#a16207',
+      yellow800: '#854d0e',
+      yellow900: '#713f12',
+      amber50: '#fffbeb',
+      amber100: '#fef3c7',
+      amber200: '#fde68a',
+      amber300: '#fcd34d',
+      amber400: '#fbbf24',
+      amber500: '#f59e0b',
+      amber600: '#d97706',
+      amber700: '#b45309',
+      amber800: '#92400e',
+      amber900: '#78350f',
+      orange50: '#fff7ed',
+      orange100: '#ffedd5',
+      orange200: '#fed7aa',
+      orange300: '#fdba74',
+      orange400: '#fb923c',
+      orange500: '#f97316',
+      orange600: '#ea580c',
+      orange700: '#c2410c',
+      orange800: '#9a3412',
+      orange900: '#7c2d12',
+      red50: '#fef2f2',
+      red100: '#fee2e2',
+      red200: '#fecaca',
+      red300: '#fca5a5',
+      red400: '#f87171',
+      red500: '#ef4444',
+      red600: '#dc2626',
+      red700: '#b91c1c',
+      red800: '#991b1b',
+      red900: '#7f1d1d',
+      warmGray50: '#fafaf9',
+      warmGray100: '#f5f5f4',
+      warmGray200: '#e7e5e4',
+      warmGray300: '#d6d3d1',
+      warmGray400: '#a8a29e',
+      warmGray500: '#78716c',
+      warmGray600: '#57534e',
+      warmGray700: '#44403c',
+      warmGray800: '#292524',
+      warmGray900: '#1c1917',
+      trueGray50: '#fafafa',
+      trueGray100: '#f5f5f5',
+      trueGray200: '#e5e5e5',
+      trueGray300: '#d4d4d4',
+      trueGray400: '#a3a3a3',
+      trueGray500: '#737373',
+      trueGray600: '#525252',
+      trueGray700: '#404040',
+      trueGray800: '#262626',
+      trueGray900: '#171717',
+      coolGray50: '#f9fafb',
+      coolGray100: '#f3f4f6',
+      coolGray200: '#e5e7eb',
+      coolGray300: '#d1d5db',
+      coolGray400: '#9ca3af',
+      coolGray500: '#6b7280',
+      coolGray600: '#4b5563',
+      coolGray700: '#374151',
+      coolGray800: '#1f2937',
+      coolGray900: '#111827',
+      blueGray50: '#f8fafc',
+      blueGray100: '#f1f5f9',
+      blueGray200: '#e2e8f0',
+      blueGray300: '#cbd5e1',
+      blueGray400: '#94a3b8',
+      blueGray500: '#64748b',
+      blueGray600: '#475569',
+      blueGray700: '#334155',
+      blueGray800: '#1e293b',
+      blueGray900: '#0f172a',
+      tertiary50: '#ecfdf5',
+      tertiary100: '#d1fae5',
+      tertiary200: '#a7f3d0',
+      tertiary300: '#6ee7b7',
+      tertiary400: '#34d399',
+      tertiary500: '#10b981',
+      tertiary600: '#059669',
+      tertiary700: '#047857',
+      tertiary800: '#065f46',
+      tertiary900: '#064e3b',
+      error00: '#FEE9E9',
+      error50: '#FEE2E2',
+      error100: '#FECACA',
+      error200: '#FCA5A5',
+      error300: '#F87171',
+      error400: '#EF4444',
+      error500: '#E63535',
+      error600: '#DC2626',
+      error700: '#B91C1C',
+      error800: '#7F1D1D',
+      error900: '#991B1B',
+      error950: '#220808',
+      success0: '#E4FFF4',
+      success50: '#CAFFE8',
+      success100: '#A2F1C0',
+      success200: '#84D3A2',
+      success300: '#66B584',
+      success400: '#489766',
+      success500: '#348352',
+      success600: '#2A7948',
+      success700: '#206F3E',
+      success800: '#166534',
+      success900: '#14532D',
+      success950: '#071F11',
+      warning50: '#fff7ed',
+      warning100: '#ffedd5',
+      warning200: '#fed7aa',
+      warning300: '#fdba74',
+      warning400: '#fb923c',
+      warning500: '#f97316',
+      warning600: '#ea580c',
+      warning700: '#c2410c',
+      warning800: '#9a3412',
+      warning900: '#7c2d12',
+      info50: '#f0f9ff',
+      info100: '#e0f2fe',
+      info200: '#bae6fd',
+      info300: '#7dd3fc',
+      info400: '#38bdf8',
+      info500: '#0ea5e9',
+      info600: '#0284c7',
+      info700: '#0369a1',
+      info800: '#075985',
+      info900: '#0c4a6e',
+      light50: '#fafaf9',
+      light100: '#f5f5f4',
+      light200: '#e7e5e4',
+      light300: '#d6d3d1',
+      light400: '#a8a29e',
+      light500: '#78716c',
+      light600: '#57534e',
+      light700: '#44403c',
+      light800: '#292524',
+      light900: '#1c1917',
+      primary0: '#E5F1FB',
+      primary50: '#CCE9FF',
+      primary100: '#ADDBFF',
+      primary200: '#7CC2FF',
+      primary300: '#4AA9FF',
+      primary400: '#1A91FF',
+      primary500: '#0077E6',
+      primary600: '#005DB4',
+      primary700: '#004282',
+      primary800: '#002851',
+      primary900: '#011838',
+      primary950: '#000711',
+      secondary0: '#F6F6F6',
+      secondary50: '#F3F3F3',
+      secondary100: '#E9E9E9',
+      secondary200: '#DADADA',
+      secondary300: '#B0B0B0',
+      secondary400: '#737373',
+      secondary500: '#5F5F5F',
+      secondary600: '#525252',
+      secondary700: '#404040',
+      secondary800: '#262626',
+      secondary900: '#171717',
+      secondary950: '#0C0C0C',
+      textLight0: '#FCFCFC',
+      textLight50: '#F5F5F5',
+      textLight100: '#E5E5E5',
+      textLight200: '#DBDBDB',
+      textLight300: '#D4D4D4',
+      textLight400: '#A3A3A3',
+      textLight500: '#8C8C8C',
+      textLight600: '#737373',
+      textLight700: '#525252',
+      textLight800: '#404040',
+      textLight900: '#262626',
+      textLight950: '#171717',
+      textDark0: '#FCFCFC',
+      textDark50: '#F5F5F5',
+      textDark100: '#E5E5E5',
+      textDark200: '#DBDBDB',
+      textDark300: '#D4D4D4',
+      textDark400: '#A3A3A3',
+      textDark500: '#8C8C8C',
+      textDark600: '#737373',
+      textDark700: '#525252',
+      textDark800: '#404040',
+      textDark900: '#262626',
+      textDark950: '#171717',
+      borderDark0: '#FCFCFC',
+      borderDark50: '#F5F5F5',
+      borderDark100: '#E5E5E5',
+      borderDark200: '#DBDBDB',
+      borderDark300: '#D4D4D4',
+      borderDark400: '#A3A3A3',
+      borderDark500: '#8C8C8C',
+      borderDark600: '#737373',
+      borderDark700: '#525252',
+      borderDark800: '#404040',
+      borderDark900: '#262626',
+      borderDark950: '#171717',
+      borderLight0: '#FCFCFC',
+      borderLight50: '#F5F5F5',
+      borderLight100: '#E5E5E5',
+      borderLight200: '#DBDBDB',
+      borderLight300: '#D4D4D4',
+      borderLight400: '#A3A3A3',
+      borderLight500: '#8C8C8C',
+      borderLight600: '#737373',
+      borderLight700: '#525252',
+      borderLight800: '#404040',
+      borderLight900: '#262626',
+      borderLight950: '#171717',
+      backgroundDark0: '#FCFCFC',
+      backgroundDark50: '#F5F5F5',
+      backgroundDark100: '#F1F1F1',
+      backgroundDark200: '#DBDBDB',
+      backgroundDark300: '#D4D4D4',
+      backgroundDark400: '#A3A3A3',
+      backgroundDark500: '#8C8C8C',
+      backgroundDark600: '#737373',
+      backgroundDark700: '#525252',
+      backgroundDark800: '#404040',
+      backgroundDark900: '#262626',
+      backgroundDark950: '#171717',
+      backgroundLight0: '#FCFCFC',
+      backgroundLight50: '#F5F5F5',
+      backgroundLight100: '#F1F1F1',
+      backgroundLight200: '#DBDBDB',
+      backgroundLight300: '#D4D4D4',
+      backgroundLight400: '#A3A3A3',
+      backgroundLight500: '#8C8C8C',
+      backgroundLight600: '#737373',
+      backgroundLight700: '#525252',
+      backgroundLight800: '#404040',
+      backgroundLight900: '#262626',
+      backgroundLight950: '#171717',
+
+      backgroundLightError: '#FEF1F1',
+      backgroundDarkError: '#422B2B',
+      backgroundLightWarning: '#FFF4EB',
+      backgroundDarkWarning: '#412F23',
+      backgroundLightSuccess: '#EDFCF2',
+      backgroundDarkSuccess: '#1C2B21',
+      backgroundLightInfo: '#EBF8FE',
+      backgroundDarkInfo: '#1A282E',
+      backgroundLightMuted: '#F6F6F7',
+      backgroundDarkMuted: '#252526',
+      white: '#FFFFFF',
+      black: '#000000',
+    },
+    space: {
+      'px': '1px',
+      '0': 0,
+      '0.5': 2,
+      '1': 4,
+      '1.5': 6,
+      '2': 8,
+      '2.5': 10,
+      '3': 12,
+      '3.5': 14,
+      '4': 16,
+      '4.5': 18,
+      '5': 20,
+      '6': 24,
+      '7': 28,
+      '8': 32,
+      '9': 36,
+      '10': 40,
+      '11': 44,
+      '12': 48,
+      '16': 64,
+      '20': 80,
+      '24': 96,
+      '32': 128,
+      '40': 160,
+      '48': 192,
+      '56': 224,
+      '64': 256,
+      '72': 288,
+      '80': 320,
+      '96': 384,
+      '1/2': '50%',
+      '1/3': '33.333%',
+      '2/3': '66.666%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      '1/5': '20%',
+      '2/5': '40%',
+      '3/5': '60%',
+      '4/5': '80%',
+      '1/6': '16.666%',
+      '2/6': '33.333%',
+      '3/6': '50%',
+      '4/6': '66.666%',
+      '5/6': '83.333%',
+      'full': '100%',
+    },
+    borderWidths: {
+      '0': 0,
+      '1': 1,
+      '2': 2,
+      '4': 4,
+      '8': 8,
+    },
+    radii: {
+      'none': 0,
+      'xs': 2,
+      'sm': 4,
+      'md': 6,
+      'lg': 8,
+      'xl': 12,
+      '2xl': 16,
+      '3xl': 24,
+      'full': 9999,
+    },
+    breakpoints: {
+      base: 0,
+      sm: 480,
+      md: 768,
+      lg: 992,
+      xl: 1280,
+    },
+    mediaQueries: {
+      base: '@media screen and (min-width: 0)',
+      xs: '@media screen and (min-width: 400px)',
+      sm: '@media screen and (min-width: 480px)',
+      md: '@media screen and (min-width: 768px)',
+      lg: '@media screen and (min-width: 992px)',
+      xl: '@media screen and (min-width: 1280px)',
+    },
+    letterSpacings: {
+      'xs': -0.4,
+      'sm': -0.2,
+      'md': 0,
+      'lg': 0.2,
+      'xl': 0.4,
+      '2xl': 1.6,
+    },
+    lineHeights: {
+      '2xs': 16,
+      'xs': 18,
+      'sm': 20,
+      'md': 22,
+      'lg': 24,
+      'xl': 28,
+      '2xl': 32,
+      '3xl': 40,
+      '4xl': 48,
+      '5xl': 56,
+      '6xl': 72,
+      '7xl': 90,
+    },
+    fontWeights: {
+      hairline: '100',
+      thin: '200',
+      light: '300',
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+      extrabold: '800',
+      black: '900',
+      extraBlack: '950',
+    },
+    fonts: {
+      heading: undefined,
+      body: undefined,
+      mono: undefined,
+    },
+    fontSizes: {
+      '2xs': 10,
+      'xs': 12,
+      'sm': 14,
+      'md': 16,
+      'lg': 18,
+      'xl': 20,
+      '2xl': 24,
+      '3xl': 30,
+      '4xl': 36,
+      '5xl': 48,
+      '6xl': 60,
+      '7xl': 72,
+      '8xl': 96,
+      '9xl': 128,
+    },
+    opacity: {
+      0: 0,
+      5: 0.05,
+      10: 0.1,
+      20: 0.2,
+      25: 0.25,
+      30: 0.3,
+      40: 0.4,
+      50: 0.5,
+      60: 0.6,
+      70: 0.7,
+      75: 0.75,
+      80: 0.8,
+      90: 0.9,
+      95: 0.95,
+      100: 1,
+    },
+  } as const,
+  globalStyle: {
+    variants: {
+      hardShadow: {
+        '1': {
+          shadowColor: '$backgroundLight900',
+          shadowOffset: {
+            width: -2,
+            height: 2,
+          },
+          shadowRadius: 8,
+          shadowOpacity: 0.5,
+          elevation: 10,
+        },
+        '2': {
+          shadowColor: '$backgroundLight900',
+          shadowOffset: {
+            width: 0,
+            height: 3,
+          },
+          shadowRadius: 8,
+          shadowOpacity: 0.5,
+          elevation: 10,
+        },
+        '3': {
+          shadowColor: '$backgroundLight900',
+          shadowOffset: {
+            width: 2,
+            height: 2,
+          },
+          shadowRadius: 8,
+          shadowOpacity: 0.5,
+          elevation: 10,
+        },
+        '4': {
+          shadowColor: '$backgroundLight900',
+          shadowOffset: {
+            width: 0,
+            height: -3,
+          },
+          shadowRadius: 8,
+          shadowOpacity: 0.5,
+          elevation: 10,
+        },
+        // this 5th version is only for toast shadow
+        // temporary
+        '5': {
+          shadowColor: '$backgroundLight900',
+          shadowOffset: {
+            width: 0,
+            height: 3,
+          },
+          shadowRadius: 8,
+          shadowOpacity: 0.2,
+          elevation: 10,
+        },
+      },
+      softShadow: {
+        '1': {
+          shadowColor: '$backgroundLight900',
+          shadowOffset: {
+            width: 0,
+            height: 0,
+          },
+          shadowRadius: 10,
+          shadowOpacity: 0.1,
+          _android: {
+            shadowColor: '$backgroundLight500',
+            elevation: 5,
+            shadowOpacity: 0.05,
+          },
+        },
+        '2': {
+          shadowColor: '$backgroundLight900',
+          shadowOffset: {
+            width: 0,
+            height: 0,
+          },
+          shadowRadius: 20,
+          elevation: 3,
+          shadowOpacity: 0.1,
+          _android: {
+            shadowColor: '$backgroundLight500',
+            elevation: 10,
+            shadowOpacity: 0.1,
+          },
+        },
+        '3': {
+          shadowColor: '$backgroundLight900',
+          shadowOffset: {
+            width: 0,
+            height: 0,
+          },
+          shadowRadius: 30,
+          shadowOpacity: 0.1,
+          elevation: 4,
+          _android: {
+            shadowColor: '$backgroundLight500',
+            elevation: 15,
+            shadowOpacity: 0.15,
+          },
+        },
+        '4': {
+          shadowColor: '$backgroundLight900',
+          shadowOffset: {
+            width: 0,
+            height: 0,
+          },
+          shadowRadius: 40,
+          shadowOpacity: 0.1,
+          elevation: 10,
+          _android: {
+            shadowColor: '$backgroundLight500',
+            elevation: 20,
+            shadowOpacity: 0.2,
+          },
+        },
+      },
+    },
+  },
+  plugins: [new AnimationResolver(MotionAnimationDriver)],
+});
+
+type Config = typeof gluestackUIConfig; // Assuming `config` is defined elsewhere
+
+type Components = typeof componentsConfig;
+
+export const componentsConfig = createComponents(componentsTheme);
+
+export type { UIConfig, UIComponents } from '@gluestack-ui/themed';
+
+export interface IConfig {}
+export interface IComponents {}
+
+declare module '@gluestack-ui/themed' {
+  interface UIConfig extends Omit<Config, keyof IConfig>, IConfig {}
+  interface UIComponents
+    extends Omit<Components, keyof IComponents>,
+      IComponents {}
+}
+
+export const config = {
+  ...gluestackUIConfig,
+  components: componentsConfig,
+};
diff --git a/packages/config/src/theme/Actionsheet.ts b/packages/config/src/theme/Actionsheet.ts
new file mode 100644
index 0000000000..c2bcbee2ae
--- /dev/null
+++ b/packages/config/src/theme/Actionsheet.ts
@@ -0,0 +1,6 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Actionsheet = createStyle({
+  width: '$full',
+  height: '$full',
+});
diff --git a/packages/config/src/theme/ActionsheetBackdrop.ts b/packages/config/src/theme/ActionsheetBackdrop.ts
new file mode 100644
index 0000000000..124c284155
--- /dev/null
+++ b/packages/config/src/theme/ActionsheetBackdrop.ts
@@ -0,0 +1,27 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ActionsheetBackdrop = createStyle({
+  ':initial': {
+    opacity: 0,
+  },
+  ':animate': {
+    opacity: 0.5,
+  },
+  ':exit': {
+    opacity: 0,
+  },
+  'position': 'absolute',
+  'left': 0,
+  'top': 0,
+  'right': 0,
+  'bottom': 0,
+  'bg': '$backgroundLight950',
+  // @ts-ignore
+  '_dark': {
+    bg: '$backgroundDark950',
+  },
+  // @ts-ignore
+  '_web': {
+    cursor: 'default',
+  },
+});
diff --git a/packages/config/src/theme/ActionsheetContent.ts b/packages/config/src/theme/ActionsheetContent.ts
new file mode 100644
index 0000000000..e256f47536
--- /dev/null
+++ b/packages/config/src/theme/ActionsheetContent.ts
@@ -0,0 +1,25 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ActionsheetContent = createStyle({
+  alignItems: 'center',
+  borderTopLeftRadius: '$3xl',
+  borderTopRightRadius: '$3xl',
+  h: '$full',
+  p: '$2',
+  bg: '$backgroundLight0',
+  _sectionHeaderBackground: {
+    bg: '$backgroundLight0',
+  },
+  _dark: {
+    bg: '$backgroundDark900',
+    _sectionHeaderBackground: {
+      bg: '$backgroundDark900',
+    },
+  },
+  _web: {
+    userSelect: 'none',
+  },
+  defaultProps: {
+    hardShadow: '5',
+  },
+});
diff --git a/packages/config/src/theme/ActionsheetDragIndicator.ts b/packages/config/src/theme/ActionsheetDragIndicator.ts
new file mode 100644
index 0000000000..73b8ea6194
--- /dev/null
+++ b/packages/config/src/theme/ActionsheetDragIndicator.ts
@@ -0,0 +1,11 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ActionsheetDragIndicator = createStyle({
+  height: '$1',
+  width: '$16',
+  bg: '$backgroundLight400',
+  rounded: '$full',
+  _dark: {
+    bg: '$backgroundDark500',
+  },
+});
diff --git a/packages/config/src/theme/ActionsheetFlatList.ts b/packages/config/src/theme/ActionsheetFlatList.ts
new file mode 100644
index 0000000000..202cce8889
--- /dev/null
+++ b/packages/config/src/theme/ActionsheetFlatList.ts
@@ -0,0 +1,6 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ActionsheetFlatList = createStyle({
+  w: '$full',
+  h: 'auto',
+});
diff --git a/packages/config/src/theme/ActionsheetIcon.ts b/packages/config/src/theme/ActionsheetIcon.ts
new file mode 100644
index 0000000000..8801500e41
--- /dev/null
+++ b/packages/config/src/theme/ActionsheetIcon.ts
@@ -0,0 +1,12 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ActionsheetIcon = createStyle({
+  props: {
+    size: 'sm',
+  },
+  color: '$backgroundLight500',
+  _dark: {
+    //@ts-ignore
+    color: '$backgroundDark400',
+  },
+});
diff --git a/packages/config/src/theme/ActionsheetIndicatorWrapper.ts b/packages/config/src/theme/ActionsheetIndicatorWrapper.ts
new file mode 100644
index 0000000000..b045d6ba2c
--- /dev/null
+++ b/packages/config/src/theme/ActionsheetIndicatorWrapper.ts
@@ -0,0 +1,7 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ActionsheetIndicatorWrapper = createStyle({
+  py: '$1',
+  w: '$full',
+  alignItems: 'center',
+});
diff --git a/packages/config/src/theme/ActionsheetItem.ts b/packages/config/src/theme/ActionsheetItem.ts
new file mode 100644
index 0000000000..940829fd8a
--- /dev/null
+++ b/packages/config/src/theme/ActionsheetItem.ts
@@ -0,0 +1,53 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ActionsheetItem = createStyle({
+  'p': '$3',
+  'flexDirection': 'row',
+  'alignItems': 'center',
+  'rounded': '$sm',
+  'w': '$full',
+
+  ':disabled': {
+    opacity: 0.4,
+    _web: {
+      // @ts-ignore
+      pointerEvents: 'all !important',
+      cursor: 'not-allowed',
+    },
+  },
+
+  ':hover': {
+    bg: '$backgroundLight50',
+  },
+
+  ':active': {
+    bg: '$backgroundLight100',
+  },
+
+  ':focus': {
+    bg: '$backgroundLight100',
+  },
+
+  '_dark': {
+    ':hover': {
+      bg: '$backgroundDark800',
+    },
+
+    ':active': {
+      bg: '$backgroundDark700',
+    },
+
+    ':focus': {
+      bg: '$backgroundDark700',
+    },
+  },
+
+  '_web': {
+    ':focusVisible': {
+      bg: '$backgroundLight100',
+      _dark: {
+        bg: '$backgroundDark700',
+      },
+    },
+  },
+});
diff --git a/packages/config/src/theme/ActionsheetItemText.ts b/packages/config/src/theme/ActionsheetItemText.ts
new file mode 100644
index 0000000000..45fc139adb
--- /dev/null
+++ b/packages/config/src/theme/ActionsheetItemText.ts
@@ -0,0 +1,12 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ActionsheetItemText = createStyle({
+  mx: '$2',
+  props: {
+    size: 'md',
+  },
+  color: '$textLight800',
+  _dark: {
+    color: '$textDark100',
+  },
+});
diff --git a/packages/config/src/theme/ActionsheetScrollView.ts b/packages/config/src/theme/ActionsheetScrollView.ts
new file mode 100644
index 0000000000..6384e4e1f2
--- /dev/null
+++ b/packages/config/src/theme/ActionsheetScrollView.ts
@@ -0,0 +1,6 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ActionsheetScrollView = createStyle({
+  w: '$full',
+  h: 'auto',
+});
diff --git a/packages/config/src/theme/ActionsheetSectionHeaderText.ts b/packages/config/src/theme/ActionsheetSectionHeaderText.ts
new file mode 100644
index 0000000000..dbf130354f
--- /dev/null
+++ b/packages/config/src/theme/ActionsheetSectionHeaderText.ts
@@ -0,0 +1,11 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ActionsheetSectionHeaderText = createStyle({
+  color: '$textLight500',
+  props: { size: 'xs' },
+  textTransform: 'uppercase',
+  p: '$3',
+  _dark: {
+    color: '$textDark400',
+  },
+});
diff --git a/packages/config/src/theme/ActionsheetSectionList.ts b/packages/config/src/theme/ActionsheetSectionList.ts
new file mode 100644
index 0000000000..a3b2649647
--- /dev/null
+++ b/packages/config/src/theme/ActionsheetSectionList.ts
@@ -0,0 +1,6 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ActionsheetSectionList = createStyle({
+  w: '$full',
+  h: 'auto',
+});
diff --git a/packages/config/src/theme/ActionsheetVirtualizedList.ts b/packages/config/src/theme/ActionsheetVirtualizedList.ts
new file mode 100644
index 0000000000..83859de334
--- /dev/null
+++ b/packages/config/src/theme/ActionsheetVirtualizedList.ts
@@ -0,0 +1,6 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ActionsheetVirtualizedList = createStyle({
+  w: '$full',
+  h: 'auto',
+});
diff --git a/packages/config/src/theme/Alert.ts b/packages/config/src/theme/Alert.ts
new file mode 100644
index 0000000000..fe688bd8c2
--- /dev/null
+++ b/packages/config/src/theme/Alert.ts
@@ -0,0 +1,101 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Alert = createStyle({
+  alignItems: 'center',
+  p: '$3',
+  flexDirection: 'row',
+  borderRadius: '$sm',
+  variants: {
+    action: {
+      error: {
+        bg: '$backgroundLightError',
+        borderColor: '$error300',
+        _icon: {
+          color: '$error500',
+        },
+        _dark: {
+          bg: '$backgroundDarkError',
+          borderColor: '$error700',
+          _icon: {
+            color: '$error500',
+          },
+        },
+      },
+      warning: {
+        bg: '$backgroundLightWarning',
+        borderColor: '$warning300',
+        _icon: {
+          color: '$warning500',
+        },
+        _dark: {
+          bg: '$backgroundDarkWarning',
+          borderColor: '$warning700',
+          _icon: {
+            color: '$warning500',
+          },
+        },
+      },
+      success: {
+        bg: '$backgroundLightSuccess',
+        borderColor: '$success300',
+        _icon: {
+          color: '$success500',
+        },
+        _dark: {
+          bg: '$backgroundDarkSuccess',
+          borderColor: '$success700',
+          _icon: {
+            color: '$success500',
+          },
+        },
+      },
+      info: {
+        bg: '$backgroundLightInfo',
+        borderColor: '$info300',
+        _icon: {
+          color: '$info500',
+        },
+        _dark: {
+          bg: '$backgroundDarkInfo',
+          borderColor: '$info700',
+          _icon: {
+            color: '$info500',
+          },
+        },
+      },
+      muted: {
+        bg: '$backgroundLightMuted',
+        borderColor: '$secondary300',
+        _icon: {
+          color: '$secondary500',
+        },
+        _dark: {
+          bg: '$backgroundDarkMuted',
+          borderColor: '$secondary700',
+          _icon: {
+            color: '$secondary500',
+          },
+        },
+      },
+    },
+
+    variant: {
+      solid: {},
+      outline: {
+        borderWidth: '$1',
+        bg: '$white',
+        _dark: {
+          bg: '$black',
+        },
+      },
+      accent: {
+        borderLeftWidth: '$4',
+      },
+    },
+  },
+
+  defaultProps: {
+    variant: 'solid',
+    action: 'info',
+  },
+});
diff --git a/packages/config/src/theme/AlertDialog.ts b/packages/config/src/theme/AlertDialog.ts
new file mode 100644
index 0000000000..cea7e91c33
--- /dev/null
+++ b/packages/config/src/theme/AlertDialog.ts
@@ -0,0 +1,23 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const AlertDialog = createStyle({
+  w: '$full',
+  h: '$full',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  variants: {
+    size: {
+      xs: { _content: { w: '60%', maxWidth: 360 } },
+      sm: { _content: { w: '70%', maxWidth: 420 } },
+      md: { _content: { w: '80%', maxWidth: 510 } },
+      lg: { _content: { w: '90%', maxWidth: 640 } },
+      full: { _content: { w: '$full' } },
+    },
+  },
+  defaultProps: { size: 'md' },
+
+  _web: {
+    pointerEvents: 'box-none',
+  },
+});
diff --git a/packages/config/src/theme/AlertDialogBackdrop.ts b/packages/config/src/theme/AlertDialogBackdrop.ts
new file mode 100644
index 0000000000..e23ea3d34a
--- /dev/null
+++ b/packages/config/src/theme/AlertDialogBackdrop.ts
@@ -0,0 +1,36 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const AlertDialogBackdrop = createStyle({
+  ':initial': {
+    opacity: 0,
+  },
+  ':animate': {
+    opacity: 0.5,
+  },
+  ':exit': {
+    opacity: 0,
+  },
+  ':transition': {
+    type: 'spring',
+    damping: 18,
+    stiffness: 250,
+    opacity: {
+      type: 'timing',
+      duration: 250,
+    },
+  },
+  'position': 'absolute',
+  'left': 0,
+  'top': 0,
+  'right': 0,
+  'bottom': 0,
+  'bg': '$backgroundLight950',
+  // @ts-ignore
+  '_dark': {
+    bg: '$backgroundDark950',
+  },
+  // @ts-ignore
+  '_web': {
+    cursor: 'default',
+  },
+});
diff --git a/packages/config/src/theme/AlertDialogBody.ts b/packages/config/src/theme/AlertDialogBody.ts
new file mode 100644
index 0000000000..aea93ef00e
--- /dev/null
+++ b/packages/config/src/theme/AlertDialogBody.ts
@@ -0,0 +1,6 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const AlertDialogBody = createStyle({
+  px: '$4',
+  py: '$2',
+});
diff --git a/packages/config/src/theme/AlertDialogCloseButton.ts b/packages/config/src/theme/AlertDialogCloseButton.ts
new file mode 100644
index 0000000000..7283c964c0
--- /dev/null
+++ b/packages/config/src/theme/AlertDialogCloseButton.ts
@@ -0,0 +1,77 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const AlertDialogCloseButton = createStyle({
+  'zIndex': 1,
+  'rounded': '$sm',
+  'p': '$2',
+  '_icon': {
+    color: '$backgroundLight400',
+  },
+  '_text': {
+    color: '$backgroundLight400',
+  },
+  ':hover': {
+    _icon: {
+      color: '$backgroundLight700',
+    },
+    _text: {
+      color: '$backgroundLight700',
+    },
+  },
+
+  ':active': {
+    _icon: {
+      color: '$backgroundLight900',
+    },
+    _text: {
+      color: '$backgroundLight900',
+    },
+  },
+
+  '_dark': {
+    '_icon': {
+      color: '$backgroundLight400',
+    },
+    '_text': {
+      color: '$backgroundLight400',
+    },
+    ':hover': {
+      _icon: {
+        color: '$backgroundDark200',
+      },
+      _text: {
+        color: '$backgroundLight200',
+      },
+    },
+
+    ':active': {
+      _icon: {
+        color: '$backgroundDark100',
+      },
+    },
+  },
+
+  ':focusVisible': {
+    bg: '$backgroundLight100',
+    _icon: {
+      color: '$backgroundLight900',
+    },
+    _text: {
+      color: '$backgroundLight900',
+    },
+    _dark: {
+      bg: '$backgroundDark700',
+      _icon: {
+        color: '$backgroundLight100',
+      },
+      _text: {
+        color: '$backgroundLight100',
+      },
+    },
+  },
+
+  '_web': {
+    outlineWidth: 0,
+    cursor: 'pointer',
+  },
+});
diff --git a/packages/config/src/theme/AlertDialogContent.ts b/packages/config/src/theme/AlertDialogContent.ts
new file mode 100644
index 0000000000..7382937209
--- /dev/null
+++ b/packages/config/src/theme/AlertDialogContent.ts
@@ -0,0 +1,37 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const AlertDialogContent = createStyle({
+  'bg': '$backgroundLight50',
+  'rounded': '$lg',
+  'overflow': 'hidden',
+  //@ts-ignore
+  ':initial': {
+    scale: 0.9,
+    opacity: 0,
+  },
+  ':animate': {
+    scale: 1,
+    opacity: 1,
+  },
+  ':exit': {
+    scale: 0.9,
+    opacity: 0,
+  },
+  ':transition': {
+    type: 'spring',
+    damping: 18,
+    stiffness: 250,
+    opacity: {
+      type: 'timing',
+      duration: 250,
+    },
+  },
+
+  // @ts-ignore
+  '_dark': {
+    bg: '$backgroundDark900',
+  },
+  'defaultProps': {
+    softShadow: '3',
+  },
+});
diff --git a/packages/config/src/theme/AlertDialogFooter.ts b/packages/config/src/theme/AlertDialogFooter.ts
new file mode 100644
index 0000000000..42b9f94ef6
--- /dev/null
+++ b/packages/config/src/theme/AlertDialogFooter.ts
@@ -0,0 +1,13 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const AlertDialogFooter = createStyle({
+  p: '$4',
+  flexDirection: 'row',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  borderColor: '$borderLight300',
+  _dark: {
+    borderColor: '$borderDark700',
+  },
+});
diff --git a/packages/config/src/theme/AlertDialogHeader.ts b/packages/config/src/theme/AlertDialogHeader.ts
new file mode 100644
index 0000000000..5021171042
--- /dev/null
+++ b/packages/config/src/theme/AlertDialogHeader.ts
@@ -0,0 +1,12 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const AlertDialogHeader = createStyle({
+  p: '$4',
+  borderColor: '$borderLight300',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  flexDirection: 'row',
+  _dark: {
+    borderColor: '$borderDark700',
+  },
+});
diff --git a/packages/config/src/theme/AlertIcon.ts b/packages/config/src/theme/AlertIcon.ts
new file mode 100644
index 0000000000..55b39f1984
--- /dev/null
+++ b/packages/config/src/theme/AlertIcon.ts
@@ -0,0 +1,7 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const AlertIcon = createStyle({
+  props: {
+    size: 'md',
+  },
+});
diff --git a/packages/config/src/theme/AlertText.ts b/packages/config/src/theme/AlertText.ts
new file mode 100644
index 0000000000..2d80ff07ec
--- /dev/null
+++ b/packages/config/src/theme/AlertText.ts
@@ -0,0 +1,5 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const AlertText = createStyle({
+  flex: 1,
+});
diff --git a/packages/config/src/theme/Avatar.ts b/packages/config/src/theme/Avatar.ts
new file mode 100644
index 0000000000..1cfc09af61
--- /dev/null
+++ b/packages/config/src/theme/Avatar.ts
@@ -0,0 +1,99 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Avatar = createStyle({
+  borderRadius: '$full',
+  justifyContent: 'center',
+  alignItems: 'center',
+  position: 'relative',
+  bg: '$primary600',
+  variants: {
+    size: {
+      'xs': {
+        w: '$6',
+        h: '$6',
+
+        _badge: {
+          w: '$2',
+          h: '$2',
+        },
+
+        _text: {
+          props: { size: '2xs' },
+        },
+      },
+
+      'sm': {
+        w: '$8',
+        h: '$8',
+
+        _badge: {
+          w: '$2',
+          h: '$2',
+        },
+
+        _text: {
+          props: { size: 'xs' },
+        },
+      },
+
+      'md': {
+        w: '$12',
+        h: '$12',
+
+        _badge: {
+          w: '$3',
+          h: '$3',
+        },
+
+        _text: {
+          props: { size: 'md' },
+        },
+      },
+
+      'lg': {
+        w: '$16',
+        h: '$16',
+
+        _badge: {
+          w: '$4',
+          h: '$4',
+        },
+
+        _text: {
+          props: { size: 'xl' },
+        },
+      },
+
+      'xl': {
+        w: '$24',
+        h: '$24',
+
+        _badge: {
+          w: '$6',
+          h: '$6',
+        },
+
+        _text: {
+          props: { size: '3xl' },
+        },
+      },
+
+      '2xl': {
+        w: '$32',
+        h: '$32',
+
+        _badge: {
+          w: '$8',
+          h: '$8',
+        },
+
+        _text: {
+          props: { size: '5xl' },
+        },
+      },
+    },
+  },
+  defaultProps: {
+    size: 'md',
+  },
+});
diff --git a/packages/config/src/theme/AvatarBadge.ts b/packages/config/src/theme/AvatarBadge.ts
new file mode 100644
index 0000000000..12317ed70c
--- /dev/null
+++ b/packages/config/src/theme/AvatarBadge.ts
@@ -0,0 +1,13 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const AvatarBadge = createStyle({
+  w: '$5',
+  h: '$5',
+  bg: '$success500',
+  borderRadius: '$full',
+  position: 'absolute',
+  right: 0,
+  bottom: 0,
+  borderColor: 'white',
+  borderWidth: 2,
+});
diff --git a/packages/config/src/theme/AvatarFallbackText.ts b/packages/config/src/theme/AvatarFallbackText.ts
new file mode 100644
index 0000000000..7910ce71df
--- /dev/null
+++ b/packages/config/src/theme/AvatarFallbackText.ts
@@ -0,0 +1,14 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const AvatarFallbackText = createStyle({
+  color: '$textLight0',
+  fontWeight: '$semibold',
+  props: {
+    size: 'xl',
+  },
+  overflow: 'hidden',
+  textTransform: 'uppercase',
+  _web: {
+    cursor: 'default',
+  },
+});
diff --git a/packages/config/src/theme/AvatarGroup.ts b/packages/config/src/theme/AvatarGroup.ts
new file mode 100644
index 0000000000..24ca36bfd9
--- /dev/null
+++ b/packages/config/src/theme/AvatarGroup.ts
@@ -0,0 +1,9 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const AvatarGroup = createStyle({
+  flexDirection: 'row-reverse',
+  position: 'relative',
+  _avatar: {
+    ml: -10,
+  },
+});
diff --git a/packages/config/src/theme/AvatarImage.ts b/packages/config/src/theme/AvatarImage.ts
new file mode 100644
index 0000000000..082e385fe8
--- /dev/null
+++ b/packages/config/src/theme/AvatarImage.ts
@@ -0,0 +1,8 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const AvatarImage = createStyle({
+  w: '$full',
+  h: '$full',
+  borderRadius: '$full',
+  position: 'absolute',
+});
diff --git a/packages/config/src/theme/Badge.ts b/packages/config/src/theme/Badge.ts
new file mode 100644
index 0000000000..9ff3f7cc15
--- /dev/null
+++ b/packages/config/src/theme/Badge.ts
@@ -0,0 +1,165 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Badge = createStyle({
+  'flexDirection': 'row',
+  'alignItems': 'center',
+  'borderRadius': '$xs',
+  'variants': {
+    action: {
+      error: {
+        bg: '$backgroundLightError',
+        borderColor: '$error300',
+        _icon: {
+          color: '$error600',
+        },
+        _text: {
+          color: '$error600',
+        },
+        _dark: {
+          bg: '$backgroundDarkError',
+          borderColor: '$error700',
+          _text: {
+            color: '$error400',
+          },
+          _icon: {
+            color: '$error400',
+          },
+        },
+      },
+      warning: {
+        bg: '$backgroundLightWarning',
+        borderColor: '$warning300',
+        _icon: {
+          color: '$warning600',
+        },
+        _text: {
+          color: '$warning600',
+        },
+        _dark: {
+          bg: '$backgroundDarkWarning',
+          borderColor: '$warning700',
+          _text: {
+            color: '$warning400',
+          },
+          _icon: {
+            color: '$warning400',
+          },
+        },
+      },
+      success: {
+        bg: '$backgroundLightSuccess',
+        borderColor: '$success300',
+        _icon: {
+          color: '$success600',
+        },
+        _text: {
+          color: '$success600',
+        },
+        _dark: {
+          bg: '$backgroundDarkSuccess',
+          borderColor: '$success700',
+          _text: {
+            color: '$success400',
+          },
+          _icon: {
+            color: '$success400',
+          },
+        },
+      },
+      info: {
+        bg: '$backgroundLightInfo',
+        borderColor: '$info300',
+        _icon: {
+          color: '$info600',
+        },
+        _text: {
+          color: '$info600',
+        },
+        _dark: {
+          bg: '$backgroundDarkInfo',
+          borderColor: '$info700',
+          _text: {
+            color: '$info400',
+          },
+          _icon: {
+            color: '$info400',
+          },
+        },
+      },
+      muted: {
+        bg: '$backgroundLightMuted',
+        borderColor: '$secondary300',
+        _icon: {
+          color: '$secondary600',
+        },
+        _text: {
+          color: '$secondary600',
+        },
+        _dark: {
+          bg: '$backgroundDarkMuted',
+          borderColor: '$secondary700',
+          _text: {
+            color: '$secondary400',
+          },
+          _icon: {
+            color: '$secondary400',
+          },
+        },
+      },
+    },
+
+    variant: {
+      solid: {},
+      outline: {
+        borderWidth: '$1',
+      },
+    },
+
+    size: {
+      sm: {
+        px: '$2',
+        _icon: {
+          props: {
+            size: '2xs',
+          },
+        },
+        _text: {
+          props: {
+            size: '2xs',
+          },
+        },
+      },
+      md: {
+        px: '$2',
+        _icon: {
+          props: {
+            size: 'xs',
+          },
+        },
+        _text: {
+          props: {
+            size: 'xs',
+          },
+        },
+      },
+      lg: {
+        px: '$2',
+        _icon: {
+          props: { size: 'sm' },
+        },
+        _text: {
+          props: { size: 'sm' },
+        },
+      },
+    },
+  },
+
+  ':disabled': {
+    opacity: 0.5,
+  },
+  'defaultProps': {
+    action: 'info',
+    variant: 'solid',
+    size: 'md',
+  },
+});
diff --git a/packages/config/src/theme/BadgeIcon.ts b/packages/config/src/theme/BadgeIcon.ts
new file mode 100644
index 0000000000..53b08592ae
--- /dev/null
+++ b/packages/config/src/theme/BadgeIcon.ts
@@ -0,0 +1,7 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const BadgeIcon = createStyle({
+  props: {
+    size: 'md',
+  },
+});
diff --git a/packages/config/src/theme/BadgeText.ts b/packages/config/src/theme/BadgeText.ts
new file mode 100644
index 0000000000..2737073083
--- /dev/null
+++ b/packages/config/src/theme/BadgeText.ts
@@ -0,0 +1,5 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const BadgeText = createStyle({
+  textTransform: 'uppercase',
+});
diff --git a/packages/config/src/theme/Box.ts b/packages/config/src/theme/Box.ts
new file mode 100644
index 0000000000..cb95883db2
--- /dev/null
+++ b/packages/config/src/theme/Box.ts
@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Box = createStyle({});
diff --git a/packages/config/src/theme/Button.ts b/packages/config/src/theme/Button.ts
new file mode 100644
index 0000000000..5d6cf1815b
--- /dev/null
+++ b/packages/config/src/theme/Button.ts
@@ -0,0 +1,1038 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Button = createStyle({
+  'borderRadius': '$sm',
+  'backgroundColor': '$primary500',
+  'flexDirection': 'row',
+  'justifyContent': 'center',
+  'alignItems': 'center',
+
+  '_text': {
+    color: '$textLight0',
+    fontWeight: '$semibold',
+    _dark: {
+      color: '$textDark0',
+    },
+  },
+
+  '_icon': {
+    color: '$textLight0',
+    _dark: {
+      color: '$textDark0',
+    },
+  },
+
+  '_spinner': {
+    props: {
+      color: '$backgroundLight0',
+    },
+    _dark: {
+      props: {
+        color: '$backgroundDark0',
+      },
+    },
+  },
+
+  'variants': {
+    action: {
+      primary: {
+        'bg': '$primary500',
+        'borderColor': '$primary300',
+
+        ':hover': {
+          bg: '$primary600',
+          borderColor: '$primary400',
+        },
+
+        ':active': {
+          bg: '$primary700',
+          borderColor: '$primary700',
+        },
+
+        '_text': {
+          'color': '$primary600',
+          ':hover': {
+            color: '$primary600',
+          },
+          ':active': {
+            color: '$primary700',
+          },
+        },
+
+        '_icon': {
+          'color': '$primary600',
+          ':hover': {
+            color: '$primary600',
+          },
+          ':active': {
+            color: '$primary700',
+          },
+        },
+
+        '_spinner': {
+          'props': {
+            color: '$primary600',
+          },
+          ':hover': {
+            props: {
+              color: '$primary600',
+            },
+          },
+          ':active': {
+            props: {
+              color: '$primary700',
+            },
+          },
+        },
+
+        '_dark': {
+          'bg': '$primary400',
+          'borderColor': '$primary700',
+          ':hover': {
+            bg: '$primary500',
+            borderColor: '$primary400',
+          },
+          ':active': {
+            bg: '$primary600',
+            borderColor: '$primary300',
+          },
+          '_text': {
+            'color': '$primary300',
+            ':hover': {
+              color: '$primary300',
+            },
+            ':active': {
+              color: '$primary200',
+            },
+          },
+          '_icon': {
+            'color': '$primary300',
+            ':hover': {
+              color: '$primary300',
+            },
+            ':active': {
+              color: '$primary200',
+            },
+          },
+          '_spinner': {
+            'props': { color: '$primary300' },
+            ':hover': {
+              props: { color: '$primary300' },
+            },
+            ':active': {
+              props: { color: '$primary200' },
+            },
+          },
+
+          ':focusVisible': {
+            _web: {
+              boxShadow: 'offset 0 0 0 2px $info400',
+            },
+          },
+        },
+      },
+      secondary: {
+        'bg': '$secondary500',
+        'borderColor': '$secondary300',
+
+        ':hover': {
+          bg: '$secondary600',
+          borderColor: '$secondary400',
+        },
+
+        ':active': {
+          bg: '$secondary700',
+          borderColor: '$secondary700',
+        },
+
+        '_text': {
+          'color': '$secondary600',
+          ':hover': {
+            color: '$secondary600',
+          },
+          ':active': {
+            color: '$secondary700',
+          },
+        },
+        '_icon': {
+          'color': '$secondary600',
+          ':hover': {
+            color: '$secondary600',
+          },
+          ':active': {
+            color: '$secondary700',
+          },
+        },
+
+        '_spinner': {
+          'props': {
+            color: '$secondary600',
+          },
+          ':hover': {
+            props: { color: '$secondary600' },
+          },
+          ':active': {
+            props: { color: '$secondary700' },
+          },
+        },
+
+        '_dark': {
+          'bg': '$secondary400',
+          'borderColor': '$secondary700',
+          ':hover': {
+            bg: '$secondary500',
+            borderColor: '$secondary400',
+          },
+          ':active': {
+            bg: '$secondary600',
+            borderColor: '$secondary300',
+          },
+          '_text': {
+            'color': '$secondary300',
+            ':hover': {
+              color: '$secondary300',
+            },
+            ':active': {
+              color: '$secondary200',
+            },
+          },
+          '_icon': {
+            'color': '$secondary300',
+            ':hover': {
+              color: '$secondary300',
+            },
+            ':active': {
+              color: '$secondary200',
+            },
+          },
+          '_spinner': {
+            'props': {
+              color: '$secondary300',
+            },
+            ':hover': {
+              props: { color: '$secondary300' },
+            },
+            ':active': {
+              props: { color: '$secondary200' },
+            },
+          },
+        },
+      },
+      positive: {
+        'bg': '$success500',
+        'borderColor': '$success300',
+        ':hover': {
+          bg: '$success600',
+          borderColor: '$success400',
+        },
+
+        ':active': {
+          bg: '$success700',
+          borderColor: '$success700',
+        },
+
+        '_text': {
+          'color': '$success600',
+          ':hover': {
+            color: '$success600',
+          },
+          ':active': {
+            color: '$success700',
+          },
+        },
+        '_icon': {
+          'color': '$success600',
+          ':hover': {
+            color: '$success600',
+          },
+          ':active': {
+            color: '$success700',
+          },
+        },
+        '_spinner': {
+          'props': {
+            color: '$success600',
+          },
+          ':hover': {
+            props: { color: '$success600' },
+          },
+          ':active': {
+            props: { color: '$success700' },
+          },
+        },
+        '_dark': {
+          'bg': '$success400',
+          'borderColor': '$success700',
+          ':hover': {
+            bg: '$success500',
+            borderColor: '$success400',
+          },
+          ':active': {
+            bg: '$success600',
+            borderColor: '$success300',
+          },
+          '_text': {
+            'color': '$success300',
+            ':hover': {
+              color: '$success300',
+            },
+            ':active': {
+              color: '$success200',
+            },
+          },
+          '_icon': {
+            'color': '$success300',
+            ':hover': {
+              color: '$success300',
+            },
+            ':active': {
+              color: '$success200',
+            },
+          },
+          '_spinner': {
+            'props': {
+              color: '$success300',
+            },
+            ':hover': {
+              props: { color: '$success300' },
+            },
+            ':active': {
+              props: { color: '$success200' },
+            },
+          },
+          ':focusVisible': {
+            _web: {
+              boxShadow: 'offset 0 0 0 2px $info400',
+            },
+          },
+        },
+      },
+      negative: {
+        'bg': '$error500',
+        'borderColor': '$error300',
+        ':hover': {
+          bg: '$error600',
+          borderColor: '$error400',
+        },
+
+        ':active': {
+          bg: '$error700',
+          borderColor: '$error700',
+        },
+        '_text': {
+          'color': '$error600',
+          ':hover': {
+            color: '$error600',
+          },
+          ':active': {
+            color: '$error700',
+          },
+        },
+        '_icon': {
+          'color': '$error600',
+          ':hover': {
+            color: '$error600',
+          },
+          ':active': {
+            color: '$error700',
+          },
+        },
+        '_spinner': {
+          'props': {
+            color: '$error600',
+          },
+          ':hover': {
+            props: { color: '$error600' },
+          },
+          ':active': {
+            props: { color: '$error700' },
+          },
+        },
+        '_dark': {
+          'bg': '$error400',
+          'borderColor': '$error700',
+          ':hover': {
+            bg: '$error500',
+            borderColor: '$error400',
+          },
+          ':active': {
+            bg: '$error600',
+            borderColor: '$error300',
+          },
+          '_text': {
+            'color': '$error300',
+            ':hover': {
+              color: '$error300',
+            },
+            ':active': {
+              color: '$error200',
+            },
+          },
+          '_icon': {
+            'color': '$error300',
+            ':hover': {
+              color: '$error300',
+            },
+            ':active': {
+              color: '$error200',
+            },
+          },
+          '_spinner': {
+            'props': {
+              color: '$error300',
+            },
+            ':hover': {
+              props: { color: '$error300' },
+            },
+            ':active': {
+              props: { color: '$error200' },
+            },
+          },
+          ':focusVisible': {
+            _web: {
+              boxShadow: 'offset 0 0 0 2px $info400',
+            },
+          },
+        },
+      },
+
+      default: {
+        'bg': '$transparent',
+        ':hover': {
+          bg: '$backgroundLight50',
+        },
+        ':active': {
+          bg: 'transparent',
+        },
+        '_dark': {
+          'bg': 'transparent',
+          ':hover': {
+            bg: '$backgroundDark900',
+          },
+          ':active': {
+            bg: 'transparent',
+          },
+        },
+      },
+    },
+
+    variant: {
+      link: {
+        'px': '$0',
+        ':hover': {
+          _text: {
+            textDecorationLine: 'underline',
+          },
+        },
+        ':active': {
+          _text: {
+            textDecorationLine: 'underline',
+          },
+        },
+      },
+      outline: {
+        'bg': 'transparent',
+        'borderWidth': '$1',
+        ':hover': {
+          bg: '$backgroundLight50',
+        },
+        ':active': {
+          bg: 'transparent',
+        },
+        '_dark': {
+          'bg': 'transparent',
+          ':hover': {
+            bg: '$backgroundDark900',
+          },
+          ':active': {
+            bg: 'transparent',
+          },
+        },
+      },
+      solid: {
+        _text: {
+          'color': '$textLight0',
+          ':hover': {
+            color: '$textLight0',
+          },
+          ':active': {
+            color: '$textLight0',
+          },
+        },
+        _spinner: {
+          'props': { color: '$textLight0' },
+          ':hover': {
+            props: { color: '$textLight0' },
+          },
+          ':active': {
+            props: { color: '$textLight0' },
+          },
+        },
+        _icon: {
+          'props': { color: '$textLight0' },
+          ':hover': {
+            props: { color: '$textLight0' },
+          },
+          ':active': {
+            props: { color: '$textLight0' },
+          },
+        },
+        _dark: {
+          _text: {
+            'color': '$textDark0',
+            ':hover': {
+              color: '$textDark0',
+            },
+            ':active': {
+              color: '$textDark0',
+            },
+          },
+          _spinner: {
+            'props': { color: '$textDark0' },
+            ':hover': {
+              props: { color: '$textDark0' },
+            },
+            ':active': {
+              props: { color: '$textDark0' },
+            },
+          },
+          _icon: {
+            'props': { color: '$textDark0' },
+            ':hover': {
+              props: { color: '$textDark0' },
+            },
+            ':active': {
+              props: { color: '$textDark0' },
+            },
+          },
+        },
+      },
+    },
+
+    size: {
+      xs: {
+        px: '$3.5',
+        h: '$8',
+        _icon: {
+          props: {
+            size: '2xs',
+          },
+        },
+        _text: {
+          props: {
+            size: 'xs',
+          },
+        },
+      },
+      sm: {
+        px: '$4',
+        h: '$9',
+        _icon: {
+          props: {
+            size: 'sm',
+          },
+        },
+        _text: {
+          props: {
+            size: 'sm',
+          },
+        },
+      },
+      md: {
+        px: '$5',
+        h: '$10',
+        _icon: {
+          props: {
+            size: 'md',
+          },
+        },
+        _text: {
+          props: {
+            size: 'md',
+          },
+        },
+      },
+      lg: {
+        px: '$6',
+        h: '$11',
+        _icon: {
+          props: {
+            size: 'md',
+          },
+        },
+        _text: {
+          props: {
+            size: 'lg',
+          },
+        },
+      },
+      xl: {
+        px: '$7',
+        h: '$12',
+        _icon: {
+          props: {
+            size: 'lg',
+          },
+        },
+        _text: {
+          props: {
+            size: 'xl',
+          },
+        },
+      },
+    },
+  },
+  'compoundVariants': [
+    {
+      action: 'primary',
+      variant: 'link',
+      value: {
+        'px': '$0',
+        'bg': 'transparent',
+        ':hover': {
+          bg: 'transparent',
+        },
+        ':active': {
+          bg: 'transparent',
+        },
+        '_dark': {
+          'bg': 'transparent',
+          ':hover': {
+            bg: 'transparent',
+          },
+          ':active': {
+            bg: 'transparent',
+          },
+        },
+      },
+    },
+    {
+      action: 'secondary',
+      variant: 'link',
+      value: {
+        'px': '$0',
+        'bg': 'transparent',
+        ':hover': {
+          bg: 'transparent',
+        },
+        ':active': {
+          bg: 'transparent',
+        },
+        '_dark': {
+          'bg': 'transparent',
+          ':hover': {
+            bg: 'transparent',
+          },
+          ':active': {
+            bg: 'transparent',
+          },
+        },
+      },
+    },
+    {
+      action: 'positive',
+      variant: 'link',
+      value: {
+        'px': '$0',
+        'bg': 'transparent',
+        ':hover': {
+          bg: 'transparent',
+        },
+        ':active': {
+          bg: 'transparent',
+        },
+        '_dark': {
+          'bg': 'transparent',
+          ':hover': {
+            bg: 'transparent',
+          },
+          ':active': {
+            bg: 'transparent',
+          },
+        },
+      },
+    },
+    {
+      action: 'negative',
+      variant: 'link',
+      value: {
+        'px': '$0',
+        'bg': 'transparent',
+        ':hover': {
+          bg: 'transparent',
+        },
+        ':active': {
+          bg: 'transparent',
+        },
+        '_dark': {
+          'bg': 'transparent',
+          ':hover': {
+            bg: 'transparent',
+          },
+          ':active': {
+            bg: 'transparent',
+          },
+        },
+      },
+    },
+    {
+      action: 'primary',
+      variant: 'outline',
+      value: {
+        'bg': 'transparent',
+        ':hover': {
+          bg: '$backgroundLight50',
+        },
+        ':active': {
+          bg: 'transparent',
+        },
+        '_dark': {
+          'bg': 'transparent',
+          ':hover': {
+            bg: '$backgroundDark900',
+          },
+          ':active': {
+            bg: 'transparent',
+          },
+        },
+      },
+    },
+    {
+      action: 'secondary',
+      variant: 'outline',
+      value: {
+        'bg': 'transparent',
+        ':hover': {
+          bg: '$backgroundLight50',
+        },
+        ':active': {
+          bg: 'transparent',
+        },
+        '_dark': {
+          'bg': 'transparent',
+          ':hover': {
+            bg: '$backgroundDark900',
+          },
+          ':active': {
+            bg: 'transparent',
+          },
+        },
+      },
+    },
+    {
+      action: 'positive',
+      variant: 'outline',
+      value: {
+        'bg': 'transparent',
+        ':hover': {
+          bg: '$backgroundLight50',
+        },
+        ':active': {
+          bg: 'transparent',
+        },
+        '_dark': {
+          'bg': 'transparent',
+          ':hover': {
+            bg: '$backgroundDark900',
+          },
+          ':active': {
+            bg: 'transparent',
+          },
+        },
+      },
+    },
+    {
+      action: 'negative',
+      variant: 'outline',
+      value: {
+        'bg': 'transparent',
+        ':hover': {
+          bg: '$backgroundLight50',
+        },
+        ':active': {
+          bg: 'transparent',
+        },
+        '_dark': {
+          'bg': 'transparent',
+          ':hover': {
+            bg: '$backgroundDark900',
+          },
+          ':active': {
+            bg: 'transparent',
+          },
+        },
+      },
+    },
+    {
+      action: 'primary',
+      variant: 'solid',
+      value: {
+        _text: {
+          'color': '$textLight0',
+          ':hover': {
+            color: '$textLight0',
+          },
+          ':active': {
+            color: '$textLight0',
+          },
+        },
+        _icon: {
+          'color': '$textLight0',
+          ':hover': {
+            color: '$textLight0',
+          },
+          ':active': {
+            color: '$textLight0',
+          },
+        },
+        _spinner: {
+          'props': { color: '$textLight0' },
+          ':hover': {
+            props: { color: '$textLight0' },
+          },
+          ':active': {
+            props: { color: '$textLight0' },
+          },
+        },
+        _dark: {
+          _text: {
+            'color': '$textDark0',
+            ':hover': {
+              color: '$textDark0',
+            },
+            ':active': {
+              color: '$textDark0',
+            },
+          },
+          _icon: {
+            'color': '$textDark0',
+            ':hover': {
+              color: '$textDark0',
+            },
+            ':active': {
+              color: '$textDark0',
+            },
+          },
+          _spinner: {
+            'props': { color: '$textDark0' },
+            ':hover': {
+              props: { color: '$textDark0' },
+            },
+            ':active': {
+              props: { color: '$textDark0' },
+            },
+          },
+        },
+      },
+    },
+    {
+      action: 'secondary',
+      variant: 'solid',
+      value: {
+        _text: {
+          'color': '$textLight0',
+          ':hover': {
+            color: '$textLight0',
+          },
+          ':active': {
+            color: '$textLight0',
+          },
+        },
+        _icon: {
+          'color': '$textLight0',
+          ':hover': {
+            color: '$textLight0',
+          },
+          ':active': {
+            color: '$textLight0',
+          },
+        },
+        _spinner: {
+          'props': { color: '$textLight0' },
+          ':hover': {
+            props: { color: '$textLight0' },
+          },
+          ':active': {
+            props: { color: '$textLight0' },
+          },
+        },
+        _dark: {
+          _text: {
+            'color': '$textDark0',
+            ':hover': {
+              color: '$textDark0',
+            },
+            ':active': {
+              color: '$textDark0',
+            },
+          },
+          _icon: {
+            'color': '$textDark0',
+            ':hover': {
+              color: '$textDark0',
+            },
+            ':active': {
+              color: '$textDark0',
+            },
+          },
+          _spinner: {
+            'props': { color: '$textDark0' },
+            ':hover': {
+              props: { color: '$textDark0' },
+            },
+            ':active': {
+              props: { color: '$textDark0' },
+            },
+          },
+        },
+      },
+    },
+    {
+      action: 'positive',
+      variant: 'solid',
+      value: {
+        _text: {
+          'color': '$textLight0',
+          ':hover': {
+            color: '$textLight0',
+          },
+          ':active': {
+            color: '$textLight0',
+          },
+        },
+        _icon: {
+          'color': '$textLight0',
+          ':hover': {
+            color: '$textLight0',
+          },
+          ':active': {
+            color: '$textLight0',
+          },
+          'props': { color: '$textLight0' },
+        },
+        _spinner: {
+          'props': { color: '$textLight0' },
+          ':hover': {
+            props: { color: '$textLight0' },
+          },
+          ':active': {
+            props: { color: '$textLight0' },
+          },
+        },
+
+        _dark: {
+          _text: {
+            'color': '$textDark0',
+            ':hover': {
+              color: '$textDark0',
+            },
+            ':active': {
+              color: '$textDark0',
+            },
+          },
+          _icon: {
+            'color': '$textDark0',
+            ':hover': {
+              color: '$textDark0',
+            },
+            ':active': {
+              color: '$textDark0',
+            },
+          },
+          _spinner: {
+            'props': { color: '$textDark0' },
+            ':hover': {
+              props: { color: '$textDark0' },
+            },
+            ':active': {
+              props: { color: '$textDark0' },
+            },
+          },
+        },
+      },
+    },
+    {
+      action: 'negative',
+      variant: 'solid',
+      value: {
+        _text: {
+          'color': '$textLight0',
+          ':hover': {
+            color: '$textLight0',
+          },
+          ':active': {
+            color: '$textLight0',
+          },
+        },
+        _icon: {
+          'color': '$textLight0',
+          ':hover': {
+            color: '$textLight0',
+          },
+          ':active': {
+            color: '$textLight0',
+          },
+        },
+        _spinner: {
+          'props': { color: '$textLight0' },
+          ':hover': {
+            props: { color: '$textLight0' },
+          },
+          ':active': {
+            props: { color: '$textLight0' },
+          },
+        },
+        _dark: {
+          _text: {
+            'color': '$textDark0',
+            ':hover': {
+              color: '$textDark0',
+            },
+            ':active': {
+              color: '$textDark0',
+            },
+          },
+          _icon: {
+            'color': '$textDark0',
+            ':hover': {
+              color: '$textDark0',
+            },
+            ':active': {
+              color: '$textDark0',
+            },
+          },
+          _spinner: {
+            'props': { color: '$textDark0' },
+            ':hover': {
+              props: { color: '$textDark0' },
+            },
+            ':active': {
+              props: { color: '$textDark0' },
+            },
+          },
+        },
+      },
+    },
+  ],
+
+  'props': {
+    size: 'md',
+    variant: 'solid',
+    action: 'primary',
+  },
+
+  '_web': {
+    ':focusVisible': {
+      outlineWidth: '$0.5',
+      outlineColor: '$primary700',
+      outlineStyle: 'solid',
+      _dark: {
+        outlineColor: '$primary300',
+      },
+    },
+  },
+
+  ':disabled': {
+    opacity: 0.4,
+  },
+});
diff --git a/packages/config/src/theme/ButtonGroup.ts b/packages/config/src/theme/ButtonGroup.ts
new file mode 100644
index 0000000000..035559b5e8
--- /dev/null
+++ b/packages/config/src/theme/ButtonGroup.ts
@@ -0,0 +1,80 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ButtonGroup = createStyle({
+  variants: {
+    size: {
+      xs: {
+        _button: {
+          props: {
+            size: 'xs',
+          },
+        },
+      },
+      sm: {
+        _button: {
+          props: {
+            size: 'sm',
+          },
+        },
+      },
+      md: {
+        _button: {
+          props: {
+            size: 'md',
+          },
+        },
+      },
+      lg: {
+        _button: {
+          props: {
+            size: 'lg',
+          },
+        },
+      },
+      xl: {
+        _button: {
+          _button: {
+            props: {
+              size: 'xl',
+            },
+          },
+        },
+      },
+    },
+    space: {
+      'xs': {
+        gap: '$1',
+      },
+      'sm': {
+        gap: '$2',
+      },
+      'md': {
+        gap: '$3',
+      },
+      'lg': {
+        gap: '$4',
+      },
+      'xl': {
+        gap: '$5',
+      },
+      '2xl': {
+        gap: '$6',
+      },
+      '3xl': {
+        gap: '$7',
+      },
+      '4xl': {
+        gap: '$8',
+      },
+    },
+    isAttached: {
+      true: {
+        gap: 0,
+      },
+    },
+  },
+  defaultProps: {
+    size: 'md',
+    space: 'sm',
+  },
+});
diff --git a/packages/config/src/theme/ButtonGroupHSpacer.ts b/packages/config/src/theme/ButtonGroupHSpacer.ts
new file mode 100644
index 0000000000..7fcdf6db07
--- /dev/null
+++ b/packages/config/src/theme/ButtonGroupHSpacer.ts
@@ -0,0 +1,23 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ButtonGroupHSpacer = createStyle({
+  variants: {
+    space: {
+      xs: {
+        w: '$1',
+      },
+      sm: {
+        w: '$1.5',
+      },
+      md: {
+        w: '$2',
+      },
+      lg: {
+        w: '$3',
+      },
+      xl: {
+        w: '$4',
+      },
+    },
+  },
+});
diff --git a/packages/config/src/theme/ButtonGroupVSpacer.ts b/packages/config/src/theme/ButtonGroupVSpacer.ts
new file mode 100644
index 0000000000..36634ec73a
--- /dev/null
+++ b/packages/config/src/theme/ButtonGroupVSpacer.ts
@@ -0,0 +1,23 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ButtonGroupVSpacer = createStyle({
+  variants: {
+    space: {
+      xs: {
+        h: '$1',
+      },
+      sm: {
+        h: '$1.5',
+      },
+      md: {
+        h: '$2',
+      },
+      lg: {
+        h: '$3',
+      },
+      xl: {
+        h: '$4',
+      },
+    },
+  },
+});
diff --git a/packages/config/src/theme/ButtonIcon.ts b/packages/config/src/theme/ButtonIcon.ts
new file mode 100644
index 0000000000..bf4c110e7f
--- /dev/null
+++ b/packages/config/src/theme/ButtonIcon.ts
@@ -0,0 +1,7 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ButtonIcon = createStyle({
+  props: {
+    size: 'md',
+  },
+});
diff --git a/packages/config/src/theme/ButtonSpinner.ts b/packages/config/src/theme/ButtonSpinner.ts
new file mode 100644
index 0000000000..fa5de30772
--- /dev/null
+++ b/packages/config/src/theme/ButtonSpinner.ts
@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ButtonSpinner = createStyle({});
diff --git a/packages/config/src/theme/ButtonText.ts b/packages/config/src/theme/ButtonText.ts
new file mode 100644
index 0000000000..44d79ed937
--- /dev/null
+++ b/packages/config/src/theme/ButtonText.ts
@@ -0,0 +1,8 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ButtonText = createStyle({
+  color: '$textLight0',
+  _web: {
+    userSelect: 'none',
+  },
+});
diff --git a/packages/config/src/theme/Center.ts b/packages/config/src/theme/Center.ts
new file mode 100644
index 0000000000..f2f7c123c5
--- /dev/null
+++ b/packages/config/src/theme/Center.ts
@@ -0,0 +1,6 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Center = createStyle({
+  alignItems: 'center',
+  justifyContent: 'center',
+});
diff --git a/packages/config/src/theme/Checkbox.ts b/packages/config/src/theme/Checkbox.ts
new file mode 100644
index 0000000000..eb3444c71d
--- /dev/null
+++ b/packages/config/src/theme/Checkbox.ts
@@ -0,0 +1,79 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Checkbox = createStyle({
+  flexDirection: 'row',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+
+  variants: {
+    size: {
+      lg: {
+        _text: {
+          props: {
+            size: 'lg',
+          },
+        },
+
+        _icon: {
+          props: {
+            size: 'md',
+          },
+        },
+        _indicator: {
+          borderWidth: 3,
+          h: '$6',
+          w: '$6',
+        },
+      },
+
+      md: {
+        _text: {
+          props: {
+            size: 'md',
+          },
+        },
+
+        _icon: {
+          props: {
+            size: 'sm',
+          },
+        },
+        _indicator: {
+          borderWidth: 2,
+          h: '$5',
+          w: '$5',
+        },
+      },
+
+      sm: {
+        _text: {
+          props: {
+            size: 'sm',
+          },
+        },
+
+        _icon: {
+          props: {
+            size: '2xs',
+          },
+        },
+        _indicator: {
+          borderWidth: 2,
+          h: '$4',
+          w: '$4',
+        },
+      },
+    },
+  },
+
+  defaultProps: {
+    size: 'md',
+  },
+
+  _web: {
+    'cursor': 'pointer',
+    ':disabled': {
+      cursor: 'not-allowed',
+    },
+  },
+});
diff --git a/packages/config/src/theme/CheckboxGroup.ts b/packages/config/src/theme/CheckboxGroup.ts
new file mode 100644
index 0000000000..2fe324eaff
--- /dev/null
+++ b/packages/config/src/theme/CheckboxGroup.ts
@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const CheckboxGroup = createStyle({});
diff --git a/packages/config/src/theme/CheckboxIcon.ts b/packages/config/src/theme/CheckboxIcon.ts
new file mode 100644
index 0000000000..5685174c66
--- /dev/null
+++ b/packages/config/src/theme/CheckboxIcon.ts
@@ -0,0 +1,18 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const CheckboxIcon = createStyle({
+  ':checked': {
+    color: '$backgroundLight0',
+  },
+  ':disabled': {
+    opacity: 0.4,
+  },
+  '_dark': {
+    ':checked': {
+      color: '$backgroundDark0',
+    },
+    ':disabled': {
+      opacity: 0.4,
+    },
+  },
+});
diff --git a/packages/config/src/theme/CheckboxIndicator.ts b/packages/config/src/theme/CheckboxIndicator.ts
new file mode 100644
index 0000000000..38e4e5d97b
--- /dev/null
+++ b/packages/config/src/theme/CheckboxIndicator.ts
@@ -0,0 +1,112 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const CheckboxIndicator = createStyle({
+  'justifyContent': 'center',
+  'alignItems': 'center',
+  'borderColor': '$borderLight400',
+  'bg': '$transparent',
+  'borderRadius': 4,
+
+  '_web': {
+    ':focusVisible': {
+      outlineWidth: '2px',
+      outlineColor: '$primary700',
+      outlineStyle: 'solid',
+      _dark: {
+        outlineColor: '$primary300',
+      },
+    },
+  },
+
+  ':checked': {
+    borderColor: '$primary600',
+    bg: '$primary600',
+  },
+
+  ':hover': {
+    'borderColor': '$borderLight500',
+    'bg': 'transparent',
+    ':invalid': {
+      borderColor: '$error700',
+    },
+    ':checked': {
+      'bg': '$primary700',
+      'borderColor': '$primary700',
+      ':disabled': {
+        'borderColor': '$primary600',
+        'bg': '$primary600',
+        'opacity': 0.4,
+        ':invalid': {
+          borderColor: '$error700',
+        },
+      },
+    },
+    ':disabled': {
+      'borderColor': '$borderLight400',
+      ':invalid': {
+        borderColor: '$error700',
+      },
+    },
+  },
+
+  ':active': {
+    ':checked': {
+      bg: '$primary800',
+      borderColor: '$primary800',
+    },
+  },
+  ':invalid': {
+    borderColor: '$error700',
+  },
+  ':disabled': {
+    opacity: 0.4,
+  },
+
+  '_dark': {
+    'borderColor': '$borderDark500',
+    'bg': '$transparent',
+
+    ':checked': {
+      borderColor: '$primary500',
+      bg: '$primary500',
+    },
+    ':hover': {
+      'borderColor': '$borderDark400',
+      'bg': 'transparent',
+      ':invalid': {
+        borderColor: '$error400',
+      },
+      ':checked': {
+        'bg': '$primary400',
+        'borderColor': '$primary400',
+        ':disabled': {
+          'borderColor': '$primary500',
+          'bg': '$primary500',
+          'opacity': 0.4,
+          ':invalid': {
+            borderColor: '$error400',
+          },
+        },
+      },
+      ':disabled': {
+        'borderColor': '$borderDark500',
+        ':invalid': {
+          borderColor: '$error400',
+        },
+      },
+    },
+    ':active': {
+      ':checked': {
+        bg: '$primary300',
+        borderColor: '$primary300',
+      },
+    },
+
+    ':invalid': {
+      borderColor: '$error400',
+    },
+    ':disabled': {
+      opacity: 0.4,
+    },
+  },
+});
diff --git a/packages/config/src/theme/CheckboxLabel.ts b/packages/config/src/theme/CheckboxLabel.ts
new file mode 100644
index 0000000000..dc8b48432b
--- /dev/null
+++ b/packages/config/src/theme/CheckboxLabel.ts
@@ -0,0 +1,64 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const CheckboxLabel = createStyle({
+  'color': '$textLight600',
+  ':checked': {
+    color: '$textLight900',
+  },
+  ':hover': {
+    'color': '$textLight900',
+    ':checked': {
+      'color': '$textLight900',
+      ':disabled': {
+        color: '$textLight900',
+      },
+    },
+    ':disabled': {
+      color: '$textLight600',
+    },
+  },
+  ':active': {
+    'color': '$textLight900',
+
+    ':checked': {
+      color: '$textLight900',
+    },
+  },
+
+  ':disabled': {
+    opacity: 0.4,
+  },
+
+  '_web': {
+    MozUserSelect: 'none',
+    WebkitUserSelect: 'none',
+    msUserSelect: 'none',
+  },
+
+  '_dark': {
+    'color': '$textDark400',
+    ':checked': {
+      color: '$textDark100',
+    },
+    ':hover': {
+      'color': '$textDark100',
+      ':checked': {
+        'color': '$textDark100',
+        ':disabled': {
+          color: '$textDark100',
+        },
+      },
+    },
+    ':disabled': {
+      color: '$textDark100',
+    },
+
+    ':active': {
+      'color': '$textDark100',
+
+      ':checked': {
+        color: '$textDark100',
+      },
+    },
+  },
+});
diff --git a/packages/config/src/theme/Divider.ts b/packages/config/src/theme/Divider.ts
new file mode 100644
index 0000000000..827b7e1e7a
--- /dev/null
+++ b/packages/config/src/theme/Divider.ts
@@ -0,0 +1,23 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Divider = createStyle({
+  bg: '$backgroundLight200',
+  _dark: {
+    bg: '$backgroundLight800',
+  },
+  variants: {
+    orientation: {
+      vertical: {
+        width: '$px',
+        height: '$full',
+      },
+      horizontal: {
+        height: '$px',
+        width: '$full',
+      },
+    },
+  },
+  defaultProps: {
+    orientation: 'horizontal',
+  },
+});
diff --git a/packages/config/src/theme/Fab.ts b/packages/config/src/theme/Fab.ts
new file mode 100644
index 0000000000..fc85c29904
--- /dev/null
+++ b/packages/config/src/theme/Fab.ts
@@ -0,0 +1,181 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Fab = createStyle({
+  'bg': '$primary500',
+  'rounded': '$full',
+  'zIndex': 20,
+  'p': 16,
+  'flexDirection': 'row',
+
+  'alignItems': 'center',
+  'justifyContent': 'center',
+  'position': 'absolute',
+  ':hover': {
+    bg: '$primary600',
+  },
+
+  ':active': {
+    bg: '$primary700',
+  },
+
+  ':disabled': {
+    opacity: 0.4,
+    _web: {
+      // @ts-ignore
+      pointerEvents: 'all !important',
+      cursor: 'not-allowed',
+    },
+  },
+
+  '_text': {
+    color: '$textLight50',
+    fontWeight: '$normal',
+    _dark: {
+      _text: {
+        color: '$textDark50',
+      },
+    },
+  },
+
+  '_icon': {
+    'color': '$textLight50',
+    ':hover': {
+      color: '$textLight0',
+    },
+    ':active': {
+      color: '$textLight0',
+    },
+    '_dark': {
+      _icon: {
+        'color': '$textDark0',
+        ':hover': {
+          color: '$textDark0',
+        },
+        ':active': {
+          color: '$textDark0',
+        },
+      },
+    },
+  },
+
+  '_dark': {
+    'bg': '$primary400',
+    ':hover': {
+      bg: '$primary500',
+    },
+    ':active': {
+      bg: '$primary600',
+    },
+    ':disabled': {
+      opacity: 0.4,
+      _web: {
+        cursor: 'not-allowed',
+      },
+    },
+  },
+
+  '_web': {
+    ':focusVisible': {
+      outlineWidth: 2,
+      outlineColor: '$primary700',
+      outlineStyle: 'solid',
+      _dark: {
+        outlineColor: '$primary300',
+      },
+    },
+  },
+
+  'variants': {
+    size: {
+      sm: {
+        px: '$2.5',
+        py: '$2.5',
+        _text: {
+          fontSize: '$sm',
+        },
+        _icon: {
+          props: {
+            size: 'sm',
+          },
+        },
+      },
+      md: {
+        px: '$3',
+        py: '$3',
+        _text: {
+          fontSize: '$md',
+        },
+        _icon: {
+          props: {
+            size: 'md',
+          },
+        },
+      },
+      lg: {
+        px: '$4',
+        py: '$4',
+        _text: {
+          fontSize: '$lg',
+        },
+        _icon: {
+          props: {
+            size: 'md',
+          },
+        },
+      },
+    },
+
+    placement: {
+      'top right': {
+        top: '$4',
+        right: '$4',
+      },
+
+      'top left': {
+        top: '$4',
+        left: '$4',
+      },
+
+      'bottom right': {
+        bottom: '$4',
+        right: '$4',
+      },
+
+      'bottom left': {
+        bottom: '$4',
+        left: '$4',
+      },
+
+      'top center': {
+        top: '$4',
+        alignSelf: 'center',
+        // TODO: fix this, this is correct way, but React Native doesn't support this on Native
+        // left: '50%',
+        // transform: [
+        //   {
+        //     // @ts-ignore
+        //     translateX: '-50%',
+        //   },
+        // ],
+      },
+
+      'bottom center': {
+        bottom: '$4',
+        alignSelf: 'center',
+        // TODO: fix this, this is correct way, but React Native doesn't support this on Native
+        // left: '50%',
+        // transform: [
+        //   {
+        //     // @ts-ignore
+        //     translateX: '-50%',
+        //   },
+        // ],
+      },
+    },
+  },
+  'defaultProps': {
+    placement: 'bottom right',
+    size: 'md',
+    hardShadow: '2',
+  },
+});
diff --git a/packages/config/src/theme/FabIcon.ts b/packages/config/src/theme/FabIcon.ts
new file mode 100644
index 0000000000..219eb059e4
--- /dev/null
+++ b/packages/config/src/theme/FabIcon.ts
@@ -0,0 +1,7 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const FabIcon = createStyle({
+  props: {
+    size: 'md',
+  },
+});
diff --git a/packages/config/src/theme/FabLabel.ts b/packages/config/src/theme/FabLabel.ts
new file mode 100644
index 0000000000..811120bc48
--- /dev/null
+++ b/packages/config/src/theme/FabLabel.ts
@@ -0,0 +1,5 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const FabLabel = createStyle({
+  color: '$textLight50',
+});
diff --git a/packages/config/src/theme/FlatList.ts b/packages/config/src/theme/FlatList.ts
new file mode 100644
index 0000000000..c36334dad9
--- /dev/null
+++ b/packages/config/src/theme/FlatList.ts
@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const FlatList = createStyle({});
diff --git a/packages/config/src/theme/FormControl.ts b/packages/config/src/theme/FormControl.ts
new file mode 100644
index 0000000000..364fec88e7
--- /dev/null
+++ b/packages/config/src/theme/FormControl.ts
@@ -0,0 +1,55 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const FormControl = createStyle({
+  flexDirection: 'column',
+  variants: {
+    size: {
+      sm: {
+        _labelText: {
+          props: { size: 'sm' },
+        },
+        _labelAstrick: {
+          props: { size: 'sm' },
+        },
+        _helperText: {
+          props: { size: 'xs' },
+        },
+        _errorText: {
+          props: { size: 'xs' },
+        },
+      },
+      md: {
+        _labelText: {
+          props: { size: 'md' },
+        },
+        _labelAstrick: {
+          props: { size: 'md' },
+        },
+        _helperText: {
+          props: { size: 'sm' },
+        },
+        _errorText: {
+          props: { size: 'sm' },
+        },
+      },
+      lg: {
+        _labelText: {
+          props: { size: 'lg' },
+        },
+        _labelAstrick: {
+          props: { size: 'lg' },
+        },
+        _helperText: {
+          props: { size: 'md' },
+        },
+        _errorText: {
+          props: { size: 'md' },
+        },
+      },
+    },
+  },
+
+  defaultProps: {
+    size: 'md',
+  },
+});
diff --git a/packages/config/src/theme/FormControlError.ts b/packages/config/src/theme/FormControlError.ts
new file mode 100644
index 0000000000..d1063c1281
--- /dev/null
+++ b/packages/config/src/theme/FormControlError.ts
@@ -0,0 +1,8 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const FormControlError = createStyle({
+  flexDirection: 'row',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  mt: '$1',
+});
diff --git a/packages/config/src/theme/FormControlErrorIcon.ts b/packages/config/src/theme/FormControlErrorIcon.ts
new file mode 100644
index 0000000000..0565c4aba5
--- /dev/null
+++ b/packages/config/src/theme/FormControlErrorIcon.ts
@@ -0,0 +1,12 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const FormControlErrorIcon = createStyle({
+  color: '$error700',
+  _dark: {
+    //@ts-ignore
+    color: '$error400',
+  },
+  props: {
+    size: 'sm',
+  },
+});
diff --git a/packages/config/src/theme/FormControlErrorText.ts b/packages/config/src/theme/FormControlErrorText.ts
new file mode 100644
index 0000000000..0ba0233e4b
--- /dev/null
+++ b/packages/config/src/theme/FormControlErrorText.ts
@@ -0,0 +1,9 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const FormControlErrorText = createStyle({
+  ml: '$1',
+  color: '$error700',
+  _dark: {
+    color: '$error400',
+  },
+});
diff --git a/packages/config/src/theme/FormControlHelper.ts b/packages/config/src/theme/FormControlHelper.ts
new file mode 100644
index 0000000000..5c229edd51
--- /dev/null
+++ b/packages/config/src/theme/FormControlHelper.ts
@@ -0,0 +1,8 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const FormControlHelper = createStyle({
+  flexDirection: 'row',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  mt: '$1',
+});
diff --git a/packages/config/src/theme/FormControlHelperText.ts b/packages/config/src/theme/FormControlHelperText.ts
new file mode 100644
index 0000000000..572e43119c
--- /dev/null
+++ b/packages/config/src/theme/FormControlHelperText.ts
@@ -0,0 +1,11 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const FormControlHelperText = createStyle({
+  props: {
+    size: 'xs',
+  },
+  color: '$textLight500',
+  _dark: {
+    color: '$textDark400',
+  },
+});
diff --git a/packages/config/src/theme/FormControlLabel.ts b/packages/config/src/theme/FormControlLabel.ts
new file mode 100644
index 0000000000..59d891acae
--- /dev/null
+++ b/packages/config/src/theme/FormControlLabel.ts
@@ -0,0 +1,8 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const FormControlLabel = createStyle({
+  flexDirection: 'row',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  mb: '$1',
+});
diff --git a/packages/config/src/theme/FormControlLabelText.ts b/packages/config/src/theme/FormControlLabelText.ts
new file mode 100644
index 0000000000..edcd1d2aad
--- /dev/null
+++ b/packages/config/src/theme/FormControlLabelText.ts
@@ -0,0 +1,9 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const FormControlLabelText = createStyle({
+  fontWeight: '$medium',
+  color: '$textLight900',
+  _dark: {
+    color: '$textDark50',
+  },
+});
diff --git a/packages/config/src/theme/HStack.ts b/packages/config/src/theme/HStack.ts
new file mode 100644
index 0000000000..05b0be65c1
--- /dev/null
+++ b/packages/config/src/theme/HStack.ts
@@ -0,0 +1,38 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const HStack = createStyle({
+  flexDirection: 'row',
+  variants: {
+    space: {
+      'xs': {
+        gap: `$1`,
+      },
+      'sm': {
+        gap: `$2`,
+      },
+      'md': {
+        gap: `$3`,
+      },
+      'lg': {
+        gap: `$4`,
+      },
+      'xl': {
+        gap: `$5`,
+      },
+      '2xl': {
+        gap: `$6`,
+      },
+      '3xl': {
+        gap: `$7`,
+      },
+      '4xl': {
+        gap: `$8`,
+      },
+    },
+    reversed: {
+      true: {
+        flexDirection: 'row-reverse',
+      },
+    },
+  },
+});
diff --git a/packages/config/src/theme/Heading.ts b/packages/config/src/theme/Heading.ts
new file mode 100644
index 0000000000..eb02c2ed27
--- /dev/null
+++ b/packages/config/src/theme/Heading.ts
@@ -0,0 +1,124 @@
+import { createStyle } from '@gluestack-style/react';
+import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
+
+export const Heading = createStyle({
+  color: '$textLight900',
+  letterSpacing: '$sm',
+  fontWeight: '$bold',
+  fontFamily: '$heading',
+
+  // Overrides expo-html default styling
+  marginVertical: 0,
+  _dark: {
+    color: '$textDark50',
+  },
+  variants: {
+    isTruncated: {
+      true: {
+        props: {
+          // @ts-ignore
+          numberOfLines: 1,
+          ellipsizeMode: 'tail',
+        },
+      },
+    },
+    bold: {
+      true: {
+        fontWeight: '$bold',
+      },
+    },
+    underline: {
+      true: {
+        textDecorationLine: 'underline',
+      },
+    },
+    strikeThrough: {
+      true: {
+        textDecorationLine: 'line-through',
+      },
+    },
+    sub: {
+      true: {
+        fontSize: '$xs',
+        lineHeight: '$xs',
+      },
+    },
+    italic: {
+      true: {
+        fontStyle: 'italic',
+      },
+    },
+    highlight: {
+      true: {
+        bg: '$yellow500',
+      },
+    },
+    size: {
+      '5xl': {
+        //@ts-ignore
+        props: { as: H1 },
+        fontSize: '$6xl',
+        lineHeight: '$7xl',
+      },
+      '4xl': {
+        //@ts-ignore
+        props: { as: H1 },
+        fontSize: '$5xl',
+        lineHeight: '$6xl',
+      },
+
+      '3xl': {
+        //@ts-ignore
+        props: { as: H1 },
+        fontSize: '$4xl',
+        lineHeight: '$5xl',
+      },
+
+      '2xl': {
+        //@ts-ignore
+        props: { as: H2 },
+        fontSize: '$3xl',
+        lineHeight: '$3xl',
+      },
+
+      'xl': {
+        //@ts-ignore
+        props: { as: H3 },
+        fontSize: '$2xl',
+        lineHeight: '$3xl',
+      },
+
+      'lg': {
+        //@ts-ignore
+        props: { as: H4 },
+        fontSize: '$xl',
+        lineHeight: '$2xl',
+      },
+
+      'md': {
+        //@ts-ignore
+        props: { as: H5 },
+        fontSize: '$lg',
+        lineHeight: '$lg',
+      },
+
+      'sm': {
+        //@ts-ignore
+        props: { as: H6 },
+        fontSize: '$md',
+        lineHeight: '$lg',
+      },
+
+      'xs': {
+        //@ts-ignore
+        props: { as: H6 },
+        fontSize: '$sm',
+        lineHeight: '$xs',
+      },
+    },
+  },
+
+  defaultProps: {
+    size: 'lg',
+  },
+});
diff --git a/packages/config/src/theme/Icon.ts b/packages/config/src/theme/Icon.ts
new file mode 100644
index 0000000000..f524c562d9
--- /dev/null
+++ b/packages/config/src/theme/Icon.ts
@@ -0,0 +1,76 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const BaseIcon = createStyle({
+  color: '$backgroundLight800',
+  _dark: {
+    color: '$backgroundDark400',
+  },
+  variants: {
+    size: {
+      '2xs': {
+        h: '$3',
+        w: '$3',
+        props: {
+          // @ts-ignore
+          size: 12,
+        },
+      },
+      'xs': {
+        h: '$3.5',
+        w: '$3.5',
+        props: {
+          //@ts-ignore
+          size: 14,
+        },
+      },
+      'sm': {
+        h: '$4',
+        w: '$4',
+        props: {
+          //@ts-ignore
+          size: 16,
+        },
+      },
+      'md': {
+        h: '$4.5',
+        w: '$4.5',
+        props: {
+          //@ts-ignore
+          size: 18,
+        },
+      },
+      'lg': {
+        h: '$5',
+        w: '$5',
+        props: {
+          //@ts-ignore
+          size: 20,
+        },
+      },
+      'xl': {
+        h: '$6',
+        w: '$6',
+        props: {
+          //@ts-ignore
+          size: 24,
+        },
+      },
+    },
+  },
+  // defaultProps: {
+  //   size: 'md',
+  // },
+});
+
+export const Icon = createStyle({
+  props: {
+    size: 'md',
+    //@ts-ignore
+    fill: 'none',
+  },
+  color: '$backgroundLight800',
+  _dark: {
+    //@ts-ignore
+    color: '$backgroundDark400',
+  },
+});
diff --git a/packages/config/src/theme/Image.ts b/packages/config/src/theme/Image.ts
new file mode 100644
index 0000000000..7c6ec1bc73
--- /dev/null
+++ b/packages/config/src/theme/Image.ts
@@ -0,0 +1,50 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Image = createStyle({
+  maxWidth: '$full',
+  variants: {
+    size: {
+      '2xs': {
+        w: '$6',
+        h: '$6',
+      },
+
+      'xs': {
+        w: '$10',
+        h: '$10',
+      },
+
+      'sm': {
+        w: '$16',
+        h: '$16',
+      },
+
+      'md': {
+        w: '$20',
+        h: '$20',
+      },
+
+      'lg': {
+        w: '$24',
+        h: '$24',
+      },
+
+      'xl': {
+        w: '$32',
+        h: '$32',
+      },
+
+      '2xl': {
+        w: '$64',
+        h: '$64',
+      },
+      'full': {
+        w: '$full',
+        h: '$full',
+      },
+    },
+  },
+  defaultProps: {
+    size: 'md',
+  },
+});
diff --git a/packages/config/src/theme/Input.ts b/packages/config/src/theme/Input.ts
new file mode 100644
index 0000000000..90115a9e21
--- /dev/null
+++ b/packages/config/src/theme/Input.ts
@@ -0,0 +1,351 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Input = createStyle({
+  'borderWidth': 1,
+  'borderColor': '$backgroundLight300',
+  'borderRadius': '$sm',
+  'flexDirection': 'row',
+  'overflow': 'hidden',
+  'alignContent': 'center',
+
+  ':hover': {
+    borderColor: '$borderLight400',
+  },
+
+  ':focus': {
+    'borderColor': '$primary700',
+    ':hover': {
+      borderColor: '$primary700',
+    },
+  },
+
+  ':disabled': {
+    'opacity': 0.4,
+    ':hover': {
+      borderColor: '$backgroundLight300',
+    },
+  },
+
+  '_input': {
+    py: 'auto',
+    px: '$3',
+  },
+
+  '_icon': {
+    color: '$textLight400',
+  },
+
+  '_dark': {
+    'borderColor': '$borderDark700',
+    ':hover': {
+      borderColor: '$borderDark400',
+    },
+    ':focus': {
+      'borderColor': '$primary400',
+      ':hover': {
+        borderColor: '$primary400',
+      },
+    },
+    ':disabled': {
+      ':hover': {
+        borderColor: '$borderDark700',
+      },
+    },
+  },
+
+  'variants': {
+    size: {
+      xl: {
+        h: '$12',
+        _input: {
+          props: {
+            size: 'xl',
+          },
+        },
+        _icon: {
+          props: {
+            size: 'xl',
+          },
+        },
+      },
+      lg: {
+        h: '$11',
+        _input: {
+          props: {
+            size: 'lg',
+          },
+        },
+        _icon: {
+          props: {
+            size: 'lg',
+          },
+        },
+      },
+      md: {
+        h: '$10',
+        _input: {
+          props: {
+            size: 'md',
+          },
+        },
+        _icon: {
+          props: {
+            size: 'sm',
+          },
+        },
+      },
+      sm: {
+        h: '$9',
+        _input: {
+          props: {
+            size: 'sm',
+          },
+        },
+        _icon: {
+          props: {
+            size: 'xs',
+          },
+        },
+      },
+    },
+    variant: {
+      underlined: {
+        '_input': {
+          _web: {
+            outlineWidth: 0,
+            outline: 'none',
+          },
+          px: '$0',
+        },
+        'borderWidth': 0,
+        'borderRadius': 0,
+        'borderBottomWidth': '$1',
+        ':focus': {
+          borderColor: '$primary700',
+          _web: {
+            boxShadow: 'inset 0 -1px 0 0 $primary700',
+          },
+        },
+        ':invalid': {
+          'borderBottomWidth': 2,
+          'borderBottomColor': '$error700',
+          '_web': {
+            boxShadow: 'inset 0 -1px 0 0 $error700',
+          },
+          ':hover': {
+            borderBottomColor: '$error700',
+          },
+          ':focus': {
+            'borderBottomColor': '$error700',
+            ':hover': {
+              borderBottomColor: '$error700',
+              _web: {
+                boxShadow: 'inset 0 -1px 0 0 $error700',
+              },
+            },
+          },
+          ':disabled': {
+            ':hover': {
+              borderBottomColor: '$error700',
+              _web: {
+                boxShadow: 'inset 0 -1px 0 0 $error700',
+              },
+            },
+          },
+        },
+        '_dark': {
+          ':focus': {
+            borderColor: '$primary400',
+            _web: {
+              boxShadow: 'inset 0 -1px 0 0 $primary400',
+            },
+          },
+          ':invalid': {
+            'borderColor': '$error400',
+            '_web': {
+              boxShadow: 'inset 0 -1px 0 0 $error400',
+            },
+            ':hover': {
+              borderBottomColor: '$error400',
+            },
+            ':focus': {
+              'borderBottomColor': '$error400',
+              ':hover': {
+                borderBottomColor: '$error400',
+                _web: {
+                  boxShadow: 'inset 0 -1px 0 0 $error400',
+                },
+              },
+            },
+            ':disabled': {
+              ':hover': {
+                borderBottomColor: '$error400',
+                _web: {
+                  boxShadow: 'inset 0 -1px 0 0 $error400',
+                },
+              },
+            },
+          },
+        },
+      },
+
+      outline: {
+        '_input': {
+          _web: {
+            outlineWidth: 0,
+            outline: 'none',
+          },
+        },
+        ':focus': {
+          borderColor: '$primary700',
+          _web: {
+            boxShadow: 'inset 0 0 0 1px $primary700',
+          },
+        },
+        ':invalid': {
+          'borderColor': '$error700',
+          '_web': {
+            boxShadow: 'inset 0 0 0 1px $error700',
+          },
+          ':hover': {
+            borderColor: '$error700',
+          },
+          ':focus': {
+            'borderColor': '$error700',
+            ':hover': {
+              borderColor: '$error700',
+              _web: {
+                boxShadow: 'inset 0 0 0 1px $error700',
+              },
+            },
+          },
+          ':disabled': {
+            ':hover': {
+              borderColor: '$error700',
+              _web: {
+                boxShadow: 'inset 0 0 0 1px $error700',
+              },
+            },
+          },
+        },
+        '_dark': {
+          ':focus': {
+            borderColor: '$primary400',
+            _web: {
+              boxShadow: 'inset 0 0 0 1px $primary400',
+            },
+          },
+          ':invalid': {
+            'borderColor': '$error400',
+            '_web': {
+              boxShadow: 'inset 0 0 0 1px $error400',
+            },
+            ':hover': {
+              borderColor: '$error400',
+            },
+            ':focus': {
+              'borderColor': '$error400',
+              ':hover': {
+                borderColor: '$error400',
+                _web: {
+                  boxShadow: 'inset 0 0 0 1px $error400',
+                },
+              },
+            },
+            ':disabled': {
+              ':hover': {
+                borderColor: '$error400',
+                _web: {
+                  boxShadow: 'inset 0 0 0 1px $error400',
+                },
+              },
+            },
+          },
+        },
+      },
+
+      rounded: {
+        'borderRadius': 999,
+        '_input': {
+          px: '$4',
+          _web: {
+            outlineWidth: 0,
+            outline: 'none',
+          },
+        },
+        ':focus': {
+          borderColor: '$primary700',
+          _web: {
+            boxShadow: 'inset 0 0 0 1px $primary700',
+          },
+        },
+        ':invalid': {
+          'borderColor': '$error700',
+          '_web': {
+            boxShadow: 'inset 0 0 0 1px $error700',
+          },
+          ':hover': {
+            borderColor: '$error700',
+          },
+          ':focus': {
+            'borderColor': '$error700',
+            ':hover': {
+              borderColor: '$error700',
+              _web: {
+                boxShadow: 'inset 0 0 0 1px $error700',
+              },
+            },
+          },
+          ':disabled': {
+            ':hover': {
+              borderColor: '$error700',
+              _web: {
+                boxShadow: 'inset 0 0 0 1px $error700',
+              },
+            },
+          },
+        },
+
+        '_dark': {
+          ':focus': {
+            borderColor: '$primary400',
+            _web: {
+              boxShadow: 'inset 0 0 0 1px $primary400',
+            },
+          },
+          ':invalid': {
+            'borderColor': '$error400',
+            '_web': {
+              boxShadow: 'inset 0 0 0 1px $error400',
+            },
+            ':hover': {
+              borderColor: '$error400',
+            },
+            ':focus': {
+              'borderColor': '$error400',
+              ':hover': {
+                borderColor: '$error400',
+                _web: {
+                  boxShadow: 'inset 0 0 0 1px $error400',
+                },
+              },
+            },
+            ':disabled': {
+              ':hover': {
+                borderColor: '$error400',
+                _web: {
+                  boxShadow: 'inset 0 0 0 1px $error400',
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+
+  'defaultProps': {
+    size: 'md',
+    variant: 'outline',
+  },
+});
diff --git a/packages/config/src/theme/InputField.ts b/packages/config/src/theme/InputField.ts
new file mode 100644
index 0000000000..5d9111ec65
--- /dev/null
+++ b/packages/config/src/theme/InputField.ts
@@ -0,0 +1,78 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const InputField = createStyle({
+  flex: 1,
+  color: '$textLight900',
+  props: {
+    placeholderTextColor: '$textLight500',
+  },
+  _dark: {
+    color: '$textDark50',
+    props: {
+      placeholderTextColor: '$textDark400',
+    },
+  },
+  _web: {
+    'cursor': 'text',
+    ':disabled': {
+      cursor: 'not-allowed',
+    },
+  },
+  variants: {
+    size: {
+      '2xs': {
+        fontSize: '$2xs',
+        lineHeight: '$2xs',
+      },
+      'xs': {
+        fontSize: '$xs',
+        lineHeight: '$sm',
+      },
+
+      'sm': {
+        fontSize: '$sm',
+        lineHeight: '$sm',
+      },
+
+      'md': {
+        fontSize: '$md',
+        lineHeight: '$md',
+      },
+
+      'lg': {
+        fontSize: '$lg',
+        lineHeight: '$xl',
+      },
+
+      'xl': {
+        fontSize: '$xl',
+        lineHeight: '$xl',
+      },
+
+      '2xl': {
+        fontSize: '$2xl',
+        lineHeight: '$2xl',
+      },
+
+      '3xl': {
+        fontSize: '$3xl',
+        lineHeight: '$3xl',
+      },
+
+      '4xl': {
+        fontSize: '$4xl',
+        lineHeight: '$4xl',
+      },
+
+      '5xl': {
+        fontSize: '$5xl',
+        lineHeight: '$6xl',
+      },
+
+      '6xl': {
+        fontSize: '$6xl',
+        lineHeight: '$7xl',
+      },
+    },
+  },
+});
diff --git a/packages/config/src/theme/InputIcon.ts b/packages/config/src/theme/InputIcon.ts
new file mode 100644
index 0000000000..3e2c2a03d7
--- /dev/null
+++ b/packages/config/src/theme/InputIcon.ts
@@ -0,0 +1,7 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const InputIcon = createStyle({
+  props: {
+    size: 'md',
+  },
+});
diff --git a/packages/config/src/theme/InputSlot.ts b/packages/config/src/theme/InputSlot.ts
new file mode 100644
index 0000000000..d944bc0e89
--- /dev/null
+++ b/packages/config/src/theme/InputSlot.ts
@@ -0,0 +1,11 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const InputSlot = createStyle({
+  justifyContent: 'center',
+  alignItems: 'center',
+  _web: {
+    ':disabled': {
+      cursor: 'not-allowed',
+    },
+  },
+});
diff --git a/packages/config/src/theme/KeyboardAvoidingView.ts b/packages/config/src/theme/KeyboardAvoidingView.ts
new file mode 100644
index 0000000000..47b9b198e1
--- /dev/null
+++ b/packages/config/src/theme/KeyboardAvoidingView.ts
@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const KeyboardAvoidingView = createStyle({});
diff --git a/packages/config/src/theme/Link.ts b/packages/config/src/theme/Link.ts
new file mode 100644
index 0000000000..ad3221c1e6
--- /dev/null
+++ b/packages/config/src/theme/Link.ts
@@ -0,0 +1,38 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Link = createStyle({
+  _web: {
+    'outlineWidth': 0,
+    ':disabled': {
+      cursor: 'not-allowed',
+    },
+    ':focusVisible': {
+      outlineWidth: 2,
+      outlineColor: '$primary700',
+      outlineStyle: 'solid',
+      _dark: {
+        outlineColor: '$primary400',
+      },
+    },
+  },
+  _text: {
+    ':hover': {
+      color: '$info600',
+      textDecorationLine: 'none',
+    },
+    ':active': {
+      color: '$info700',
+    },
+    ':disabled': {
+      opacity: 0.4,
+    },
+    '_dark': {
+      ':hover': {
+        color: '$info400',
+      },
+      ':active': {
+        color: '$info300',
+      },
+    },
+  },
+});
diff --git a/packages/config/src/theme/LinkText.ts b/packages/config/src/theme/LinkText.ts
new file mode 100644
index 0000000000..5b74cb1f81
--- /dev/null
+++ b/packages/config/src/theme/LinkText.ts
@@ -0,0 +1,9 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const LinkText = createStyle({
+  textDecorationLine: 'underline',
+  color: '$info700',
+  _dark: {
+    color: '$info300',
+  },
+});
diff --git a/packages/config/src/theme/Menu.ts b/packages/config/src/theme/Menu.ts
new file mode 100644
index 0000000000..f4d652e775
--- /dev/null
+++ b/packages/config/src/theme/Menu.ts
@@ -0,0 +1,32 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Menu = createStyle({
+  ':initial': {
+    opacity: 0,
+  },
+  ':animate': {
+    opacity: 1,
+  },
+  ':exit': {
+    opacity: 0,
+  },
+  ':transition': {
+    type: 'spring',
+    damping: 18,
+    stiffness: 250,
+    opacity: {
+      type: 'timing',
+      duration: 200,
+    },
+  },
+  'minWidth': 200,
+  'py': '$2',
+  'rounded': '$sm',
+  'bg': '$backgroundLight0',
+  '_dark': {
+    bg: '$backgroundDark900',
+  },
+  'defaultProps': {
+    softShadow: '3',
+  },
+});
diff --git a/packages/config/src/theme/MenuBackdrop.ts b/packages/config/src/theme/MenuBackdrop.ts
new file mode 100644
index 0000000000..4e99c98302
--- /dev/null
+++ b/packages/config/src/theme/MenuBackdrop.ts
@@ -0,0 +1,15 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const MenuBackdrop = createStyle({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  // use this for when you want to give background colour to backdrop
+  // opacity: 0.5,
+  // bg: '$backgroundLight500',
+  _web: {
+    cursor: 'default',
+  },
+});
diff --git a/packages/config/src/theme/MenuItem.ts b/packages/config/src/theme/MenuItem.ts
new file mode 100644
index 0000000000..a996c5672d
--- /dev/null
+++ b/packages/config/src/theme/MenuItem.ts
@@ -0,0 +1,64 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const MenuItem = createStyle({
+  'p': '$3',
+  'flexDirection': 'row',
+  'alignItems': 'center',
+
+  ':hover': {
+    bg: '$backgroundLight100',
+  },
+
+  ':disabled': {
+    'opacity': 0.4,
+    '_web': {
+      cursor: 'not-allowed',
+    },
+    ':focus': {
+      bg: 'transparent',
+    },
+    '_dark': {
+      ':focus': {
+        bg: 'transparent',
+      },
+    },
+  },
+
+  ':active': {
+    bg: '$backgroundLight200',
+  },
+
+  ':focus': {
+    bg: '$backgroundLight100',
+    // @ts-ignore
+    outlineWidth: '$0',
+    outlineStyle: 'none',
+  },
+
+  ':focusVisible': {
+    // @ts-ignore
+    outlineWidth: '$0.5',
+    outlineColor: '$primary700',
+    outlineStyle: 'solid',
+    _dark: {
+      outlineColor: '$primary300',
+    },
+  },
+
+  '_dark': {
+    ':hover': {
+      bg: '$backgroundDark800',
+    },
+
+    ':active': {
+      bg: '$backgroundDark700',
+    },
+
+    ':focus': {
+      bg: '$backgroundDark800',
+    },
+  },
+  '_web': {
+    cursor: 'pointer',
+  },
+});
diff --git a/packages/config/src/theme/MenuLabel.ts b/packages/config/src/theme/MenuLabel.ts
new file mode 100644
index 0000000000..d4d3533949
--- /dev/null
+++ b/packages/config/src/theme/MenuLabel.ts
@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const MenuLabel = createStyle({});
diff --git a/packages/config/src/theme/Modal.ts b/packages/config/src/theme/Modal.ts
new file mode 100644
index 0000000000..e406326192
--- /dev/null
+++ b/packages/config/src/theme/Modal.ts
@@ -0,0 +1,23 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Modal = createStyle({
+  width: '$full',
+  height: '$full',
+  justifyContent: 'center',
+  alignItems: 'center',
+  variants: {
+    size: {
+      xs: { _content: { width: '60%', maxWidth: 360 } },
+      sm: { _content: { width: '70%', maxWidth: 420 } },
+      md: { _content: { width: '80%', maxWidth: 510 } },
+      lg: { _content: { width: '90%', maxWidth: 640 } },
+      full: { _content: { width: '100%' } },
+    },
+  },
+
+  defaultProps: { size: 'md' },
+
+  _web: {
+    pointerEvents: 'box-none',
+  },
+});
diff --git a/packages/config/src/theme/ModalBackdrop.ts b/packages/config/src/theme/ModalBackdrop.ts
new file mode 100644
index 0000000000..beea14ba88
--- /dev/null
+++ b/packages/config/src/theme/ModalBackdrop.ts
@@ -0,0 +1,36 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ModalBackdrop = createStyle({
+  ':initial': {
+    opacity: 0,
+  },
+  ':animate': {
+    opacity: 0.5,
+  },
+  ':exit': {
+    opacity: 0,
+  },
+  ':transition': {
+    type: 'spring',
+    damping: 18,
+    stiffness: 250,
+    opacity: {
+      type: 'timing',
+      duration: 250,
+    },
+  },
+  'position': 'absolute',
+  'left': 0,
+  'top': 0,
+  'right': 0,
+  'bottom': 0,
+  'bg': '$backgroundLight950',
+  // @ts-ignore
+  '_dark': {
+    bg: '$backgroundDark950',
+  },
+  // @ts-ignore
+  '_web': {
+    cursor: 'default',
+  },
+});
diff --git a/packages/config/src/theme/ModalBody.ts b/packages/config/src/theme/ModalBody.ts
new file mode 100644
index 0000000000..21ffa2dd4e
--- /dev/null
+++ b/packages/config/src/theme/ModalBody.ts
@@ -0,0 +1,7 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ModalBody = createStyle({
+  px: '$4',
+  paddingTop: 0,
+  paddingBottom: '$2',
+});
diff --git a/packages/config/src/theme/ModalCloseButton.ts b/packages/config/src/theme/ModalCloseButton.ts
new file mode 100644
index 0000000000..dc5b99d34f
--- /dev/null
+++ b/packages/config/src/theme/ModalCloseButton.ts
@@ -0,0 +1,80 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ModalCloseButton = createStyle({
+  'zIndex': 1,
+  'p': '$2',
+  'rounded': '$sm',
+  '_icon': {
+    color: '$backgroundLight400',
+  },
+  '_text': {
+    color: '$backgroundLight400',
+  },
+
+  ':hover': {
+    _icon: {
+      color: '$backgroundLight700',
+    },
+    _text: {
+      color: '$backgroundLight700',
+    },
+  },
+
+  ':active': {
+    _icon: {
+      color: '$backgroundLight900',
+    },
+    _text: {
+      color: '$backgroundLight900',
+    },
+  },
+
+  '_dark': {
+    '_icon': {
+      color: '$backgroundDark400',
+    },
+    '_text': {
+      color: '$backgroundDark400',
+    },
+    ':hover': {
+      _icon: {
+        color: '$backgroundDark200',
+      },
+      _text: {
+        color: '$backgroundDark200',
+      },
+    },
+
+    ':active': {
+      _icon: {
+        color: '$backgroundDark100',
+      },
+      _text: {
+        color: '$backgroundDark100',
+      },
+    },
+  },
+  ':focusVisible': {
+    bg: '$backgroundLight100',
+    _icon: {
+      color: '$backgroundLight900',
+    },
+    _text: {
+      color: '$backgroundLight900',
+    },
+    _dark: {
+      bg: '$backgroundDark700',
+      _icon: {
+        color: '$backgroundLight100',
+      },
+      _text: {
+        color: '$backgroundLight100',
+      },
+    },
+  },
+
+  '_web': {
+    outlineWidth: 0,
+    cursor: 'pointer',
+  },
+});
diff --git a/packages/config/src/theme/ModalContent.ts b/packages/config/src/theme/ModalContent.ts
new file mode 100644
index 0000000000..70b05384ed
--- /dev/null
+++ b/packages/config/src/theme/ModalContent.ts
@@ -0,0 +1,35 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ModalContent = createStyle({
+  'bg': '$backgroundLight50',
+  'rounded': '$lg',
+  'overflow': 'hidden',
+  ':initial': {
+    opacity: 0,
+    scale: 0.9,
+  },
+  ':animate': {
+    opacity: 1,
+    scale: 1,
+  },
+  ':exit': {
+    opacity: 0,
+  },
+  ':transition': {
+    type: 'spring',
+    damping: 18,
+    stiffness: 250,
+    opacity: {
+      type: 'timing',
+      duration: 250,
+    },
+  },
+  // @ts-ignore
+  '_dark': {
+    bg: '$backgroundDark900',
+  },
+
+  'defaultProps': {
+    softShadow: '3',
+  },
+});
diff --git a/packages/config/src/theme/ModalFooter.ts b/packages/config/src/theme/ModalFooter.ts
new file mode 100644
index 0000000000..1255f67e0b
--- /dev/null
+++ b/packages/config/src/theme/ModalFooter.ts
@@ -0,0 +1,9 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ModalFooter = createStyle({
+  p: '$4',
+  flexDirection: 'row',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+});
diff --git a/packages/config/src/theme/ModalHeader.ts b/packages/config/src/theme/ModalHeader.ts
new file mode 100644
index 0000000000..4c37318e2d
--- /dev/null
+++ b/packages/config/src/theme/ModalHeader.ts
@@ -0,0 +1,10 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ModalHeader = createStyle({
+  px: '$4',
+  paddingTop: '$4',
+  paddingBottom: '$2',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  flexDirection: 'row',
+});
diff --git a/packages/config/src/theme/Popover.ts b/packages/config/src/theme/Popover.ts
new file mode 100644
index 0000000000..0872c7dcc4
--- /dev/null
+++ b/packages/config/src/theme/Popover.ts
@@ -0,0 +1,23 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Popover = createStyle({
+  width: '$full',
+  height: '$full',
+  justifyContent: 'center',
+  alignItems: 'center',
+  variants: {
+    size: {
+      xs: { _content: { width: '60%', maxWidth: 360 } },
+      sm: { _content: { width: '70%', maxWidth: 420 } },
+      md: { _content: { width: '80%', maxWidth: 510 } },
+      lg: { _content: { width: '90%', maxWidth: 640 } },
+      full: { _content: { width: '100%' } },
+    },
+  },
+
+  defaultProps: { size: 'md' },
+
+  _web: {
+    pointerEvents: 'box-none',
+  },
+});
diff --git a/packages/config/src/theme/PopoverArrow.ts b/packages/config/src/theme/PopoverArrow.ts
new file mode 100644
index 0000000000..2cb62147c6
--- /dev/null
+++ b/packages/config/src/theme/PopoverArrow.ts
@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const PopoverArrow = createStyle({});
diff --git a/packages/config/src/theme/PopoverBackdrop.ts b/packages/config/src/theme/PopoverBackdrop.ts
new file mode 100644
index 0000000000..6475c946c5
--- /dev/null
+++ b/packages/config/src/theme/PopoverBackdrop.ts
@@ -0,0 +1,36 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const PopoverBackdrop = createStyle({
+  ':initial': {
+    opacity: 0,
+  },
+  ':animate': {
+    opacity: 0.5,
+  },
+  ':exit': {
+    opacity: 0,
+  },
+  ':transition': {
+    type: 'spring',
+    damping: 18,
+    stiffness: 250,
+    opacity: {
+      type: 'timing',
+      duration: 250,
+    },
+  },
+  'position': 'absolute',
+  'left': 0,
+  'top': 0,
+  'right': 0,
+  'bottom': 0,
+  'bg': '$backgroundLight950',
+  // @ts-ignore
+  '_dark': {
+    bg: '$backgroundDark950',
+  },
+  // @ts-ignore
+  '_web': {
+    cursor: 'default',
+  },
+});
diff --git a/packages/config/src/theme/PopoverBody.ts b/packages/config/src/theme/PopoverBody.ts
new file mode 100644
index 0000000000..010bbd2d07
--- /dev/null
+++ b/packages/config/src/theme/PopoverBody.ts
@@ -0,0 +1,6 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const PopoverBody = createStyle({
+  p: '$4',
+  pt: '$2',
+});
diff --git a/packages/config/src/theme/PopoverCloseButton.ts b/packages/config/src/theme/PopoverCloseButton.ts
new file mode 100644
index 0000000000..ad8b8903a9
--- /dev/null
+++ b/packages/config/src/theme/PopoverCloseButton.ts
@@ -0,0 +1,80 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const PopoverCloseButton = createStyle({
+  'zIndex': 1,
+  'p': '$2',
+  'rounded': '$sm',
+  '_icon': {
+    color: '$backgroundLight400',
+  },
+  '_text': {
+    color: '$backgroundLight400',
+  },
+
+  ':hover': {
+    _icon: {
+      color: '$backgroundLight700',
+    },
+    _text: {
+      color: '$backgroundLight700',
+    },
+  },
+
+  ':active': {
+    _icon: {
+      color: '$backgroundLight900',
+    },
+    _text: {
+      color: '$backgroundLight900',
+    },
+  },
+
+  '_dark': {
+    '_icon': {
+      color: '$backgroundDark400',
+    },
+    '_text': {
+      color: '$backgroundDark400',
+    },
+    ':hover': {
+      _icon: {
+        color: '$backgroundDark200',
+      },
+      _text: {
+        color: '$backgroundDark200',
+      },
+    },
+
+    ':active': {
+      _icon: {
+        color: '$backgroundDark100',
+      },
+      _text: {
+        color: '$backgroundDark100',
+      },
+    },
+  },
+  ':focusVisible': {
+    bg: '$backgroundLight100',
+    _icon: {
+      color: '$backgroundLight900',
+    },
+    _text: {
+      color: '$backgroundLight900',
+    },
+    _dark: {
+      bg: '$backgroundDark700',
+      _icon: {
+        color: '$backgroundLight100',
+      },
+      _text: {
+        color: '$backgroundLight100',
+      },
+    },
+  },
+
+  '_web': {
+    outlineWidth: 0,
+    cursor: 'pointer',
+  },
+});
diff --git a/packages/config/src/theme/PopoverContent.ts b/packages/config/src/theme/PopoverContent.ts
new file mode 100644
index 0000000000..7282f0732b
--- /dev/null
+++ b/packages/config/src/theme/PopoverContent.ts
@@ -0,0 +1,33 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const PopoverContent = createStyle({
+  'bg': '$backgroundLight50',
+  'rounded': '$lg',
+  'overflow': 'hidden',
+  ':initial': {
+    opacity: 0,
+  },
+  ':animate': {
+    opacity: 1,
+  },
+  ':exit': {
+    opacity: 0,
+  },
+  ':transition': {
+    type: 'spring',
+    damping: 18,
+    stiffness: 250,
+    opacity: {
+      type: 'timing',
+      duration: 250,
+    },
+  },
+  // @ts-ignore
+  '_dark': {
+    bg: '$backgroundDark900',
+  },
+
+  'defaultProps': {
+    softShadow: '3',
+  },
+});
diff --git a/packages/config/src/theme/PopoverFooter.ts b/packages/config/src/theme/PopoverFooter.ts
new file mode 100644
index 0000000000..6df33f90d3
--- /dev/null
+++ b/packages/config/src/theme/PopoverFooter.ts
@@ -0,0 +1,15 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const PopoverFooter = createStyle({
+  p: '$4',
+  flexDirection: 'row',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  borderTopWidth: 1,
+  borderColor: '$borderLight300',
+
+  _dark: {
+    borderColor: '$borderDark700',
+  },
+});
diff --git a/packages/config/src/theme/PopoverHeader.ts b/packages/config/src/theme/PopoverHeader.ts
new file mode 100644
index 0000000000..fa38c66ecd
--- /dev/null
+++ b/packages/config/src/theme/PopoverHeader.ts
@@ -0,0 +1,9 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const PopoverHeader = createStyle({
+  p: '$4',
+  pb: '$2',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  flexDirection: 'row',
+});
diff --git a/packages/config/src/theme/Pressable.ts b/packages/config/src/theme/Pressable.ts
new file mode 100644
index 0000000000..62eb38c7ac
--- /dev/null
+++ b/packages/config/src/theme/Pressable.ts
@@ -0,0 +1,14 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Pressable = createStyle({
+  _web: {
+    ':focusVisible': {
+      outlineWidth: '2px',
+      outlineColor: '$primary700',
+      outlineStyle: 'solid',
+      _dark: {
+        outlineColor: '$primary300',
+      },
+    },
+  },
+});
diff --git a/packages/config/src/theme/Progress.ts b/packages/config/src/theme/Progress.ts
new file mode 100644
index 0000000000..eb31cef384
--- /dev/null
+++ b/packages/config/src/theme/Progress.ts
@@ -0,0 +1,53 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Progress = createStyle({
+  bg: '$backgroundLight300',
+  borderRadius: '$full',
+  w: '100%',
+  variants: {
+    size: {
+      'xs': {
+        h: '$1',
+        _filledTrack: {
+          h: '$1',
+        },
+      },
+      'sm': {
+        h: '$2',
+        _filledTrack: {
+          h: '$2',
+        },
+      },
+      'md': {
+        h: '$3',
+        _filledTrack: {
+          h: '$3',
+        },
+      },
+      'lg': {
+        h: '$4',
+        _filledTrack: {
+          h: '$4',
+        },
+      },
+      'xl': {
+        h: '$5',
+        _filledTrack: {
+          h: '$5',
+        },
+      },
+      '2xl': {
+        h: '$6',
+        _filledTrack: {
+          h: '$6',
+        },
+      },
+    },
+  },
+  _dark: {
+    bg: '$backgroundDark700',
+  },
+  defaultProps: {
+    size: 'md',
+  },
+});
diff --git a/packages/config/src/theme/ProgressFilledTrack.ts b/packages/config/src/theme/ProgressFilledTrack.ts
new file mode 100644
index 0000000000..4b2d2ab6c8
--- /dev/null
+++ b/packages/config/src/theme/ProgressFilledTrack.ts
@@ -0,0 +1,9 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ProgressFilledTrack = createStyle({
+  bg: '$primary500',
+  borderRadius: '$full',
+  _dark: {
+    bg: '$primary400',
+  },
+});
diff --git a/packages/config/src/theme/Radio.ts b/packages/config/src/theme/Radio.ts
new file mode 100644
index 0000000000..e6e7cb79f7
--- /dev/null
+++ b/packages/config/src/theme/Radio.ts
@@ -0,0 +1,73 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Radio = createStyle({
+  flexDirection: 'row',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+
+  variants: {
+    size: {
+      lg: {
+        _text: {
+          props: {
+            size: 'lg',
+          },
+        },
+        _icon: {
+          props: {
+            size: 'md',
+          },
+        },
+        _indicator: {
+          p: 2,
+          h: '$6',
+          w: '$6',
+        },
+      },
+      md: {
+        _text: {
+          props: {
+            size: 'md',
+          },
+        },
+        _icon: {
+          props: {
+            size: 'sm',
+          },
+        },
+        _indicator: {
+          p: 1.5,
+          h: '$5',
+          w: '$5',
+        },
+      },
+      sm: {
+        _text: {
+          props: {
+            size: 'sm',
+          },
+        },
+        _icon: {
+          props: {
+            size: '2xs',
+          },
+        },
+        _indicator: {
+          p: 1,
+          h: '$4',
+          w: '$4',
+        },
+      },
+    },
+  },
+
+  defaultProps: {
+    size: 'md',
+  },
+  _web: {
+    'cursor': 'pointer',
+    ':disabled': {
+      cursor: 'not-allowed',
+    },
+  },
+});
diff --git a/packages/config/src/theme/RadioGroup.ts b/packages/config/src/theme/RadioGroup.ts
new file mode 100644
index 0000000000..37dec922a3
--- /dev/null
+++ b/packages/config/src/theme/RadioGroup.ts
@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const RadioGroup = createStyle({});
diff --git a/packages/config/src/theme/RadioIcon.ts b/packages/config/src/theme/RadioIcon.ts
new file mode 100644
index 0000000000..cbbdcaba59
--- /dev/null
+++ b/packages/config/src/theme/RadioIcon.ts
@@ -0,0 +1,28 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const RadioIcon = createStyle({
+  'borderRadius': '$full',
+  ':checked': {
+    'color': '$primary600',
+    ':hover': {
+      'color': '$primary700',
+      ':disabled': {
+        color: '$primary600',
+      },
+    },
+  },
+  '_dark': {
+    ':checked': {
+      'color': '$primary500',
+      ':disabled': {
+        color: '$primary500',
+      },
+      ':hover': {
+        ':disabled': {
+          color: '$primary500',
+        },
+        'color': '$primary400',
+      },
+    },
+  },
+});
diff --git a/packages/config/src/theme/RadioIndicator.ts b/packages/config/src/theme/RadioIndicator.ts
new file mode 100644
index 0000000000..08206e0c88
--- /dev/null
+++ b/packages/config/src/theme/RadioIndicator.ts
@@ -0,0 +1,107 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const RadioIndicator = createStyle({
+  'justifyContent': 'center',
+  'alignItems': 'center',
+  'bg': 'transparent',
+  'borderColor': '$borderLight400',
+  'borderWidth': 2,
+  'borderRadius': 999,
+  '_web': {
+    ':focusVisible': {
+      outlineWidth: 2,
+      outlineColor: '$primary700',
+      outlineStyle: 'solid',
+      _dark: {
+        outlineColor: '$primary400',
+      },
+    },
+  },
+
+  ':checked': {
+    borderColor: '$primary600',
+    bg: 'transparent',
+  },
+
+  ':hover': {
+    'borderColor': '$borderLight500',
+    'bg': 'transparent',
+
+    ':checked': {
+      bg: 'transparent',
+      borderColor: '$primary700',
+    },
+    ':invalid': {
+      borderColor: '$error700',
+    },
+    ':disabled': {
+      ':invalid': {
+        borderColor: '$error400',
+        opacity: 0.4,
+      },
+      'borderColor': '$borderLight400',
+      'opacity': 0.4,
+    },
+  },
+
+  ':active': {
+    bg: 'transparent',
+    borderColor: '$primary800',
+  },
+
+  '_dark': {
+    'borderColor': '$borderDark500',
+    'bg': '$transparent',
+
+    ':hover': {
+      'borderColor': '$borderDark400',
+      'bg': 'transparent',
+
+      ':checked': {
+        bg: 'transparent',
+        borderColor: '$primary400',
+      },
+      ':invalid': {
+        borderColor: '$error400',
+      },
+      ':disabled': {
+        'borderColor': '$borderDark500',
+        'opacity': 0.4,
+        ':checked': {
+          bg: 'transparent',
+          borderColor: '$primary500',
+        },
+        ':invalid': {
+          borderColor: '$error400',
+        },
+      },
+    },
+
+    ':checked': {
+      borderColor: '$primary500',
+    },
+
+    ':active': {
+      bg: 'transparent',
+      borderColor: '$primary300',
+    },
+    ':invalid': {
+      borderColor: '$error400',
+    },
+  },
+
+  ':invalid': {
+    borderColor: '$error700',
+  },
+
+  ':disabled': {
+    'opacity': 0.4,
+    ':checked': {
+      borderColor: '$borderLight400',
+      bg: 'transparent',
+    },
+    ':invalid': {
+      borderColor: '$error400',
+    },
+  },
+});
diff --git a/packages/config/src/theme/RadioLabel.ts b/packages/config/src/theme/RadioLabel.ts
new file mode 100644
index 0000000000..12bd5bc201
--- /dev/null
+++ b/packages/config/src/theme/RadioLabel.ts
@@ -0,0 +1,61 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const RadioLabel = createStyle({
+  'color': '$textLight600',
+  ':checked': {
+    color: '$textLight900',
+  },
+  ':hover': {
+    'color': '$textLight900',
+    ':checked': {
+      color: '$textLight900',
+    },
+    ':disabled': {
+      'color': '$textLight600',
+      ':checked': {
+        color: '$textLight900',
+      },
+    },
+  },
+  ':active': {
+    'color': '$textLight900',
+    ':checked': {
+      color: '$textLight900',
+    },
+  },
+
+  ':disabled': {
+    opacity: 0.4,
+  },
+
+  '_web': {
+    MozUserSelect: 'none',
+    WebkitUserSelect: 'none',
+    msUserSelect: 'none',
+  },
+
+  '_dark': {
+    'color': '$textDark400',
+    ':checked': {
+      color: '$textDark100',
+    },
+    ':hover': {
+      'color': '$textDark100',
+      ':checked': {
+        color: '$textDark100',
+      },
+      ':disabled': {
+        'color': '$textDark400',
+        ':checked': {
+          color: '$textDark100',
+        },
+      },
+    },
+    ':active': {
+      'color': '$textDark100',
+      ':checked': {
+        color: '$textDark100',
+      },
+    },
+  },
+});
diff --git a/packages/config/src/theme/ScrollView.ts b/packages/config/src/theme/ScrollView.ts
new file mode 100644
index 0000000000..349920eb02
--- /dev/null
+++ b/packages/config/src/theme/ScrollView.ts
@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ScrollView = createStyle({});
diff --git a/packages/config/src/theme/SectionList.ts b/packages/config/src/theme/SectionList.ts
new file mode 100644
index 0000000000..5c0b0b27ee
--- /dev/null
+++ b/packages/config/src/theme/SectionList.ts
@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SectionList = createStyle({});
diff --git a/packages/config/src/theme/Select.ts b/packages/config/src/theme/Select.ts
new file mode 100644
index 0000000000..008e7d69ab
--- /dev/null
+++ b/packages/config/src/theme/Select.ts
@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Select = createStyle({});
diff --git a/packages/config/src/theme/SelectActionsheet.ts b/packages/config/src/theme/SelectActionsheet.ts
new file mode 100644
index 0000000000..60a1238c32
--- /dev/null
+++ b/packages/config/src/theme/SelectActionsheet.ts
@@ -0,0 +1,8 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SelectActionsheet = createStyle({
+  width: '$full',
+  height: '$full',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+});
diff --git a/packages/config/src/theme/SelectActionsheetBackdrop.ts b/packages/config/src/theme/SelectActionsheetBackdrop.ts
new file mode 100644
index 0000000000..14e8f57286
--- /dev/null
+++ b/packages/config/src/theme/SelectActionsheetBackdrop.ts
@@ -0,0 +1,27 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SelectActionsheetBackdrop = createStyle({
+  ':initial': {
+    opacity: 0,
+  },
+  ':animate': {
+    opacity: 0.5,
+  },
+  ':exit': {
+    opacity: 0,
+  },
+  'position': 'absolute',
+  'left': 0,
+  'top': 0,
+  'right': 0,
+  'bottom': 0,
+  'bg': '$backgroundLight950',
+  // @ts-ignore
+  '_dark': {
+    bg: '$backgroundDark950',
+  },
+  // @ts-ignore
+  '_web': {
+    cursor: 'default',
+  },
+});
diff --git a/packages/config/src/theme/SelectActionsheetContent.ts b/packages/config/src/theme/SelectActionsheetContent.ts
new file mode 100644
index 0000000000..df555f3f90
--- /dev/null
+++ b/packages/config/src/theme/SelectActionsheetContent.ts
@@ -0,0 +1,27 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SelectActionsheetContent = createStyle({
+  alignItems: 'center',
+  borderTopLeftRadius: '$3xl',
+  borderTopRightRadius: '$3xl',
+  maxHeight: '70%',
+  p: '$2',
+  bg: '$backgroundLight0',
+  _sectionHeaderBackground: {
+    bg: '$backgroundLight0',
+  },
+  // @ts-ignore
+  _dark: {
+    bg: '$backgroundDark900',
+    _sectionHeaderBackground: {
+      bg: '$backgroundDark900',
+    },
+  },
+  // @ts-ignore
+  _web: {
+    userSelect: 'none',
+  },
+  defaultProps: {
+    hardShadow: '5',
+  },
+});
diff --git a/packages/config/src/theme/SelectActionsheetDragIndicator.ts b/packages/config/src/theme/SelectActionsheetDragIndicator.ts
new file mode 100644
index 0000000000..84ae426a4e
--- /dev/null
+++ b/packages/config/src/theme/SelectActionsheetDragIndicator.ts
@@ -0,0 +1,11 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SelectActionsheetDragIndicator = createStyle({
+  height: '$1',
+  width: '$16',
+  bg: '$backgroundLight400',
+  rounded: '$full',
+  _dark: {
+    bg: '$backgroundDark500',
+  },
+});
diff --git a/packages/config/src/theme/SelectActionsheetFlatList.ts b/packages/config/src/theme/SelectActionsheetFlatList.ts
new file mode 100644
index 0000000000..18e3f3dd41
--- /dev/null
+++ b/packages/config/src/theme/SelectActionsheetFlatList.ts
@@ -0,0 +1,6 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SelectActionsheetFlatList = createStyle({
+  w: '$full',
+  h: 'auto',
+});
diff --git a/packages/config/src/theme/SelectActionsheetIcon.ts b/packages/config/src/theme/SelectActionsheetIcon.ts
new file mode 100644
index 0000000000..20c5a736df
--- /dev/null
+++ b/packages/config/src/theme/SelectActionsheetIcon.ts
@@ -0,0 +1,15 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SelectActionsheetIcon = createStyle({
+  w: '$4',
+  h: '$4',
+  mr: '$2',
+  color: '$backgroundLight500',
+  _dark: {
+    //@ts-ignore
+    color: '$backgroundDark400',
+  },
+  props: {
+    size: 'md',
+  },
+});
diff --git a/packages/config/src/theme/SelectActionsheetIndicatorWrapper.ts b/packages/config/src/theme/SelectActionsheetIndicatorWrapper.ts
new file mode 100644
index 0000000000..245c1d57d5
--- /dev/null
+++ b/packages/config/src/theme/SelectActionsheetIndicatorWrapper.ts
@@ -0,0 +1,7 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SelectActionsheetIndicatorWrapper = createStyle({
+  py: '$1',
+  w: '$full',
+  alignItems: 'center',
+});
diff --git a/packages/config/src/theme/SelectActionsheetItem.ts b/packages/config/src/theme/SelectActionsheetItem.ts
new file mode 100644
index 0000000000..126f147878
--- /dev/null
+++ b/packages/config/src/theme/SelectActionsheetItem.ts
@@ -0,0 +1,53 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SelectActionsheetItem = createStyle({
+  'p': '$3',
+  'flexDirection': 'row',
+  'alignItems': 'center',
+  'rounded': '$sm',
+  'w': '$full',
+
+  ':disabled': {
+    opacity: 0.4,
+    _web: {
+      // @ts-ignore
+      pointerEvents: 'all !important',
+      cursor: 'not-allowed',
+    },
+  },
+
+  ':hover': {
+    bg: '$backgroundLight100',
+  },
+
+  ':active': {
+    bg: '$backgroundLight200',
+  },
+
+  ':focus': {
+    bg: '$backgroundLight100',
+  },
+
+  '_dark': {
+    ':hover': {
+      bg: '$backgroundDark800',
+    },
+
+    ':active': {
+      bg: '$backgroundDark700',
+    },
+
+    ':focus': {
+      bg: '$backgroundDark800',
+    },
+  },
+
+  '_web': {
+    ':focusVisible': {
+      bg: '$backgroundLight100',
+      _dark: {
+        bg: '$backgroundDark700',
+      },
+    },
+  },
+});
diff --git a/packages/config/src/theme/SelectActionsheetItemText.ts b/packages/config/src/theme/SelectActionsheetItemText.ts
new file mode 100644
index 0000000000..00cb69f31f
--- /dev/null
+++ b/packages/config/src/theme/SelectActionsheetItemText.ts
@@ -0,0 +1,13 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SelectActionsheetItemText = createStyle({
+  mx: '$2',
+  fontSize: '$md',
+  fontFamily: '$body',
+  fontWeight: '$normal',
+  lineHeight: '$md',
+  color: '$textLight700',
+  _dark: {
+    color: '$textDark200',
+  },
+});
diff --git a/packages/config/src/theme/SelectActionsheetScrollView.ts b/packages/config/src/theme/SelectActionsheetScrollView.ts
new file mode 100644
index 0000000000..571c29938a
--- /dev/null
+++ b/packages/config/src/theme/SelectActionsheetScrollView.ts
@@ -0,0 +1,6 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SelectActionsheetScrollView = createStyle({
+  w: '$full',
+  h: 'auto',
+});
diff --git a/packages/config/src/theme/SelectActionsheetSectionHeaderText.ts b/packages/config/src/theme/SelectActionsheetSectionHeaderText.ts
new file mode 100644
index 0000000000..30067bdd96
--- /dev/null
+++ b/packages/config/src/theme/SelectActionsheetSectionHeaderText.ts
@@ -0,0 +1,14 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SelectActionsheetSectionHeaderText = createStyle({
+  color: '$textLight500',
+  fontSize: '$sm',
+  fontFamily: '$body',
+  fontWeight: '$bold',
+  lineHeight: '$xs',
+  textTransform: 'uppercase',
+  p: '$3',
+  _dark: {
+    color: '$textDark400',
+  },
+});
diff --git a/packages/config/src/theme/SelectActionsheetSectionList.ts b/packages/config/src/theme/SelectActionsheetSectionList.ts
new file mode 100644
index 0000000000..187ef489b0
--- /dev/null
+++ b/packages/config/src/theme/SelectActionsheetSectionList.ts
@@ -0,0 +1,6 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SelectActionsheetSectionList = createStyle({
+  w: '$full',
+  h: 'auto',
+});
diff --git a/packages/config/src/theme/SelectActionsheetVirtualizedList.ts b/packages/config/src/theme/SelectActionsheetVirtualizedList.ts
new file mode 100644
index 0000000000..7a76d55c46
--- /dev/null
+++ b/packages/config/src/theme/SelectActionsheetVirtualizedList.ts
@@ -0,0 +1,6 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SelectActionsheetVirtualizedList = createStyle({
+  w: '$full',
+  h: 'auto',
+});
diff --git a/packages/config/src/theme/SelectIcon.ts b/packages/config/src/theme/SelectIcon.ts
new file mode 100644
index 0000000000..e33495c749
--- /dev/null
+++ b/packages/config/src/theme/SelectIcon.ts
@@ -0,0 +1,7 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SelectIcon = createStyle({
+  props: {
+    size: 'md',
+  },
+});
diff --git a/packages/config/src/theme/SelectInput.ts b/packages/config/src/theme/SelectInput.ts
new file mode 100644
index 0000000000..af98ef97bc
--- /dev/null
+++ b/packages/config/src/theme/SelectInput.ts
@@ -0,0 +1,19 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SelectInput = createStyle({
+  _web: {
+    w: '$full',
+  },
+  flex: 1,
+  h: '$full',
+  color: '$textLight900',
+  props: {
+    placeholderTextColor: '$textLight500',
+  },
+  _dark: {
+    color: '$textDark50',
+    props: {
+      placeholderTextColor: '$textDark400',
+    },
+  },
+});
diff --git a/packages/config/src/theme/SelectTrigger.ts b/packages/config/src/theme/SelectTrigger.ts
new file mode 100644
index 0000000000..872afb62ba
--- /dev/null
+++ b/packages/config/src/theme/SelectTrigger.ts
@@ -0,0 +1,353 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SelectTrigger = createStyle({
+  'borderWidth': 1,
+  'borderColor': '$backgroundLight300',
+  'borderRadius': '$sm',
+  'flexDirection': 'row',
+  'overflow': 'hidden',
+  'alignItems': 'center',
+
+  ':hover': {
+    borderColor: '$borderLight400',
+  },
+
+  ':focus': {
+    borderColor: '$primary700',
+  },
+
+  ':disabled': {
+    'opacity': 0.4,
+    ':hover': {
+      borderColor: '$backgroundLight300',
+    },
+  },
+
+  '_input': {
+    py: 'auto',
+    px: '$3',
+  },
+
+  '_icon': {
+    color: '$backgroundLight500',
+    _dark: {
+      color: '$backgroundLight500',
+    },
+  },
+
+  '_dark': {
+    'borderColor': '$borderDark700',
+    ':hover': {
+      borderColor: '$borderDark400',
+    },
+    ':focus': {
+      borderColor: '$primary400',
+    },
+    ':disabled': {
+      ':hover': {
+        borderColor: '$borderDark700',
+      },
+    },
+  },
+
+  'variants': {
+    size: {
+      xl: {
+        h: '$12',
+        _input: {
+          fontSize: '$xl',
+        },
+        _icon: {
+          h: '$6',
+          w: '$6',
+        },
+      },
+      lg: {
+        h: '$11',
+        _input: {
+          fontSize: '$lg',
+        },
+        _icon: {
+          h: '$5',
+          w: '$5',
+        },
+      },
+      md: {
+        h: '$10',
+        _input: {
+          fontSize: '$md',
+        },
+        _icon: {
+          h: '$4',
+          w: '$4',
+        },
+      },
+      sm: {
+        h: '$9',
+        _input: {
+          fontSize: '$sm',
+        },
+        _icon: {
+          h: '$3.5',
+          w: '$3.5',
+        },
+      },
+    },
+    variant: {
+      underlined: {
+        '_input': {
+          _web: {
+            outlineWidth: 0,
+            outline: 'none',
+          },
+          px: '$0',
+        },
+        'borderWidth': 0,
+        'borderRadius': 0,
+        'borderBottomWidth': '$1',
+        ':focus': {
+          'borderColor': '$primary700',
+          '_web': {
+            boxShadow: 'inset 0 -1px 0 0 $primary700',
+          },
+          ':hover': {
+            borderColor: '$primary700',
+            _web: {
+              boxShadow: 'inset 0 -1px 0 0 $primary600',
+            },
+          },
+        },
+        ':invalid': {
+          'borderBottomWidth': 2,
+          'borderBottomColor': '$error700',
+          '_web': {
+            boxShadow: 'inset 0 -1px 0 0 $error700',
+          },
+          ':hover': {
+            borderBottomColor: '$error700',
+          },
+          ':focus': {
+            'borderBottomColor': '$error700',
+            ':hover': {
+              borderBottomColor: '$error700',
+              _web: {
+                boxShadow: 'inset 0 -1px 0 0 $error700',
+              },
+            },
+          },
+          ':disabled': {
+            ':hover': {
+              borderBottomColor: '$error700',
+              _web: {
+                boxShadow: 'inset 0 -1px 0 0 $error700',
+              },
+            },
+          },
+        },
+        '_dark': {
+          ':focus': {
+            borderColor: '$primary400',
+            _web: {
+              boxShadow: 'inset 0 -1px 0 0 $primary400',
+            },
+          },
+          ':invalid': {
+            'borderColor': '$error400',
+            '_web': {
+              boxShadow: 'inset 0 -1px 0 0 $error400',
+            },
+            ':hover': {
+              borderBottomColor: '$error400',
+            },
+            ':focus': {
+              'borderBottomColor': '$error400',
+              ':hover': {
+                borderBottomColor: '$error400',
+                _web: {
+                  boxShadow: 'inset 0 -1px 0 0 $error400',
+                },
+              },
+            },
+
+            ':disabled': {
+              ':hover': {
+                borderBottomColor: '$error400',
+                _web: {
+                  boxShadow: 'inset 0 -1px 0 0 $error400',
+                },
+              },
+            },
+          },
+        },
+      },
+      outline: {
+        '_input': {
+          _web: {
+            outlineWidth: 0,
+            outline: 'none',
+          },
+        },
+        ':focus': {
+          'borderColor': '$primary700',
+          '_web': {
+            boxShadow: 'inset 0 0 0 1px $primary700',
+          },
+          ':hover': {
+            borderColor: '$primary700',
+            _web: {
+              boxShadow: 'inset 0 0 0 1px $primary600',
+            },
+          },
+        },
+        ':invalid': {
+          'borderColor': '$error700',
+          '_web': {
+            boxShadow: 'inset 0 0 0 1px $error700',
+          },
+          ':hover': {
+            borderColor: '$error700',
+          },
+          ':focus': {
+            'borderColor': '$error700',
+            ':hover': {
+              borderColor: '$error700',
+              _web: {
+                boxShadow: 'inset 0 0 0 1px $error700',
+              },
+            },
+          },
+          ':disabled': {
+            ':hover': {
+              borderColor: '$error700',
+              _web: {
+                boxShadow: 'inset 0 0 0 1px $error700',
+              },
+            },
+          },
+        },
+        '_dark': {
+          ':focus': {
+            borderColor: '$primary400',
+            _web: {
+              boxShadow: 'inset 0 0 0 1px $primary400',
+            },
+          },
+          ':invalid': {
+            'borderColor': '$error400',
+            '_web': {
+              boxShadow: 'inset 0 0 0 1px $error400',
+            },
+            ':hover': {
+              borderColor: '$error400',
+            },
+            ':focus': {
+              'borderColor': '$error400',
+              ':hover': {
+                borderColor: '$error400',
+                _web: {
+                  boxShadow: 'inset 0 0 0 1px $error400',
+                },
+              },
+            },
+            ':disabled': {
+              ':hover': {
+                borderColor: '$error400',
+                _web: {
+                  boxShadow: 'inset 0 0 0 1px $error400',
+                },
+              },
+            },
+          },
+        },
+      },
+      rounded: {
+        'borderRadius': 999,
+        '_input': {
+          px: '$4',
+          _web: {
+            outlineWidth: 0,
+            outline: 'none',
+          },
+        },
+        ':focus': {
+          'borderColor': '$primary700',
+          '_web': {
+            boxShadow: 'inset 0 0 0 1px $primary700',
+          },
+          ':hover': {
+            borderColor: '$primary700',
+            _web: {
+              boxShadow: 'inset 0 0 0 1px $primary600',
+            },
+          },
+        },
+        ':invalid': {
+          'borderColor': '$error700',
+          '_web': {
+            boxShadow: 'inset 0 0 0 1px $error700',
+          },
+          ':hover': {
+            borderColor: '$error700',
+          },
+          ':focus': {
+            'borderColor': '$error700',
+            ':hover': {
+              borderColor: '$error700',
+              _web: {
+                boxShadow: 'inset 0 0 0 1px $error700',
+              },
+            },
+          },
+          ':disabled': {
+            ':hover': {
+              borderColor: '$error700',
+              _web: {
+                boxShadow: 'inset 0 0 0 1px $error700',
+              },
+            },
+          },
+        },
+
+        '_dark': {
+          ':focus': {
+            borderColor: '$primary400',
+            _web: {
+              boxShadow: 'inset 0 0 0 1px $primary400',
+            },
+          },
+          ':invalid': {
+            'borderColor': '$error400',
+            '_web': {
+              boxShadow: 'inset 0 0 0 1px $error400',
+            },
+            ':hover': {
+              borderColor: '$error400',
+            },
+            ':focus': {
+              'borderColor': '$error400',
+              ':hover': {
+                borderColor: '$error400',
+                _web: {
+                  boxShadow: 'inset 0 0 0 1px $error400',
+                },
+              },
+            },
+            ':disabled': {
+              ':hover': {
+                borderColor: '$error400',
+                _web: {
+                  boxShadow: 'inset 0 0 0 1px $error400',
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+
+  'defaultProps': {
+    size: 'md',
+    variant: 'outline',
+  },
+});
diff --git a/packages/config/src/theme/Slider.ts b/packages/config/src/theme/Slider.ts
new file mode 100644
index 0000000000..1a36fe5158
--- /dev/null
+++ b/packages/config/src/theme/Slider.ts
@@ -0,0 +1,192 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Slider = createStyle({
+  justifyContent: 'center',
+  alignItems: 'center',
+  variants: {
+    orientation: {
+      horizontal: {
+        w: '$full',
+        _track: {
+          width: '$full',
+        },
+        _filledTrack: {
+          height: '$full',
+        },
+      },
+      vertical: {
+        h: '$full',
+        _track: {
+          height: '$full',
+        },
+        _filledTrack: {
+          width: '$full',
+        },
+      },
+    },
+    isReversed: {
+      true: {},
+      false: {},
+    },
+    size: {
+      sm: {
+        _thumb: {
+          h: '$4',
+          w: '$4',
+        },
+      },
+      md: {
+        _thumb: {
+          h: '$5',
+          w: '$5',
+        },
+      },
+      lg: {
+        _thumb: {
+          h: '$6',
+          w: '$6',
+        },
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      orientation: 'horizontal',
+      size: 'sm',
+      value: {
+        _track: {
+          height: '$1',
+          flexDirection: 'row',
+        },
+      },
+    },
+    {
+      orientation: 'horizontal',
+      size: 'sm',
+      isReversed: true,
+      value: {
+        _track: {
+          height: '$1',
+          flexDirection: 'row-reverse',
+        },
+      },
+    },
+    {
+      orientation: 'horizontal',
+      size: 'md',
+      value: {
+        _track: {
+          height: 5,
+          flexDirection: 'row',
+        },
+      },
+    },
+    {
+      orientation: 'horizontal',
+      size: 'md',
+      isReversed: true,
+      value: {
+        _track: {
+          height: 5,
+          flexDirection: 'row-reverse',
+        },
+      },
+    },
+    {
+      orientation: 'horizontal',
+      size: 'lg',
+      value: {
+        _track: {
+          height: '$1.5',
+          flexDirection: 'row',
+        },
+      },
+    },
+    {
+      orientation: 'horizontal',
+      size: 'lg',
+      isReversed: true,
+      value: {
+        _track: {
+          height: '$1.5',
+          flexDirection: 'row-reverse',
+        },
+      },
+    },
+    {
+      orientation: 'vertical',
+      size: 'sm',
+      value: {
+        _track: {
+          w: '$1',
+          flexDirection: 'column-reverse',
+        },
+      },
+    },
+    {
+      orientation: 'vertical',
+      size: 'sm',
+      isReversed: true,
+      value: {
+        _track: {
+          width: '$1',
+          flexDirection: 'column',
+        },
+      },
+    },
+    {
+      orientation: 'vertical',
+      size: 'md',
+      value: {
+        _track: {
+          width: 5,
+          flexDirection: 'column-reverse',
+        },
+      },
+    },
+    {
+      orientation: 'vertical',
+      size: 'md',
+      isReversed: true,
+      value: {
+        _track: {
+          width: 5,
+          flexDirection: 'column',
+        },
+      },
+    },
+    {
+      orientation: 'vertical',
+      size: 'lg',
+      value: {
+        _track: {
+          width: '$1.5',
+          flexDirection: 'column-reverse',
+        },
+      },
+    },
+    {
+      orientation: 'vertical',
+      size: 'lg',
+      isReversed: true,
+      value: {
+        _track: {
+          width: '$1.5',
+          flexDirection: 'column',
+        },
+      },
+    },
+  ],
+  _web: {
+    ':disabled': {
+      // @ts-ignore
+      pointerEvents: 'all !important',
+      cursor: 'not-allowed',
+      opacity: 0.4,
+    },
+  },
+  defaultProps: {
+    size: 'md',
+    orientation: 'horizontal',
+  },
+});
diff --git a/packages/config/src/theme/SliderFilledTrack.ts b/packages/config/src/theme/SliderFilledTrack.ts
new file mode 100644
index 0000000000..e3ad3e3c50
--- /dev/null
+++ b/packages/config/src/theme/SliderFilledTrack.ts
@@ -0,0 +1,26 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SliderFilledTrack = createStyle({
+  'bg': '$primary500',
+  '_dark': {
+    bg: '$primary400',
+  },
+  ':focus': {
+    bg: '$primary600',
+    _dark: {
+      bg: '$primary300',
+    },
+  },
+  ':active': {
+    bg: '$primary600',
+    _dark: {
+      bg: '$primary300',
+    },
+  },
+  ':hover': {
+    bg: '$primary600',
+    _dark: {
+      bg: '$primary300',
+    },
+  },
+});
diff --git a/packages/config/src/theme/SliderThumb.ts b/packages/config/src/theme/SliderThumb.ts
new file mode 100644
index 0000000000..324c35896b
--- /dev/null
+++ b/packages/config/src/theme/SliderThumb.ts
@@ -0,0 +1,57 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SliderThumb = createStyle({
+  'bg': '$primary500',
+  '_dark': {
+    bg: '$primary400',
+  },
+  'position': 'absolute',
+  'borderRadius': '$full',
+  ':focus': {
+    bg: '$primary600',
+    _dark: {
+      bg: '$primary300',
+    },
+  },
+  ':active': {
+    bg: '$primary600',
+    _dark: {
+      bg: '$primary300',
+    },
+  },
+  ':hover': {
+    bg: '$primary600',
+    _dark: {
+      bg: '$primary300',
+    },
+  },
+  ':disabled': {
+    bg: '$primary500',
+    _dark: {
+      bg: '$primary500',
+    },
+  },
+  '_web': {
+    //@ts-ignore
+    'cursor': 'pointer',
+    ':active': {
+      outlineWidth: 4,
+      outlineStyle: 'solid',
+      outlineColor: '$primary400',
+      _dark: {
+        outlineColor: '$primary500',
+      },
+    },
+    ':focus': {
+      outlineWidth: 4,
+      outlineStyle: 'solid',
+      outlineColor: '$primary400',
+      _dark: {
+        outlineColor: '$primary500',
+      },
+    },
+  },
+  'defaultProps': {
+    hardShadow: '1',
+  },
+});
diff --git a/packages/config/src/theme/SliderThumbInteraction.ts b/packages/config/src/theme/SliderThumbInteraction.ts
new file mode 100644
index 0000000000..b5498ce0d5
--- /dev/null
+++ b/packages/config/src/theme/SliderThumbInteraction.ts
@@ -0,0 +1,6 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SliderThumbInteraction = createStyle({
+  borderRadius: 9999,
+  zIndex: -1,
+});
diff --git a/packages/config/src/theme/SliderTrack.ts b/packages/config/src/theme/SliderTrack.ts
new file mode 100644
index 0000000000..79d5544013
--- /dev/null
+++ b/packages/config/src/theme/SliderTrack.ts
@@ -0,0 +1,23 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const SliderTrack = createStyle({
+  // h: '100%',
+  // w: '100%',
+  bg: '$backgroundLight300',
+  _dark: {
+    bg: '$backgroundDark700',
+  },
+  borderRadius: '$lg',
+  overflow: 'hidden',
+
+  variants: {
+    variant: {
+      horizontal: {
+        width: '100%',
+      },
+      vertical: {
+        height: '100%',
+      },
+    },
+  },
+});
diff --git a/packages/config/src/theme/Spinner.ts b/packages/config/src/theme/Spinner.ts
new file mode 100644
index 0000000000..72af381249
--- /dev/null
+++ b/packages/config/src/theme/Spinner.ts
@@ -0,0 +1,12 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Spinner = createStyle({
+  props: {
+    color: '$primary500',
+  },
+  _dark: {
+    props: {
+      color: '$primary400',
+    },
+  },
+});
diff --git a/packages/config/src/theme/StatusBar.ts b/packages/config/src/theme/StatusBar.ts
new file mode 100644
index 0000000000..aabfc94860
--- /dev/null
+++ b/packages/config/src/theme/StatusBar.ts
@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const StatusBar = createStyle({});
diff --git a/packages/config/src/theme/Switch.ts b/packages/config/src/theme/Switch.ts
new file mode 100644
index 0000000000..2151d580ee
--- /dev/null
+++ b/packages/config/src/theme/Switch.ts
@@ -0,0 +1,161 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Switch = createStyle({
+  'props': {
+    // todo: add support for this in style.gluestack.io
+    // trackColor: { false: '$backgroundLight300', true: '$primary600' },
+
+    // hacky fix for the above
+    //@ts-ignore
+    trackColor: { false: '$backgroundLight300', true: '$primary600' },
+    thumbColor: '$backgroundLight0',
+    //@ts-ignore
+    activeThumbColor: '$backgroundLight0',
+
+    // for ios specifically in unchecked state
+    ios_backgroundColor: '$backgroundLight300',
+  },
+  'borderRadius': '$full',
+  'variants': {
+    //@ts-ignore
+
+    size: {
+      sm: {
+        transform: [
+          {
+            scale: 0.75,
+          },
+        ],
+      },
+      md: {},
+      lg: {
+        transform: [
+          {
+            scale: 1.25,
+          },
+        ],
+      },
+    },
+  },
+  '_web': {
+    ':focus': {
+      outlineWidth: 0,
+      outlineColor: '$primary700',
+      outlineStyle: 'solid',
+      _dark: {
+        // @ts-ignore
+        outlineColor: '$primary600',
+        outlineWidth: 0,
+        outlineStyle: 'solid',
+      },
+    },
+  },
+
+  'defaultProps': {
+    size: 'md',
+  },
+  ':disabled': {
+    '_web': {
+      'cursor': 'pointer',
+      ':disabled': {
+        cursor: 'not-allowed',
+      },
+    },
+    'opacity': 0.4,
+    //@ts-ignore
+    'trackColor': { false: '$backgroundLight300', true: '$primary600' },
+    // for ios specifically in unchecked state
+    'ios_backgroundColor': '$backgroundLight300',
+    ':hover': {
+      props: {
+        //@ts-ignore
+        trackColor: { false: '$backgroundLight300', true: '$primary600' },
+      },
+    },
+  },
+  ':invalid': {
+    borderColor: '$error700',
+    borderRadius: 12,
+    borderWidth: 2,
+  },
+  ':hover': {
+    'props': {
+      // todo: add support for this in style.gluestack.io
+      // trackColor: { false: '$backgroundLight400', true: '$primary700' },
+
+      // hacky fix for the above
+      //@ts-ignore
+
+      trackColor: { false: '$backgroundLight400', true: '$primary700' },
+      ios_backgroundColor: '$backgroundLight400',
+    },
+    ':invalid': {
+      props: {
+        // todo: add support for this in style.gluestack.io
+        // trackColor: { false: '$backgroundLight400', true: '$primary700' },
+
+        // hacky fix for the above
+        //@ts-ignore
+
+        trackColor: { false: '$backgroundLight300', true: '$primary700' },
+      },
+    },
+  },
+  ':checked': {
+    props: {
+      //@ts-ignore
+      thumbColor: '$backgroundLight0',
+    },
+  },
+  '_dark': {
+    'props': {
+      //@ts-ignore
+      trackColor: { false: '$backgroundDark700', true: '$primary500' },
+      thumbColor: '$backgroundDark0',
+      //@ts-ignore
+      activeThumbColor: '$backgroundDark0',
+    },
+    ':invalid': {
+      borderColor: '$error400',
+      borderRadius: 12,
+      borderWidth: 2,
+    },
+    ':hover': {
+      'props': {
+        //@ts-ignore
+        trackColor: { false: '$backgroundDark600', true: '$primary600' },
+        ios_backgroundColor: '$backgroundLight400',
+      },
+      ':invalid': {
+        props: {
+          // todo: add support for this in style.gluestack.io
+          // trackColor: { false: '$backgroundLight400', true: '$primary700' },
+
+          // hacky fix for the above
+          //@ts-ignore
+
+          trackColor: { false: '$backgroundDark700', true: '$primary600' },
+        },
+      },
+    },
+    ':disabled': {
+      '_web': {
+        'cursor': 'pointer',
+        ':disabled': {
+          cursor: 'not-allowed',
+        },
+      },
+      'opacity': 0.4,
+      //@ts-ignore
+      'trackColor': { false: '$backgroundLight300', true: '$primary500' },
+      // for ios specifically in unchecked state
+      'ios_backgroundColor': '$backgroundLight300',
+      ':hover': {
+        props: {
+          //@ts-ignore
+          trackColor: { false: '$backgroundDark700', true: '$primary500' },
+        },
+      },
+    },
+  },
+});
diff --git a/packages/config/src/theme/Tabs.ts b/packages/config/src/theme/Tabs.ts
new file mode 100644
index 0000000000..efcf682dff
--- /dev/null
+++ b/packages/config/src/theme/Tabs.ts
@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Tabs = createStyle({});
diff --git a/packages/config/src/theme/TabsTab.ts b/packages/config/src/theme/TabsTab.ts
new file mode 100644
index 0000000000..ffec8a95ed
--- /dev/null
+++ b/packages/config/src/theme/TabsTab.ts
@@ -0,0 +1,59 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const TabsTab = createStyle({
+  'bg': 'transparent',
+  '_web': {
+    outlineWidth: 0,
+  },
+
+  'variants': {
+    size: {
+      md: {
+        px: '$4',
+        py: '$2',
+
+        _text: {
+          fontSize: '$md',
+          lineHeight: '$md',
+        },
+      },
+    },
+  },
+
+  'defaultProps': {
+    size: 'md',
+  },
+  ':hover': {
+    // bg: '$secondary50_alpha_20',
+    borderRadius: '$full',
+  },
+  ':active': {
+    // bg: '$secondary50_alpha_10',
+    borderRadius: '$full',
+  },
+  ':focus': {
+    // bg: '$secondary50_alpha_20',
+    borderRadius: '$full',
+  },
+  ':disabled': {
+    opacity: 0.5,
+  },
+
+  '_dark': {
+    ':hover': {
+      bg: '$backgroundLight500',
+      borderRadius: '$full',
+    },
+    ':active': {
+      bg: '$backgroundLight400',
+      borderRadius: '$full',
+    },
+    ':focus': {
+      bg: '$backgroundLight400',
+      borderRadius: '$full',
+    },
+    ':disabled': {
+      opacity: 0.5,
+    },
+  },
+});
diff --git a/packages/config/src/theme/TabsTabIcon.ts b/packages/config/src/theme/TabsTabIcon.ts
new file mode 100644
index 0000000000..3d3140cc52
--- /dev/null
+++ b/packages/config/src/theme/TabsTabIcon.ts
@@ -0,0 +1,8 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const TabsTabIcon = createStyle({
+  alignItems: 'center',
+  justifyContent: 'center',
+  display: 'flex',
+  mr: 12,
+});
diff --git a/packages/config/src/theme/TabsTabList.ts b/packages/config/src/theme/TabsTabList.ts
new file mode 100644
index 0000000000..f35d7f7d14
--- /dev/null
+++ b/packages/config/src/theme/TabsTabList.ts
@@ -0,0 +1,8 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const TabsTabList = createStyle({
+  flexDirection: 'row',
+  alignSelf: 'flex-start',
+  // bg: 'radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%) , rgba(255, 255, 255, 0.04);',
+  rounded: '$full',
+});
diff --git a/packages/config/src/theme/TabsTabPanel.ts b/packages/config/src/theme/TabsTabPanel.ts
new file mode 100644
index 0000000000..e9269828d6
--- /dev/null
+++ b/packages/config/src/theme/TabsTabPanel.ts
@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const TabsTabPanel = createStyle({});
diff --git a/packages/config/src/theme/TabsTabPanels.ts b/packages/config/src/theme/TabsTabPanels.ts
new file mode 100644
index 0000000000..1fba7e6b2d
--- /dev/null
+++ b/packages/config/src/theme/TabsTabPanels.ts
@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const TabsTabPanels = createStyle({});
diff --git a/packages/config/src/theme/TabsTabTitle.ts b/packages/config/src/theme/TabsTabTitle.ts
new file mode 100644
index 0000000000..b6981f6dd5
--- /dev/null
+++ b/packages/config/src/theme/TabsTabTitle.ts
@@ -0,0 +1,5 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const TabsTabTitle = createStyle({
+  fontFamily: '$body',
+});
diff --git a/packages/config/src/theme/Text.ts b/packages/config/src/theme/Text.ts
new file mode 100644
index 0000000000..afab8bfce4
--- /dev/null
+++ b/packages/config/src/theme/Text.ts
@@ -0,0 +1,114 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Text = createStyle({
+  color: '$textLight700',
+  _dark: {
+    color: '$textDark200',
+  },
+  fontWeight: '$normal',
+  fontFamily: '$body',
+  fontStyle: 'normal',
+  letterSpacing: '$md',
+
+  variants: {
+    isTruncated: {
+      true: {
+        props: {
+          // @ts-ignore
+          numberOfLines: 1,
+          ellipsizeMode: 'tail',
+        },
+      },
+    },
+    bold: {
+      true: {
+        fontWeight: '$bold',
+      },
+    },
+    underline: {
+      true: {
+        textDecorationLine: 'underline',
+      },
+    },
+    strikeThrough: {
+      true: {
+        textDecorationLine: 'line-through',
+      },
+    },
+    sub: {
+      true: {
+        fontSize: '$xs',
+        lineHeight: '$xs',
+      },
+    },
+    italic: {
+      true: {
+        fontStyle: 'italic',
+      },
+    },
+    highlight: {
+      true: {
+        bg: '$yellow500',
+      },
+    },
+    size: {
+      '2xs': {
+        fontSize: '$2xs',
+        lineHeight: '$2xs',
+      },
+      'xs': {
+        fontSize: '$xs',
+        lineHeight: '$sm',
+      },
+
+      'sm': {
+        fontSize: '$sm',
+        lineHeight: '$sm',
+      },
+
+      'md': {
+        fontSize: '$md',
+        lineHeight: '$md',
+      },
+
+      'lg': {
+        fontSize: '$lg',
+        lineHeight: '$xl',
+      },
+
+      'xl': {
+        fontSize: '$xl',
+        lineHeight: '$xl',
+      },
+
+      '2xl': {
+        fontSize: '$2xl',
+        lineHeight: '$2xl',
+      },
+
+      '3xl': {
+        fontSize: '$3xl',
+        lineHeight: '$3xl',
+      },
+
+      '4xl': {
+        fontSize: '$4xl',
+        lineHeight: '$4xl',
+      },
+
+      '5xl': {
+        fontSize: '$5xl',
+        lineHeight: '$6xl',
+      },
+
+      '6xl': {
+        fontSize: '$6xl',
+        lineHeight: '$7xl',
+      },
+    },
+  },
+
+  defaultProps: {
+    size: 'md',
+  },
+});
diff --git a/packages/config/src/theme/Textarea.ts b/packages/config/src/theme/Textarea.ts
new file mode 100644
index 0000000000..2d187a19cd
--- /dev/null
+++ b/packages/config/src/theme/Textarea.ts
@@ -0,0 +1,155 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Textarea = createStyle({
+  'w': '100%',
+  'borderWidth': 1,
+  'borderColor': '$backgroundLight300',
+  'borderRadius': '$sm',
+  'h': 100,
+  '_input': {
+    p: '$3',
+    _web: {
+      outlineWidth: 0,
+      outline: 'none',
+    },
+  },
+  ':hover': {
+    borderColor: '$borderLight400',
+  },
+
+  ':focus': {
+    'borderColor': '$primary700',
+    ':hover': {
+      borderColor: '$primary700',
+    },
+  },
+
+  ':disabled': {
+    'opacity': 0.4,
+    ':hover': {
+      borderColor: '$backgroundLight300',
+    },
+  },
+  '_dark': {
+    'borderColor': '$borderDark700',
+    ':hover': {
+      borderColor: '$borderDark600',
+    },
+    ':focus': {
+      'borderColor': '$primary400',
+      ':hover': {
+        borderColor: '$primary400',
+      },
+    },
+    ':disabled': {
+      ':hover': {
+        borderColor: '$borderDark700',
+      },
+    },
+  },
+
+  'variants': {
+    size: {
+      xl: {
+        _input: {
+          fontSize: '$xl',
+        },
+      },
+
+      lg: {
+        _input: {
+          fontSize: '$lg',
+        },
+      },
+      md: {
+        _input: {
+          fontSize: '$md',
+        },
+      },
+      sm: {
+        _input: {
+          fontSize: '$sm',
+        },
+      },
+    },
+    variant: {
+      default: {
+        '_input': {
+          _web: {
+            outlineWidth: '0',
+            outline: 'none',
+          },
+        },
+        ':focus': {
+          borderColor: '$primary700',
+          _web: {
+            boxShadow: 'inset 0 0 0 1px $primary700',
+          },
+        },
+        ':invalid': {
+          'borderColor': '$error700',
+          '_web': {
+            boxShadow: 'inset 0 0 0 1px $error700',
+          },
+          ':hover': {
+            borderColor: '$error700',
+          },
+          ':focus': {
+            ':hover': {
+              borderColor: '$primary700',
+              _web: {
+                boxShadow: 'inset 0 0 0 1px $primary700',
+              },
+            },
+          },
+          ':disabled': {
+            ':hover': {
+              borderColor: '$error700',
+              _web: {
+                boxShadow: 'inset 0 0 0 1px $error700',
+              },
+            },
+          },
+        },
+        '_dark': {
+          ':focus': {
+            borderColor: '$primary400',
+            _web: {
+              boxShadow: 'inset 0 0 0 1px $primary400',
+            },
+          },
+          ':invalid': {
+            'borderColor': '$error400',
+            '_web': {
+              boxShadow: 'inset 0 0 0 1px $error400',
+            },
+            ':hover': {
+              borderColor: '$error400',
+            },
+            ':focus': {
+              ':hover': {
+                borderColor: '$primary400',
+                _web: {
+                  boxShadow: 'inset 0 0 0 1px $primary400',
+                },
+              },
+            },
+            ':disabled': {
+              ':hover': {
+                borderColor: '$error400',
+                _web: {
+                  boxShadow: 'inset 0 0 0 1px $error400',
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+
+  'defaultProps': {
+    variant: 'default',
+    size: 'md',
+  },
+});
diff --git a/packages/config/src/theme/TextareaInput.ts b/packages/config/src/theme/TextareaInput.ts
new file mode 100644
index 0000000000..a02dee3859
--- /dev/null
+++ b/packages/config/src/theme/TextareaInput.ts
@@ -0,0 +1,25 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const TextareaInput = createStyle({
+  p: '$2',
+  color: '$textLight900',
+  textAlignVertical: 'top',
+  flex: 1,
+  props: {
+    // @ts-ignore
+    multiline: true,
+    placeholderTextColor: '$textLight500',
+  },
+  _dark: {
+    color: '$textDark50',
+    props: {
+      placeholderTextColor: '$textDark400',
+    },
+  },
+  _web: {
+    'cursor': 'text',
+    ':disabled': {
+      cursor: 'not-allowed',
+    },
+  },
+});
diff --git a/packages/config/src/theme/Toast.ts b/packages/config/src/theme/Toast.ts
new file mode 100644
index 0000000000..4b3728c1f7
--- /dev/null
+++ b/packages/config/src/theme/Toast.ts
@@ -0,0 +1,108 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Toast = createStyle({
+  px: '$4',
+  py: '$3',
+  borderRadius: '$sm',
+  flexDirection: 'row',
+  variants: {
+    action: {
+      error: {
+        bg: '$backgroundLightError',
+        borderColor: '$error300',
+        _icon: {
+          color: '$error500',
+        },
+        _dark: {
+          bg: '$backgroundDarkError',
+          borderColor: '$error700',
+          _icon: {
+            color: '$error500',
+          },
+        },
+      },
+      warning: {
+        bg: '$backgroundLightWarning',
+        borderColor: '$warning300',
+        _icon: {
+          color: '$warning500',
+        },
+        _dark: {
+          bg: '$backgroundDarkWarning',
+          borderColor: '$warning700',
+          _icon: {
+            color: '$warning500',
+          },
+        },
+      },
+      success: {
+        bg: '$backgroundLightSuccess',
+        borderColor: '$success300',
+        _icon: {
+          color: '$success500',
+        },
+        _dark: {
+          bg: '$backgroundDarkSuccess',
+          borderColor: '$success700',
+          _icon: {
+            color: '$warning500',
+          },
+        },
+      },
+      info: {
+        bg: '$backgroundLightInfo',
+        borderColor: '$info300',
+        _icon: {
+          color: '$info500',
+        },
+        _dark: {
+          bg: '$backgroundDarkInfo',
+          borderColor: '$info700',
+          _icon: {
+            color: '$info500',
+          },
+        },
+      },
+      attention: {
+        bg: '$backgroundLightMuted',
+        borderColor: '$secondary300',
+        _icon: {
+          color: '$secondary600',
+        },
+        _dark: {
+          bg: '$backgroundDarkMuted',
+          borderColor: '$secondary700',
+          _icon: {
+            color: '$secondary400',
+          },
+        },
+      },
+    },
+
+    variant: {
+      solid: {},
+      outline: {
+        borderWidth: '$1',
+        bg: '$white',
+        _dark: {
+          bg: '$black',
+        },
+      },
+      accent: {
+        borderLeftWidth: '$4',
+      },
+    },
+  },
+  m: '$3',
+
+  _web: {
+    props: {
+      pointerEvents: 'auto',
+    },
+  },
+  defaultProps: {
+    hardShadow: '5',
+    variant: 'solid',
+    action: 'attention',
+  },
+});
diff --git a/packages/config/src/theme/ToastDescription.ts b/packages/config/src/theme/ToastDescription.ts
new file mode 100644
index 0000000000..fad21175d3
--- /dev/null
+++ b/packages/config/src/theme/ToastDescription.ts
@@ -0,0 +1,11 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ToastDescription = createStyle({
+  color: '$textLight700',
+  _dark: {
+    color: '$textDark200',
+  },
+  props: {
+    size: 'sm',
+  },
+});
diff --git a/packages/config/src/theme/ToastTitle.ts b/packages/config/src/theme/ToastTitle.ts
new file mode 100644
index 0000000000..573e865ad0
--- /dev/null
+++ b/packages/config/src/theme/ToastTitle.ts
@@ -0,0 +1,12 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const ToastTitle = createStyle({
+  fontWeight: '$medium',
+  props: {
+    size: 'md',
+  },
+  color: '$textLight900',
+  _dark: {
+    color: '$textDark50',
+  },
+});
diff --git a/packages/config/src/theme/Tooltip.ts b/packages/config/src/theme/Tooltip.ts
new file mode 100644
index 0000000000..4f7d192240
--- /dev/null
+++ b/packages/config/src/theme/Tooltip.ts
@@ -0,0 +1,5 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const Tooltip = createStyle({
+  width: '$full',
+});
diff --git a/packages/config/src/theme/TooltipContent.ts b/packages/config/src/theme/TooltipContent.ts
new file mode 100644
index 0000000000..732945a7db
--- /dev/null
+++ b/packages/config/src/theme/TooltipContent.ts
@@ -0,0 +1,46 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const TooltipContent = createStyle({
+  ':initial': {
+    opacity: 0,
+    scale: 0.5,
+  },
+  ':animate': {
+    opacity: 1,
+    scale: 1,
+  },
+  ':exit': {
+    opacity: 0,
+    scale: 0.5,
+  },
+  ':transition': {
+    type: 'spring',
+    damping: 18,
+    stiffness: 250,
+    opacity: {
+      type: 'timing',
+      duration: 250,
+    },
+  },
+
+  'py': '$1',
+  'px': '$3',
+  'borderRadius': '$sm',
+  'bg': '$backgroundLight900',
+
+  '_text': {
+    fontSize: '$xs',
+    color: '$textLight50',
+  },
+
+  // @ts-ignore
+  '_dark': {
+    bg: '$backgroundDark800',
+    _text: {
+      color: '$textDark50',
+    },
+  },
+  'defaultProps': {
+    hardShadow: '2',
+  },
+});
diff --git a/packages/config/src/theme/TooltipText.ts b/packages/config/src/theme/TooltipText.ts
new file mode 100644
index 0000000000..260d74609e
--- /dev/null
+++ b/packages/config/src/theme/TooltipText.ts
@@ -0,0 +1,8 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const TooltipText = createStyle({
+  color: '$red400',
+  fontFamily: '$body',
+  //@ts-ignore
+  userSelect: 'none',
+});
diff --git a/packages/config/src/theme/VStack.ts b/packages/config/src/theme/VStack.ts
new file mode 100644
index 0000000000..1cf39d2196
--- /dev/null
+++ b/packages/config/src/theme/VStack.ts
@@ -0,0 +1,38 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const VStack = createStyle({
+  flexDirection: 'column',
+  variants: {
+    space: {
+      'xs': {
+        gap: `$1`,
+      },
+      'sm': {
+        gap: `$2`,
+      },
+      'md': {
+        gap: `$3`,
+      },
+      'lg': {
+        gap: `$4`,
+      },
+      'xl': {
+        gap: `$5`,
+      },
+      '2xl': {
+        gap: `$6`,
+      },
+      '3xl': {
+        gap: `$7`,
+      },
+      '4xl': {
+        gap: `$8`,
+      },
+    },
+    reversed: {
+      true: {
+        flexDirection: 'column-reverse',
+      },
+    },
+  },
+});
diff --git a/packages/config/src/theme/View.ts b/packages/config/src/theme/View.ts
new file mode 100644
index 0000000000..a615dcdf14
--- /dev/null
+++ b/packages/config/src/theme/View.ts
@@ -0,0 +1,3 @@
+import { createStyle } from '@gluestack-style/react';
+
+export const View = createStyle({});
diff --git a/packages/config/src/theme/index.ts b/packages/config/src/theme/index.ts
new file mode 100644
index 0000000000..0daa480e80
--- /dev/null
+++ b/packages/config/src/theme/index.ts
@@ -0,0 +1,141 @@
+export * from './Actionsheet';
+export * from './ActionsheetBackdrop';
+export * from './ActionsheetContent';
+export * from './ActionsheetDragIndicator';
+export * from './ActionsheetFlatList';
+export * from './ActionsheetIcon';
+export * from './ActionsheetIndicatorWrapper';
+export * from './ActionsheetItem';
+export * from './ActionsheetItemText';
+export * from './ActionsheetScrollView';
+export * from './ActionsheetSectionHeaderText';
+export * from './ActionsheetSectionList';
+export * from './ActionsheetVirtualizedList';
+export * from './Alert';
+export * from './AlertDialog';
+export * from './AlertDialogBackdrop';
+export * from './AlertDialogBody';
+export * from './AlertDialogCloseButton';
+export * from './AlertDialogContent';
+export * from './AlertDialogFooter';
+export * from './AlertDialogHeader';
+export * from './AlertIcon';
+export * from './AlertText';
+export * from './Avatar';
+export * from './AvatarBadge';
+export * from './AvatarFallbackText';
+export * from './AvatarGroup';
+export * from './AvatarImage';
+export * from './Badge';
+export * from './BadgeIcon';
+export * from './BadgeText';
+export * from './Box';
+export * from './Button';
+export * from './ButtonGroup';
+export * from './ButtonGroupHSpacer';
+export * from './ButtonGroupVSpacer';
+export * from './ButtonIcon';
+export * from './ButtonSpinner';
+export * from './ButtonText';
+export * from './Center';
+export * from './Checkbox';
+export * from './CheckboxGroup';
+export * from './CheckboxIcon';
+export * from './CheckboxIndicator';
+export * from './CheckboxLabel';
+export * from './Divider';
+export * from './Fab';
+export * from './FabIcon';
+export * from './FabLabel';
+export * from './FlatList';
+export * from './FormControl';
+export * from './FormControlError';
+export * from './FormControlErrorIcon';
+export * from './FormControlErrorText';
+export * from './FormControlHelper';
+export * from './FormControlHelperText';
+export * from './FormControlLabel';
+export * from './FormControlLabelText';
+export * from './HStack';
+export * from './Heading';
+export * from './Icon';
+export * from './Image';
+export * from './Input';
+export * from './InputField';
+export * from './InputIcon';
+export * from './InputSlot';
+export * from './KeyboardAvoidingView';
+export * from './Link';
+export * from './LinkText';
+export * from './Menu';
+export * from './MenuBackdrop';
+export * from './MenuItem';
+export * from './MenuLabel';
+export * from './Modal';
+export * from './ModalBackdrop';
+export * from './ModalBody';
+export * from './ModalCloseButton';
+export * from './ModalContent';
+export * from './ModalFooter';
+export * from './ModalHeader';
+export * from './Popover';
+export * from './PopoverArrow';
+export * from './PopoverBackdrop';
+export * from './PopoverBody';
+export * from './PopoverCloseButton';
+export * from './PopoverFooter';
+export * from './PopoverHeader';
+export * from './PopoverContent';
+export * from './Pressable';
+export * from './Progress';
+export * from './ProgressFilledTrack';
+export * from './Radio';
+export * from './RadioGroup';
+export * from './RadioIcon';
+export * from './RadioIndicator';
+export * from './RadioLabel';
+export * from './ScrollView';
+export * from './SectionList';
+export * from './Select';
+export * from './SelectActionsheet';
+export * from './SelectActionsheetBackdrop';
+export * from './SelectActionsheetContent';
+export * from './SelectActionsheetDragIndicator';
+export * from './SelectActionsheetFlatList';
+export * from './SelectActionsheetIcon';
+export * from './SelectActionsheetIndicatorWrapper';
+export * from './SelectActionsheetItem';
+export * from './SelectActionsheetItemText';
+export * from './SelectActionsheetScrollView';
+export * from './SelectActionsheetSectionHeaderText';
+export * from './SelectActionsheetSectionList';
+export * from './SelectActionsheetVirtualizedList';
+export * from './SelectIcon';
+export * from './SelectInput';
+export * from './SelectTrigger';
+export * from './Slider';
+export * from './SliderFilledTrack';
+export * from './SliderThumb';
+export * from './SliderThumbInteraction';
+export * from './SliderTrack';
+export * from './Spinner';
+export * from './StatusBar';
+export * from './Switch';
+export * from './Tabs';
+export * from './TabsTab';
+export * from './TabsTabIcon';
+export * from './TabsTabList';
+export * from './TabsTabPanel';
+export * from './TabsTabPanels';
+export * from './TabsTabTitle';
+export * from './Text';
+export * from './Textarea';
+export * from './TextareaInput';
+export * from './Toast';
+export * from './ToastDescription';
+export * from './ToastTitle';
+export * from './Tooltip';
+export * from './TooltipContent';
+export * from './TooltipText';
+export * from './VStack';
+export * from './View';
diff --git a/packages/config/tsconfig.json b/packages/config/tsconfig.json
new file mode 100644
index 0000000000..7325339d7c
--- /dev/null
+++ b/packages/config/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "include": ["./src"],
+  "exclude": ["node_modules", "example"],
+  "path": {
+    "@gluestack-ui/themed": ["../themed/src"]
+  },
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": true,
+    "esModuleInterop": true,
+    "importsNotUsedAsValues": "error",
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "lib": ["esnext", "dom"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitUseStrict": false,
+    "noStrictGenericChecks": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext",
+    "outDir": "./build"
+  }
+}
diff --git a/packages/themed/applyTransformToFiles.js b/packages/themed/applyTransformToFiles.js
new file mode 100644
index 0000000000..23a757b29c
--- /dev/null
+++ b/packages/themed/applyTransformToFiles.js
@@ -0,0 +1,30 @@
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const directoryPath =
+  '/Users/meenu/Documents/projects/new-gluestack/gluestack-ui/packages/themed/src/components'; // Change this to your desired directory
+
+function processFile(filePath) {
+  if (path.basename(filePath) !== 'index.tsx') {
+    const cmd = `npx jscodeshift -t customTransform.js ${filePath}`;
+    execSync(cmd, { stdio: 'inherit' });
+  }
+}
+
+function traverseDirectory(currentPath) {
+  const files = fs.readdirSync(currentPath);
+
+  files.forEach((file) => {
+    const filePath = path.join(currentPath, file);
+    const stats = fs.statSync(filePath);
+
+    if (stats.isDirectory()) {
+      traverseDirectory(filePath);
+    } else if (filePath.endsWith('.tsx')) {
+      processFile(filePath);
+    }
+  });
+}
+
+traverseDirectory(directoryPath);
diff --git a/packages/themed/copyPasteStyleFiles.js b/packages/themed/copyPasteStyleFiles.js
new file mode 100644
index 0000000000..14f94a0008
--- /dev/null
+++ b/packages/themed/copyPasteStyleFiles.js
@@ -0,0 +1,43 @@
+const fs = require('fs');
+const path = require('path');
+
+function processFile(filePath, outputDirectory) {
+  const content = fs.readFileSync(filePath, 'utf-8');
+
+  // Extract componentName from the file
+  const match = content.match(/componentName:\s+'([^']+)'/);
+  if (!match) {
+    return;
+  }
+  const componentName = match[1];
+
+  // Write the content to a new TypeScript file
+  const newFilePath = path.join(outputDirectory, `${componentName}.ts`);
+  fs.writeFileSync(newFilePath, content);
+}
+
+function traverseDirectory(directoryPath, outputDirectory) {
+  fs.readdirSync(directoryPath).forEach((file) => {
+    const filePath = path.join(directoryPath, file);
+
+    if (fs.statSync(filePath).isDirectory()) {
+      traverseDirectory(filePath, outputDirectory);
+    } else if (file.endsWith('.tsx') && file !== 'index.tsx') {
+      processFile(filePath, outputDirectory);
+    }
+  });
+}
+
+// Define the directory to traverse and the output directory
+const inputDirectory =
+  '/Users/meenu/Documents/projects/new-gluestack/gluestack-ui/packages/themed/src/components';
+const outputDirectory =
+  '/Users/meenu/Documents/projects/new-gluestack/gluestack-ui/packages/themed/src/gluestack-ui-components';
+
+// Create the output directory if it doesn't exist
+if (!fs.existsSync(outputDirectory)) {
+  fs.mkdirSync(outputDirectory, { recursive: true });
+}
+
+// Call the function to traverse the directory
+traverseDirectory(inputDirectory, outputDirectory);
diff --git a/packages/themed/createIndexFile.js b/packages/themed/createIndexFile.js
new file mode 100644
index 0000000000..d1587ff406
--- /dev/null
+++ b/packages/themed/createIndexFile.js
@@ -0,0 +1,36 @@
+const fs = require('fs');
+const path = require('path');
+
+const directoryPath =
+  '/Users/meenu/Documents/projects/new-gluestack/gluestack-ui/packages/themed/src/gluestack-ui-theme'; // Replace with your actual directory path
+
+fs.readdir(directoryPath, (err, files) => {
+  if (err) {
+    console.error('Error reading directory:', err);
+    return;
+  }
+
+  const exports = {};
+
+  files.forEach((file) => {
+    if (file !== 'index.ts' && file.endsWith('.ts')) {
+      const fileName = path.parse(file).name;
+      exports[fileName] = `require('./${file}')`;
+    }
+  });
+
+  const indexContent = `
+export default {
+${Object.entries(exports)
+  .map(([key, value]) => `  ${key}:${value},`)
+  .join('\n')}
+}
+`;
+
+  fs.writeFile(path.join(directoryPath, 'index.ts'), indexContent, (err) => {
+    if (err) {
+      console.error('Error writing index.ts:', err);
+      return;
+    }
+  });
+});
diff --git a/packages/themed/customTransform.js b/packages/themed/customTransform.js
new file mode 100644
index 0000000000..f862d5fbc6
--- /dev/null
+++ b/packages/themed/customTransform.js
@@ -0,0 +1,21 @@
+const generate = require('@babel/generator').default;
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift.withParser('tsx');
+  return j(file.source)
+    .find(j.CallExpression, {
+      callee: {
+        name: 'styled',
+      },
+    })
+    .forEach((path) => {
+      const argument = path.node.arguments;
+      const arg1 = argument[1];
+      // Check if the second argument exists and is an object
+      if (arg1 && arg1.type === 'ObjectExpression') {
+        // Replace the second argument with an empty object
+        argument[1] = j.objectExpression([]);
+      }
+    })
+    .toSource();
+}
diff --git a/packages/themed/do.js b/packages/themed/do.js
new file mode 100644
index 0000000000..523685e4a6
--- /dev/null
+++ b/packages/themed/do.js
@@ -0,0 +1,34 @@
+const fs = require('fs');
+const path = require('path');
+
+function processFile(filePath) {
+  let content = fs.readFileSync(filePath, 'utf-8');
+
+  // Remove lines starting with import
+  content = content.replace(/^import\s+.*?['";]\n/gm, '');
+
+  // Add the new import statement
+  content = `import { createStyle } from "@gluestack-ui/themed";\n${content}`;
+
+  // Write the modified content back to the file
+  fs.writeFileSync(filePath, content);
+}
+
+function traverseDirectory(directoryPath) {
+  fs.readdirSync(directoryPath).forEach((file) => {
+    const filePath = path.join(directoryPath, file);
+
+    if (fs.statSync(filePath).isDirectory()) {
+      traverseDirectory(filePath);
+    } else if (file.endsWith('.ts')) {
+      processFile(filePath);
+    }
+  });
+}
+
+// Define the directory to traverse
+const inputDirectory =
+  '/Users/meenu/Documents/projects/new-gluestack/gluestack-ui/packages/themed/src/gluestack-ui-components';
+
+// Call the function to traverse the directory
+traverseDirectory(inputDirectory);
diff --git a/packages/themed/package.json b/packages/themed/package.json
index e1b5aea245..8e0113c6b1 100644
--- a/packages/themed/package.json
+++ b/packages/themed/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/themed",
-  "version": "0.1.56",
+  "version": "1.0.1",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "module": "build/index",
@@ -30,13 +30,15 @@
   "license": "ISC",
   "dependencies": {
     "@expo/html-elements": "latest",
-    "@gluestack-style/animation-plugin": "^0.1.12",
-    "@gluestack-ui/actionsheet": "^0.2.26",
+    "@gluestack-style/animation-resolver": "^1.0.0",
+    "@gluestack-style/legend-motion-animation-driver": "^1.0.1",
+    "@gluestack-ui/actionsheet": "^0.2.25",
     "@gluestack-ui/alert": "^0.1.9",
     "@gluestack-ui/alert-dialog": "^0.1.19",
     "@gluestack-ui/avatar": "^0.1.11",
     "@gluestack-ui/button": "^0.1.29",
     "@gluestack-ui/checkbox": "^0.1.18",
+    "@gluestack-ui/config": "1.0.0",
     "@gluestack-ui/divider": "^0.1.5",
     "@gluestack-ui/fab": "^0.1.13",
     "@gluestack-ui/form-control": "^0.1.11",
@@ -69,11 +71,11 @@
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@gluestack-style/react": "^0.2.51",
+    "@gluestack-style/react": "^1.0.0",
     "@types/react-native": "^0.71.6",
     "file-loader": "^6.2.0",
     "react": "^18.2.0",
-    "react-native": "^0.70.7",
+    "react-native": "^0.72.0",
     "react-native-web": "^0.18.12",
     "ts-loader": "^9.4.4",
     "typescript": "^5.1.6",
@@ -82,7 +84,7 @@
     "webpack-cli": "^5.1.4"
   },
   "peerDependencies": {
-    "@gluestack-style/react": ">=0.2.38",
+    "@gluestack-style/react": ">=1.0",
     "@types/react-native": ">=0.72",
     "react": ">=16",
     "react-dom": ">=16",
diff --git a/packages/themed/src/components/Actionsheet/index.tsx b/packages/themed/src/components/Actionsheet/index.tsx
index 4317de483a..99ec665d94 100644
--- a/packages/themed/src/components/Actionsheet/index.tsx
+++ b/packages/themed/src/components/Actionsheet/index.tsx
@@ -1,3 +1,4 @@
+import { AnimatePresence } from '@gluestack-style/animation-resolver';
 import { createActionsheet } from '@gluestack-ui/actionsheet';
 import {
   Root,
@@ -30,7 +31,7 @@ export const AccessibleActionsheet = createActionsheet({
   SectionHeaderText,
   Icon,
   //@ts-ignore
-  AnimatePresence: Content.AnimatePresence,
+  AnimatePresence: AnimatePresence,
 });
 
 type IAccessibleActionsheet = typeof AccessibleActionsheet;
diff --git a/packages/themed/src/components/Actionsheet/styled-components/Backdrop.tsx b/packages/themed/src/components/Actionsheet/styled-components/Backdrop.tsx
index b586c55be1..b9d31083a0 100644
--- a/packages/themed/src/components/Actionsheet/styled-components/Backdrop.tsx
+++ b/packages/themed/src/components/Actionsheet/styled-components/Backdrop.tsx
@@ -1,44 +1,6 @@
-//@ts-nocheck
-import { createMotionAnimatedComponent, Motion } from '@legendapp/motion';
-import { Pressable } from 'react-native';
 import { styled } from '@gluestack-style/react';
-import { AnimationResolver } from '@gluestack-style/animation-plugin';
+import { AnimatedPressable } from '@gluestack-style/animation-resolver';
 
-const MotionPressable = createMotionAnimatedComponent(
-  Pressable
-) as typeof Motion.Pressable;
-
-export default styled(
-  MotionPressable,
-  {
-    ':initial': {
-      opacity: 0,
-    },
-    ':animate': {
-      opacity: 0.5,
-    },
-    ':exit': {
-      opacity: 0,
-    },
-    'position': 'absolute',
-    'left': 0,
-    'top': 0,
-    'right': 0,
-    'bottom': 0,
-    'bg': '$backgroundLight950',
-    // @ts-ignore
-    '_dark': {
-      bg: '$backgroundDark950',
-    },
-    // @ts-ignore
-    '_web': {
-      cursor: 'default',
-    },
-  },
-  {
-    componentName: 'ActionsheetBackdrop',
-  } as const,
-  {
-    plugins: [new AnimationResolver({})],
-  }
-);
+export default styled(AnimatedPressable, {}, {
+  componentName: 'ActionsheetBackdrop',
+} as const);
diff --git a/packages/themed/src/components/Actionsheet/styled-components/Content.tsx b/packages/themed/src/components/Actionsheet/styled-components/Content.tsx
index d6f7534497..674ecb0338 100644
--- a/packages/themed/src/components/Actionsheet/styled-components/Content.tsx
+++ b/packages/themed/src/components/Actionsheet/styled-components/Content.tsx
@@ -1,38 +1,7 @@
-import { Motion } from '@legendapp/motion';
 import { styled } from '@gluestack-style/react';
-import { AnimationResolver } from '@gluestack-style/animation-plugin';
+import { AnimatedView } from '@gluestack-style/animation-resolver';
 
-export default styled(
-  Motion.View,
-  {
-    alignItems: 'center',
-    borderTopLeftRadius: '$3xl',
-    borderTopRightRadius: '$3xl',
-    p: '$2',
-    bg: '$backgroundLight0',
-    _sectionHeaderBackground: {
-      bg: '$backgroundLight0',
-    },
-    // @ts-ignore
-    _dark: {
-      bg: '$backgroundDark900',
-      _sectionHeaderBackground: {
-        bg: '$backgroundDark900',
-      },
-    },
-    // @ts-ignore
-    _web: {
-      userSelect: 'none',
-    },
-    defaultProps: {
-      hardShadow: '5',
-    },
-  },
-  {
-    componentName: 'ActionsheetContent',
-    descendantStyle: ['_sectionHeaderBackground'],
-  } as const,
-  {
-    plugins: [new AnimationResolver({})],
-  }
-);
+export default styled(AnimatedView, {}, {
+  componentName: 'ActionsheetContent',
+  descendantStyle: ['_sectionHeaderBackground'],
+} as const);
diff --git a/packages/themed/src/components/Actionsheet/styled-components/DragIndicator.tsx b/packages/themed/src/components/Actionsheet/styled-components/DragIndicator.tsx
index 3ea82b8db0..ccc71e93bb 100644
--- a/packages/themed/src/components/Actionsheet/styled-components/DragIndicator.tsx
+++ b/packages/themed/src/components/Actionsheet/styled-components/DragIndicator.tsx
@@ -1,18 +1,6 @@
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    height: '$1',
-    width: '$16',
-    bg: '$backgroundLight400',
-    rounded: '$full',
-    _dark: {
-      bg: '$backgroundDark500',
-    },
-  },
-  {
-    componentName: 'ActionsheetDragIndicator',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'ActionsheetDragIndicator',
+} as const);
diff --git a/packages/themed/src/components/Actionsheet/styled-components/FlatList.tsx b/packages/themed/src/components/Actionsheet/styled-components/FlatList.tsx
index c9b7e6571b..8914456b51 100644
--- a/packages/themed/src/components/Actionsheet/styled-components/FlatList.tsx
+++ b/packages/themed/src/components/Actionsheet/styled-components/FlatList.tsx
@@ -1,13 +1,6 @@
 import { FlatList } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  FlatList,
-  {
-    w: '$full',
-    h: 'auto',
-  },
-  {
-    componentName: 'ActionsheetFlatList',
-  } as const
-);
+export default styled(FlatList, {}, {
+  componentName: 'ActionsheetFlatList',
+} as const);
diff --git a/packages/themed/src/components/Actionsheet/styled-components/Icon.tsx b/packages/themed/src/components/Actionsheet/styled-components/Icon.tsx
index 9efbeb8701..b380891bfc 100644
--- a/packages/themed/src/components/Actionsheet/styled-components/Icon.tsx
+++ b/packages/themed/src/components/Actionsheet/styled-components/Icon.tsx
@@ -1,20 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { StyledIcon } from '../../Icons/styled-components';
 
-export default styled(
-  StyledIcon,
-  {
-    props: {
-      size: 'sm',
-    },
-    color: '$backgroundLight500',
-    _dark: {
-      //@ts-ignore
-      color: '$backgroundDark400',
-    },
-  },
-  {
-    componentName: 'ActionsheetIcon',
-    ancestorStyle: ['_icon'],
-  } as const
-);
+export default styled(StyledIcon, {}, {
+  componentName: 'ActionsheetIcon',
+  ancestorStyle: ['_icon'],
+} as const);
diff --git a/packages/themed/src/components/Actionsheet/styled-components/IndicatorWrapper.tsx b/packages/themed/src/components/Actionsheet/styled-components/IndicatorWrapper.tsx
index 82fd994c39..10bdd27172 100644
--- a/packages/themed/src/components/Actionsheet/styled-components/IndicatorWrapper.tsx
+++ b/packages/themed/src/components/Actionsheet/styled-components/IndicatorWrapper.tsx
@@ -1,14 +1,6 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    py: '$1',
-    w: '$full',
-    alignItems: 'center',
-  },
-  {
-    componentName: 'ActionsheetIndicatorWrapper',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'ActionsheetIndicatorWrapper',
+} as const);
diff --git a/packages/themed/src/components/Actionsheet/styled-components/Item.tsx b/packages/themed/src/components/Actionsheet/styled-components/Item.tsx
index 8e16425ce8..dd6c83a21c 100644
--- a/packages/themed/src/components/Actionsheet/styled-components/Item.tsx
+++ b/packages/themed/src/components/Actionsheet/styled-components/Item.tsx
@@ -1,61 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { Pressable } from 'react-native';
 
-export default styled(
-  Pressable,
-  {
-    'p': '$3',
-    'flexDirection': 'row',
-    'alignItems': 'center',
-    'rounded': '$sm',
-    'w': '$full',
-
-    ':disabled': {
-      opacity: 0.4,
-      _web: {
-        // @ts-ignore
-        pointerEvents: 'all !important',
-        cursor: 'not-allowed',
-      },
-    },
-
-    ':hover': {
-      bg: '$backgroundLight50',
-    },
-
-    ':active': {
-      bg: '$backgroundLight100',
-    },
-
-    ':focus': {
-      bg: '$backgroundLight100',
-    },
-
-    '_dark': {
-      ':hover': {
-        bg: '$backgroundDark800',
-      },
-
-      ':active': {
-        bg: '$backgroundDark700',
-      },
-
-      ':focus': {
-        bg: '$backgroundDark700',
-      },
-    },
-
-    '_web': {
-      ':focusVisible': {
-        bg: '$backgroundLight100',
-        _dark: {
-          bg: '$backgroundDark700',
-        },
-      },
-    },
-  },
-  {
-    descendantStyle: ['_text'],
-    componentName: 'ActionsheetItem',
-  } as const
-);
+export default styled(Pressable, {}, {
+  descendantStyle: ['_text', '_icon'],
+  componentName: 'ActionsheetItem',
+} as const);
diff --git a/packages/themed/src/components/Actionsheet/styled-components/ItemText.tsx b/packages/themed/src/components/Actionsheet/styled-components/ItemText.tsx
index 945f87363c..5f91dd6bc3 100644
--- a/packages/themed/src/components/Actionsheet/styled-components/ItemText.tsx
+++ b/packages/themed/src/components/Actionsheet/styled-components/ItemText.tsx
@@ -1,20 +1,7 @@
 import { Text } from '../../Text';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Text,
-  {
-    mx: '$2',
-    props: {
-      size: 'md',
-    },
-    color: '$textLight800',
-    _dark: {
-      color: '$textDark100',
-    },
-  },
-  {
-    componentName: 'ActionsheetItemText',
-    ancestorStyle: ['_text'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'ActionsheetItemText',
+  ancestorStyle: ['_text'],
+} as const);
diff --git a/packages/themed/src/components/Actionsheet/styled-components/Root.tsx b/packages/themed/src/components/Actionsheet/styled-components/Root.tsx
index 2f44505c19..acc91e1357 100644
--- a/packages/themed/src/components/Actionsheet/styled-components/Root.tsx
+++ b/packages/themed/src/components/Actionsheet/styled-components/Root.tsx
@@ -1,13 +1,6 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    width: '$full',
-    height: '$full',
-  },
-  {
-    componentName: 'Actionsheet',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'Actionsheet',
+} as const);
diff --git a/packages/themed/src/components/Actionsheet/styled-components/ScrollView.tsx b/packages/themed/src/components/Actionsheet/styled-components/ScrollView.tsx
index 4d661aeaaa..3775dad61a 100644
--- a/packages/themed/src/components/Actionsheet/styled-components/ScrollView.tsx
+++ b/packages/themed/src/components/Actionsheet/styled-components/ScrollView.tsx
@@ -1,13 +1,6 @@
 import { ScrollView } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  ScrollView,
-  {
-    w: '$full',
-    h: 'auto',
-  },
-  {
-    componentName: 'ActionsheetScrollView',
-  } as const
-);
+export default styled(ScrollView, {}, {
+  componentName: 'ActionsheetScrollView',
+} as const);
diff --git a/packages/themed/src/components/Actionsheet/styled-components/SectionHeaderText.tsx b/packages/themed/src/components/Actionsheet/styled-components/SectionHeaderText.tsx
index 7c0ef5ea4c..d0e35b8f57 100644
--- a/packages/themed/src/components/Actionsheet/styled-components/SectionHeaderText.tsx
+++ b/packages/themed/src/components/Actionsheet/styled-components/SectionHeaderText.tsx
@@ -1,19 +1,7 @@
 import { Heading } from '../../Heading';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Heading,
-  {
-    color: '$textLight500',
-    props: { size: 'xs' },
-    textTransform: 'uppercase',
-    p: '$3',
-    _dark: {
-      color: '$textDark400',
-    },
-  },
-  {
-    componentName: 'ActionsheetSectionHeaderText',
-    ancestorStyle: ['_sectionHeaderBackground'],
-  } as const
-);
+export default styled(Heading, {}, {
+  componentName: 'ActionsheetSectionHeaderText',
+  ancestorStyle: ['_sectionHeaderText'],
+} as const);
diff --git a/packages/themed/src/components/Actionsheet/styled-components/SectionList.tsx b/packages/themed/src/components/Actionsheet/styled-components/SectionList.tsx
index cfc27dbe10..c9d7a1ec3c 100644
--- a/packages/themed/src/components/Actionsheet/styled-components/SectionList.tsx
+++ b/packages/themed/src/components/Actionsheet/styled-components/SectionList.tsx
@@ -1,13 +1,6 @@
 import { SectionList } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  SectionList,
-  {
-    w: '$full',
-    h: 'auto',
-  },
-  {
-    componentName: 'ActionsheetSectionList',
-  } as const
-);
+export default styled(SectionList, {}, {
+  componentName: 'ActionsheetSectionList',
+} as const);
diff --git a/packages/themed/src/components/Actionsheet/styled-components/VirtualizedList.tsx b/packages/themed/src/components/Actionsheet/styled-components/VirtualizedList.tsx
index 4066465707..c448e90155 100644
--- a/packages/themed/src/components/Actionsheet/styled-components/VirtualizedList.tsx
+++ b/packages/themed/src/components/Actionsheet/styled-components/VirtualizedList.tsx
@@ -1,13 +1,6 @@
 import { VirtualizedList } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  VirtualizedList,
-  {
-    w: '$full',
-    h: 'auto',
-  },
-  {
-    componentName: 'ActionsheetVirtualizedList',
-  } as const
-);
+export default styled(VirtualizedList, {}, {
+  componentName: 'ActionsheetVirtualizedList',
+} as const);
diff --git a/packages/themed/src/components/Alert/styled-components/Icon.tsx b/packages/themed/src/components/Alert/styled-components/Icon.tsx
index 84a139613d..0a55d4932d 100644
--- a/packages/themed/src/components/Alert/styled-components/Icon.tsx
+++ b/packages/themed/src/components/Alert/styled-components/Icon.tsx
@@ -1,15 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { StyledIcon } from '../../Icons/styled-components';
 
-export default styled(
-  StyledIcon,
-  {
-    props: {
-      size: 'md',
-    },
-  },
-  {
-    componentName: 'AlertIcon',
-    ancestorStyle: ['_icon'],
-  } as const
-);
+export default styled(StyledIcon, {}, {
+  componentName: 'AlertIcon',
+  ancestorStyle: ['_icon'],
+} as const);
diff --git a/packages/themed/src/components/Alert/styled-components/Root.tsx b/packages/themed/src/components/Alert/styled-components/Root.tsx
index b27330fa4a..d5fed77965 100644
--- a/packages/themed/src/components/Alert/styled-components/Root.tsx
+++ b/packages/themed/src/components/Alert/styled-components/Root.tsx
@@ -1,109 +1,7 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    alignItems: 'center',
-    p: '$3',
-    flexDirection: 'row',
-    borderRadius: '$sm',
-    variants: {
-      action: {
-        error: {
-          bg: '$backgroundLightError',
-          borderColor: '$error300',
-          _icon: {
-            color: '$error500',
-          },
-          _dark: {
-            bg: '$backgroundDarkError',
-            borderColor: '$error700',
-            _icon: {
-              color: '$error500',
-            },
-          },
-        },
-        warning: {
-          bg: '$backgroundLightWarning',
-          borderColor: '$warning300',
-          _icon: {
-            color: '$warning500',
-          },
-          _dark: {
-            bg: '$backgroundDarkWarning',
-            borderColor: '$warning700',
-            _icon: {
-              color: '$warning500',
-            },
-          },
-        },
-        success: {
-          bg: '$backgroundLightSuccess',
-          borderColor: '$success300',
-          _icon: {
-            color: '$success500',
-          },
-          _dark: {
-            bg: '$backgroundDarkSuccess',
-            borderColor: '$success700',
-            _icon: {
-              color: '$success500',
-            },
-          },
-        },
-        info: {
-          bg: '$backgroundLightInfo',
-          borderColor: '$info300',
-          _icon: {
-            color: '$info500',
-          },
-          _dark: {
-            bg: '$backgroundDarkInfo',
-            borderColor: '$info700',
-            _icon: {
-              color: '$info500',
-            },
-          },
-        },
-        muted: {
-          bg: '$backgroundLightMuted',
-          borderColor: '$secondary300',
-          _icon: {
-            color: '$secondary500',
-          },
-          _dark: {
-            bg: '$backgroundDarkMuted',
-            borderColor: '$secondary700',
-            _icon: {
-              color: '$secondary500',
-            },
-          },
-        },
-      },
-
-      variant: {
-        solid: {},
-        outline: {
-          borderWidth: '$1',
-          bg: '$white',
-          _dark: {
-            bg: '$black',
-          },
-        },
-        accent: {
-          borderLeftWidth: '$4',
-        },
-      },
-    },
-
-    defaultProps: {
-      variant: 'solid',
-      action: 'info',
-    },
-  },
-  {
-    componentName: 'Alert',
-    descendantStyle: ['_icon', '_text'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'Alert',
+  descendantStyle: ['_icon', '_text'],
+} as const);
diff --git a/packages/themed/src/components/Alert/styled-components/Text.tsx b/packages/themed/src/components/Alert/styled-components/Text.tsx
index 09d2ea646c..16983d702c 100644
--- a/packages/themed/src/components/Alert/styled-components/Text.tsx
+++ b/packages/themed/src/components/Alert/styled-components/Text.tsx
@@ -1,13 +1,7 @@
 import { Text } from '../../Text';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Text,
-  {
-    flex: 1,
-  },
-  {
-    componentName: 'AlertText',
-    ancestorStyle: ['_text'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'AlertText',
+  ancestorStyle: ['_text'],
+} as const);
diff --git a/packages/themed/src/components/AlertDialog/index.tsx b/packages/themed/src/components/AlertDialog/index.tsx
index 52ee30ee15..40068672da 100644
--- a/packages/themed/src/components/AlertDialog/index.tsx
+++ b/packages/themed/src/components/AlertDialog/index.tsx
@@ -1,3 +1,4 @@
+import { AnimatePresence } from '@gluestack-style/animation-resolver';
 import { createAlertDialog } from '@gluestack-ui/alert-dialog';
 import {
   Root,
@@ -18,7 +19,7 @@ export const AccessibleAlertDialog = createAlertDialog({
   Body,
   Backdrop,
   //@ts-ignore
-  AnimatePresence: Content.AnimatePresence,
+  AnimatePresence: AnimatePresence,
 });
 
 type IAlertDialog = typeof AccessibleAlertDialog;
diff --git a/packages/themed/src/components/AlertDialog/styled-components/Backdrop.tsx b/packages/themed/src/components/AlertDialog/styled-components/Backdrop.tsx
index f692bd6a2e..d455b6c6c1 100644
--- a/packages/themed/src/components/AlertDialog/styled-components/Backdrop.tsx
+++ b/packages/themed/src/components/AlertDialog/styled-components/Backdrop.tsx
@@ -1,53 +1,6 @@
-//@ts-nocheck
-import { createMotionAnimatedComponent, Motion } from '@legendapp/motion';
-import { Pressable } from 'react-native';
 import { styled } from '@gluestack-style/react';
-import { AnimationResolver } from '@gluestack-style/animation-plugin';
+import { AnimatedPressable } from '@gluestack-style/animation-resolver';
 
-const MotionPressable = createMotionAnimatedComponent(
-  Pressable
-) as typeof Motion.Pressable;
-
-export default styled(
-  MotionPressable,
-  {
-    ':initial': {
-      opacity: 0,
-    },
-    ':animate': {
-      opacity: 0.5,
-    },
-    ':exit': {
-      opacity: 0,
-    },
-    ':transition': {
-      type: 'spring',
-      damping: 18,
-      stiffness: 250,
-      opacity: {
-        type: 'timing',
-        duration: 250,
-      },
-    },
-    'position': 'absolute',
-    'left': 0,
-    'top': 0,
-    'right': 0,
-    'bottom': 0,
-    'bg': '$backgroundLight950',
-    // @ts-ignore
-    '_dark': {
-      bg: '$backgroundDark950',
-    },
-    // @ts-ignore
-    '_web': {
-      cursor: 'default',
-    },
-  },
-  {
-    componentName: 'AlertDialogBackdrop',
-  } as const,
-  {
-    plugins: [new AnimationResolver({})],
-  }
-);
+export default styled(AnimatedPressable, {}, {
+  componentName: 'AlertDialogBackdrop',
+} as const);
diff --git a/packages/themed/src/components/AlertDialog/styled-components/Body.tsx b/packages/themed/src/components/AlertDialog/styled-components/Body.tsx
index a82e5d96db..b2c12f1d18 100644
--- a/packages/themed/src/components/AlertDialog/styled-components/Body.tsx
+++ b/packages/themed/src/components/AlertDialog/styled-components/Body.tsx
@@ -1,13 +1,6 @@
 import { ScrollView } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  ScrollView,
-  {
-    px: '$4',
-    py: '$2',
-  },
-  {
-    componentName: 'AlertDialogBody',
-  } as const
-);
+export default styled(ScrollView, {}, {
+  componentName: 'AlertDialogBody',
+} as const);
diff --git a/packages/themed/src/components/AlertDialog/styled-components/CloseButton.tsx b/packages/themed/src/components/AlertDialog/styled-components/CloseButton.tsx
index e6db5ce997..3e42000794 100644
--- a/packages/themed/src/components/AlertDialog/styled-components/CloseButton.tsx
+++ b/packages/themed/src/components/AlertDialog/styled-components/CloseButton.tsx
@@ -1,85 +1,7 @@
 import { Pressable } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Pressable,
-  {
-    'zIndex': 1,
-    'rounded': '$sm',
-    'p': '$2',
-    '_icon': {
-      color: '$backgroundLight400',
-    },
-    '_text': {
-      color: '$backgroundLight400',
-    },
-    ':hover': {
-      _icon: {
-        color: '$backgroundLight700',
-      },
-      _text: {
-        color: '$backgroundLight700',
-      },
-    },
-
-    ':active': {
-      _icon: {
-        color: '$backgroundLight900',
-      },
-      _text: {
-        color: '$backgroundLight900',
-      },
-    },
-
-    '_dark': {
-      '_icon': {
-        color: '$backgroundLight400',
-      },
-      '_text': {
-        color: '$backgroundLight400',
-      },
-      ':hover': {
-        _icon: {
-          color: '$backgroundDark200',
-        },
-        _text: {
-          color: '$backgroundLight200',
-        },
-      },
-
-      ':active': {
-        _icon: {
-          color: '$backgroundDark100',
-        },
-      },
-    },
-
-    ':focusVisible': {
-      bg: '$backgroundLight100',
-      _icon: {
-        color: '$backgroundLight900',
-      },
-      _text: {
-        color: '$backgroundLight900',
-      },
-      _dark: {
-        bg: '$backgroundDark700',
-        _icon: {
-          color: '$backgroundLight100',
-        },
-        _text: {
-          color: '$backgroundLight100',
-        },
-      },
-    },
-
-    '_web': {
-      outlineWidth: 0,
-      cursor: 'pointer',
-    },
-  },
-  {
-    componentName: 'AlertDialogCloseButton',
-    descendantStyle: ['_icon', '_text'],
-  } as const
-);
+export default styled(Pressable, {}, {
+  componentName: 'AlertDialogCloseButton',
+  descendantStyle: ['_icon', '_text'],
+} as const);
diff --git a/packages/themed/src/components/AlertDialog/styled-components/Content.tsx b/packages/themed/src/components/AlertDialog/styled-components/Content.tsx
index eb1acb8e23..c266243e01 100644
--- a/packages/themed/src/components/AlertDialog/styled-components/Content.tsx
+++ b/packages/themed/src/components/AlertDialog/styled-components/Content.tsx
@@ -1,50 +1,7 @@
-//@ts-nocheck
-import { AnimationResolver } from '@gluestack-style/animation-plugin';
+import { AnimatedView } from '@gluestack-style/animation-resolver';
 import { styled } from '@gluestack-style/react';
-import { Motion } from '@legendapp/motion';
 
-export default styled(
-  Motion.View,
-  {
-    'bg': '$backgroundLight50',
-    'rounded': '$lg',
-    'overflow': 'hidden',
-    //@ts-ignore
-    ':initial': {
-      scale: 0.9,
-      opacity: 0,
-    },
-    ':animate': {
-      scale: 1,
-      opacity: 1,
-    },
-    ':exit': {
-      scale: 0.9,
-      opacity: 0,
-    },
-    ':transition': {
-      type: 'spring',
-      damping: 18,
-      stiffness: 250,
-      opacity: {
-        type: 'timing',
-        duration: 250,
-      },
-    },
-
-    // @ts-ignore
-    '_dark': {
-      bg: '$backgroundDark900',
-    },
-    'defaultProps': {
-      softShadow: '3',
-    },
-  },
-  {
-    componentName: 'AlertDialogContent',
-    ancestorStyle: ['_content'],
-  } as const,
-  {
-    plugins: [new AnimationResolver({})],
-  }
-);
+export default styled(AnimatedView, {}, {
+  componentName: 'AlertDialogContent',
+  ancestorStyle: ['_content'],
+} as const);
diff --git a/packages/themed/src/components/AlertDialog/styled-components/Footer.tsx b/packages/themed/src/components/AlertDialog/styled-components/Footer.tsx
index 0af4b25a73..31ba13c8a5 100644
--- a/packages/themed/src/components/AlertDialog/styled-components/Footer.tsx
+++ b/packages/themed/src/components/AlertDialog/styled-components/Footer.tsx
@@ -1,20 +1,6 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    p: '$4',
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-    borderColor: '$borderLight300',
-    _dark: {
-      borderColor: '$borderDark700',
-    },
-  },
-  {
-    componentName: 'AlertDialogFooter',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'AlertDialogFooter',
+} as const);
diff --git a/packages/themed/src/components/AlertDialog/styled-components/Header.tsx b/packages/themed/src/components/AlertDialog/styled-components/Header.tsx
index cd8d2371b0..8889694d6c 100644
--- a/packages/themed/src/components/AlertDialog/styled-components/Header.tsx
+++ b/packages/themed/src/components/AlertDialog/styled-components/Header.tsx
@@ -1,19 +1,6 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    p: '$4',
-    borderColor: '$borderLight300',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    flexDirection: 'row',
-    _dark: {
-      borderColor: '$borderDark700',
-    },
-  },
-  {
-    componentName: 'AlertDialogHeader',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'AlertDialogHeader',
+} as const);
diff --git a/packages/themed/src/components/AlertDialog/styled-components/Root.tsx b/packages/themed/src/components/AlertDialog/styled-components/Root.tsx
index d903fa4ddd..d8f6a2d05f 100644
--- a/packages/themed/src/components/AlertDialog/styled-components/Root.tsx
+++ b/packages/themed/src/components/AlertDialog/styled-components/Root.tsx
@@ -1,31 +1,7 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    w: '$full',
-    h: '$full',
-    justifyContent: 'center',
-    alignItems: 'center',
-
-    variants: {
-      size: {
-        xs: { _content: { w: '60%', maxWidth: 360 } },
-        sm: { _content: { w: '70%', maxWidth: 420 } },
-        md: { _content: { w: '80%', maxWidth: 510 } },
-        lg: { _content: { w: '90%', maxWidth: 640 } },
-        full: { _content: { w: '$full' } },
-      },
-    },
-    defaultProps: { size: 'md' },
-
-    _web: {
-      pointerEvents: 'box-none',
-    },
-  },
-  {
-    componentName: 'AlertDialog',
-    descendantStyle: ['_content'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'AlertDialog',
+  descendantStyle: ['_content'],
+} as const);
diff --git a/packages/themed/src/components/Avatar/styled-components/Badge.tsx b/packages/themed/src/components/Avatar/styled-components/Badge.tsx
index 5926f1d167..ce7b5666f8 100644
--- a/packages/themed/src/components/Avatar/styled-components/Badge.tsx
+++ b/packages/themed/src/components/Avatar/styled-components/Badge.tsx
@@ -1,21 +1,7 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    w: '$5',
-    h: '$5',
-    bg: '$success500',
-    borderRadius: '$full',
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
-    borderColor: 'white',
-    borderWidth: 2,
-  },
-  {
-    componentName: 'AvatarBadge',
-    ancestorStyle: ['_badge'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'AvatarBadge',
+  ancestorStyle: ['_badge'],
+} as const);
diff --git a/packages/themed/src/components/Avatar/styled-components/FallbackText.tsx b/packages/themed/src/components/Avatar/styled-components/FallbackText.tsx
index f8c392aba0..af549823bd 100644
--- a/packages/themed/src/components/Avatar/styled-components/FallbackText.tsx
+++ b/packages/themed/src/components/Avatar/styled-components/FallbackText.tsx
@@ -1,22 +1,7 @@
 import { Text } from '../../Text';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Text,
-  {
-    color: '$textLight0',
-    fontWeight: '$semibold',
-    props: {
-      size: 'xl',
-    },
-    overflow: 'hidden',
-    textTransform: 'uppercase',
-    _web: {
-      cursor: 'default',
-    },
-  },
-  {
-    componentName: 'AvatarFallbackText',
-    ancestorStyle: ['_text'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'AvatarFallbackText',
+  ancestorStyle: ['_text'],
+} as const);
diff --git a/packages/themed/src/components/Avatar/styled-components/Group.tsx b/packages/themed/src/components/Avatar/styled-components/Group.tsx
index 7af9427cc1..ca4cffa2a6 100644
--- a/packages/themed/src/components/Avatar/styled-components/Group.tsx
+++ b/packages/themed/src/components/Avatar/styled-components/Group.tsx
@@ -1,17 +1,7 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    flexDirection: 'row-reverse',
-    position: 'relative',
-    _avatar: {
-      ml: -10,
-    },
-  },
-  {
-    componentName: 'AvatarGroup',
-    descendantStyle: ['_avatar'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'AvatarGroup',
+  descendantStyle: ['_avatar'],
+} as const);
diff --git a/packages/themed/src/components/Avatar/styled-components/Image.tsx b/packages/themed/src/components/Avatar/styled-components/Image.tsx
index 1f4033a0eb..2cd87ea4c7 100644
--- a/packages/themed/src/components/Avatar/styled-components/Image.tsx
+++ b/packages/themed/src/components/Avatar/styled-components/Image.tsx
@@ -1,15 +1,6 @@
 import { Image } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Image,
-  {
-    w: '$full',
-    h: '$full',
-    borderRadius: '$full',
-    position: 'absolute',
-  },
-  {
-    componentName: 'AvatarImage',
-  } as const
-);
+export default styled(Image, {}, {
+  componentName: 'AvatarImage',
+} as const);
diff --git a/packages/themed/src/components/Avatar/styled-components/Root.tsx b/packages/themed/src/components/Avatar/styled-components/Root.tsx
index 517ef4b08c..8e5c130134 100644
--- a/packages/themed/src/components/Avatar/styled-components/Root.tsx
+++ b/packages/themed/src/components/Avatar/styled-components/Root.tsx
@@ -1,108 +1,8 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    borderRadius: '$full',
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative',
-    bg: '$primary600',
-    variants: {
-      size: {
-        'xs': {
-          w: '$6',
-          h: '$6',
-
-          _badge: {
-            w: '$2',
-            h: '$2',
-          },
-
-          _text: {
-            props: { size: '2xs' },
-          },
-        },
-
-        'sm': {
-          w: '$8',
-          h: '$8',
-
-          _badge: {
-            w: '$2',
-            h: '$2',
-          },
-
-          _text: {
-            props: { size: 'xs' },
-          },
-        },
-
-        'md': {
-          w: '$12',
-          h: '$12',
-
-          _badge: {
-            w: '$3',
-            h: '$3',
-          },
-
-          _text: {
-            props: { size: 'md' },
-          },
-        },
-
-        'lg': {
-          w: '$16',
-          h: '$16',
-
-          _badge: {
-            w: '$4',
-            h: '$4',
-          },
-
-          _text: {
-            props: { size: 'xl' },
-          },
-        },
-
-        'xl': {
-          w: '$24',
-          h: '$24',
-
-          _badge: {
-            w: '$6',
-            h: '$6',
-          },
-
-          _text: {
-            props: { size: '3xl' },
-          },
-        },
-
-        '2xl': {
-          w: '$32',
-          h: '$32',
-
-          _badge: {
-            w: '$8',
-            h: '$8',
-          },
-
-          _text: {
-            props: { size: '5xl' },
-          },
-        },
-      },
-    },
-    defaultProps: {
-      size: 'md',
-    },
-  },
-  {
-    componentName: 'Avatar',
-    descendantStyle: ['_badge', '_text'],
-    ancestorStyle: ['_avatar'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'Avatar',
+  descendantStyle: ['_badge', '_text'],
+  ancestorStyle: ['_avatar'],
+} as const);
diff --git a/packages/themed/src/components/Badge/styled-components/Icon.tsx b/packages/themed/src/components/Badge/styled-components/Icon.tsx
index a579e87069..93e4670a26 100644
--- a/packages/themed/src/components/Badge/styled-components/Icon.tsx
+++ b/packages/themed/src/components/Badge/styled-components/Icon.tsx
@@ -1,15 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { StyledIcon } from '../../Icons/styled-components';
 
-export default styled(
-  StyledIcon,
-  {
-    props: {
-      size: 'md',
-    },
-  },
-  {
-    componentName: 'BadgeIcon',
-    ancestorStyle: ['_icon'],
-  } as const
-);
+export default styled(StyledIcon, {}, {
+  componentName: 'BadgeIcon',
+  ancestorStyle: ['_icon'],
+} as const);
diff --git a/packages/themed/src/components/Badge/styled-components/Root.tsx b/packages/themed/src/components/Badge/styled-components/Root.tsx
index c0cebacbdb..c615a1b36e 100644
--- a/packages/themed/src/components/Badge/styled-components/Root.tsx
+++ b/packages/themed/src/components/Badge/styled-components/Root.tsx
@@ -1,173 +1,7 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    'flexDirection': 'row',
-    'alignItems': 'center',
-    'borderRadius': '$xs',
-    'variants': {
-      action: {
-        error: {
-          bg: '$backgroundLightError',
-          borderColor: '$error300',
-          _icon: {
-            color: '$error600',
-          },
-          _text: {
-            color: '$error600',
-          },
-          _dark: {
-            bg: '$backgroundDarkError',
-            borderColor: '$error700',
-            _text: {
-              color: '$error400',
-            },
-            _icon: {
-              color: '$error400',
-            },
-          },
-        },
-        warning: {
-          bg: '$backgroundLightWarning',
-          borderColor: '$warning300',
-          _icon: {
-            color: '$warning600',
-          },
-          _text: {
-            color: '$warning600',
-          },
-          _dark: {
-            bg: '$backgroundDarkWarning',
-            borderColor: '$warning700',
-            _text: {
-              color: '$warning400',
-            },
-            _icon: {
-              color: '$warning400',
-            },
-          },
-        },
-        success: {
-          bg: '$backgroundLightSuccess',
-          borderColor: '$success300',
-          _icon: {
-            color: '$success600',
-          },
-          _text: {
-            color: '$success600',
-          },
-          _dark: {
-            bg: '$backgroundDarkSuccess',
-            borderColor: '$success700',
-            _text: {
-              color: '$success400',
-            },
-            _icon: {
-              color: '$success400',
-            },
-          },
-        },
-        info: {
-          bg: '$backgroundLightInfo',
-          borderColor: '$info300',
-          _icon: {
-            color: '$info600',
-          },
-          _text: {
-            color: '$info600',
-          },
-          _dark: {
-            bg: '$backgroundDarkInfo',
-            borderColor: '$info700',
-            _text: {
-              color: '$info400',
-            },
-            _icon: {
-              color: '$info400',
-            },
-          },
-        },
-        muted: {
-          bg: '$backgroundLightMuted',
-          borderColor: '$secondary300',
-          _icon: {
-            color: '$secondary600',
-          },
-          _text: {
-            color: '$secondary600',
-          },
-          _dark: {
-            bg: '$backgroundDarkMuted',
-            borderColor: '$secondary700',
-            _text: {
-              color: '$secondary400',
-            },
-            _icon: {
-              color: '$secondary400',
-            },
-          },
-        },
-      },
-
-      variant: {
-        solid: {},
-        outline: {
-          borderWidth: '$1',
-        },
-      },
-
-      size: {
-        sm: {
-          px: '$2',
-          _icon: {
-            props: {
-              size: '2xs',
-            },
-          },
-          _text: {
-            props: {
-              size: '2xs',
-            },
-          },
-        },
-        md: {
-          px: '$2',
-          _icon: {
-            props: {
-              size: 'xs',
-            },
-          },
-          _text: {
-            props: {
-              size: 'xs',
-            },
-          },
-        },
-        lg: {
-          px: '$2',
-          _icon: {
-            props: { size: 'sm' },
-          },
-          _text: {
-            props: { size: 'sm' },
-          },
-        },
-      },
-    },
-
-    ':disabled': {
-      opacity: 0.5,
-    },
-    'defaultProps': {
-      action: 'info',
-      variant: 'solid',
-      size: 'md',
-    },
-  },
-  {
-    componentName: 'Badge',
-    descendantStyle: ['_text', '_icon'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'Badge',
+  descendantStyle: ['_text', '_icon'],
+} as const);
diff --git a/packages/themed/src/components/Badge/styled-components/Text.tsx b/packages/themed/src/components/Badge/styled-components/Text.tsx
index 8d96de80e6..56fce04933 100644
--- a/packages/themed/src/components/Badge/styled-components/Text.tsx
+++ b/packages/themed/src/components/Badge/styled-components/Text.tsx
@@ -1,13 +1,7 @@
 import { Text } from '../../Text';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Text,
-  {
-    textTransform: 'uppercase',
-  },
-  {
-    componentName: 'BadgeText',
-    ancestorStyle: ['_text'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'BadgeText',
+  ancestorStyle: ['_text'],
+} as const);
diff --git a/packages/themed/src/components/Button/styled-components/Group.tsx b/packages/themed/src/components/Button/styled-components/Group.tsx
index 73d0273ca0..82bff95b87 100644
--- a/packages/themed/src/components/Button/styled-components/Group.tsx
+++ b/packages/themed/src/components/Button/styled-components/Group.tsx
@@ -1,84 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    variants: {
-      size: {
-        xs: {
-          _button: {
-            props: {
-              size: 'xs',
-            },
-          },
-        },
-        sm: {
-          _button: {
-            props: {
-              size: 'sm',
-            },
-          },
-        },
-        md: {
-          _button: {
-            props: {
-              size: 'md',
-            },
-          },
-        },
-        lg: {
-          _button: {
-            props: {
-              size: 'lg',
-            },
-          },
-        },
-        xl: {
-          _button: {
-            _button: {
-              props: {
-                size: 'xl',
-              },
-            },
-          },
-        },
-      },
-      space: {
-        'xs': {
-          gap: '$1',
-        },
-        'sm': {
-          gap: '$2',
-        },
-        'md': {
-          gap: '$3',
-        },
-        'lg': {
-          gap: '$4',
-        },
-        'xl': {
-          gap: '$5',
-        },
-        '2xl': {
-          gap: '$6',
-        },
-        '3xl': {
-          gap: '$7',
-        },
-        '4xl': {
-          gap: '$8',
-        },
-      },
-    },
-
-    defaultProps: {
-      size: 'md',
-      space: 'sm',
-    },
-  },
-  {
-    componentName: 'ButtonGroup',
-    descendantStyle: ['_button'],
-  }
-);
+export default styled(View, {}, {
+  componentName: 'ButtonGroup',
+  descendantStyle: ['_button'],
+} as const);
diff --git a/packages/themed/src/components/Button/styled-components/GroupHSpacer.tsx b/packages/themed/src/components/Button/styled-components/GroupHSpacer.tsx
new file mode 100644
index 0000000000..a672f3e2c3
--- /dev/null
+++ b/packages/themed/src/components/Button/styled-components/GroupHSpacer.tsx
@@ -0,0 +1,7 @@
+import { styled } from '@gluestack-style/react';
+import { View } from 'react-native';
+
+export default styled(View, {}, {
+  componentName: 'ButtonGroupHSpacer',
+  ancestorStyle: ['_groupHSpacer'],
+} as const);
diff --git a/packages/themed/src/components/Button/styled-components/GroupVSpacer.tsx b/packages/themed/src/components/Button/styled-components/GroupVSpacer.tsx
new file mode 100644
index 0000000000..a60a0f91f7
--- /dev/null
+++ b/packages/themed/src/components/Button/styled-components/GroupVSpacer.tsx
@@ -0,0 +1,7 @@
+import { styled } from '@gluestack-style/react';
+import { View } from 'react-native';
+
+export default styled(View, {}, {
+  componentName: 'ButtonGroupVSpacer',
+  ancestorStyle: ['_groupVSpacer'],
+} as const);
diff --git a/packages/themed/src/components/Button/styled-components/Icon.tsx b/packages/themed/src/components/Button/styled-components/Icon.tsx
index cd88d59a8b..a6f5d7d8fe 100644
--- a/packages/themed/src/components/Button/styled-components/Icon.tsx
+++ b/packages/themed/src/components/Button/styled-components/Icon.tsx
@@ -1,15 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { StyledIcon } from '../../Icons/styled-components';
 
-export default styled(
-  StyledIcon,
-  {
-    props: {
-      size: 'md',
-    },
-  },
-  {
-    componentName: 'ButtonIcon',
-    ancestorStyle: ['_icon'],
-  } as const
-);
+export default styled(StyledIcon, {}, {
+  componentName: 'ButtonIcon',
+  ancestorStyle: ['_icon'],
+} as const);
diff --git a/packages/themed/src/components/Button/styled-components/Root.tsx b/packages/themed/src/components/Button/styled-components/Root.tsx
index b369b09203..5ba1ab2d2d 100644
--- a/packages/themed/src/components/Button/styled-components/Root.tsx
+++ b/packages/themed/src/components/Button/styled-components/Root.tsx
@@ -2,1047 +2,8 @@
 import { styled } from '@gluestack-style/react';
 import { Pressable } from 'react-native';
 
-export default styled(
-  Pressable,
-  {
-    'borderRadius': '$sm',
-    'backgroundColor': '$primary500',
-    'flexDirection': 'row',
-    'justifyContent': 'center',
-    'alignItems': 'center',
-
-    '_text': {
-      color: '$textLight0',
-      fontWeight: '$semibold',
-      _dark: {
-        color: '$textDark0',
-      },
-    },
-
-    '_icon': {
-      color: '$textLight0',
-      _dark: {
-        color: '$textDark0',
-      },
-    },
-
-    '_spinner': {
-      props: {
-        color: '$backgroundLight0',
-      },
-      _dark: {
-        props: {
-          color: '$backgroundDark0',
-        },
-      },
-    },
-
-    'variants': {
-      action: {
-        primary: {
-          'bg': '$primary500',
-          'borderColor': '$primary300',
-
-          ':hover': {
-            bg: '$primary600',
-            borderColor: '$primary400',
-          },
-
-          ':active': {
-            bg: '$primary700',
-            borderColor: '$primary700',
-          },
-
-          '_text': {
-            'color': '$primary600',
-            ':hover': {
-              color: '$primary600',
-            },
-            ':active': {
-              color: '$primary700',
-            },
-          },
-
-          '_icon': {
-            'color': '$primary600',
-            ':hover': {
-              color: '$primary600',
-            },
-            ':active': {
-              color: '$primary700',
-            },
-          },
-
-          '_spinner': {
-            'props': {
-              color: '$primary600',
-            },
-            ':hover': {
-              props: {
-                color: '$primary600',
-              },
-            },
-            ':active': {
-              props: {
-                color: '$primary700',
-              },
-            },
-          },
-
-          '_dark': {
-            'bg': '$primary400',
-            'borderColor': '$primary700',
-            ':hover': {
-              bg: '$primary500',
-              borderColor: '$primary400',
-            },
-            ':active': {
-              bg: '$primary600',
-              borderColor: '$primary300',
-            },
-            '_text': {
-              'color': '$primary300',
-              ':hover': {
-                color: '$primary300',
-              },
-              ':active': {
-                color: '$primary200',
-              },
-            },
-            '_icon': {
-              'color': '$primary300',
-              ':hover': {
-                color: '$primary300',
-              },
-              ':active': {
-                color: '$primary200',
-              },
-            },
-            '_spinner': {
-              'props': { color: '$primary300' },
-              ':hover': {
-                props: { color: '$primary300' },
-              },
-              ':active': {
-                props: { color: '$primary200' },
-              },
-            },
-
-            ':focusVisible': {
-              _web: {
-                boxShadow: 'offset 0 0 0 2px $info400',
-              },
-            },
-          },
-        },
-        secondary: {
-          'bg': '$secondary500',
-          'borderColor': '$secondary300',
-
-          ':hover': {
-            bg: '$secondary600',
-            borderColor: '$secondary400',
-          },
-
-          ':active': {
-            bg: '$secondary700',
-            borderColor: '$secondary700',
-          },
-
-          '_text': {
-            'color': '$secondary600',
-            ':hover': {
-              color: '$secondary600',
-            },
-            ':active': {
-              color: '$secondary700',
-            },
-          },
-          '_icon': {
-            'color': '$secondary600',
-            ':hover': {
-              color: '$secondary600',
-            },
-            ':active': {
-              color: '$secondary700',
-            },
-          },
-
-          '_spinner': {
-            'props': {
-              color: '$secondary600',
-            },
-            ':hover': {
-              props: { color: '$secondary600' },
-            },
-            ':active': {
-              props: { color: '$secondary700' },
-            },
-          },
-
-          '_dark': {
-            'bg': '$secondary400',
-            'borderColor': '$secondary700',
-            ':hover': {
-              bg: '$secondary500',
-              borderColor: '$secondary400',
-            },
-            ':active': {
-              bg: '$secondary600',
-              borderColor: '$secondary300',
-            },
-            '_text': {
-              'color': '$secondary300',
-              ':hover': {
-                color: '$secondary300',
-              },
-              ':active': {
-                color: '$secondary200',
-              },
-            },
-            '_icon': {
-              'color': '$secondary300',
-              ':hover': {
-                color: '$secondary300',
-              },
-              ':active': {
-                color: '$secondary200',
-              },
-            },
-            '_spinner': {
-              'props': {
-                color: '$secondary300',
-              },
-              ':hover': {
-                props: { color: '$secondary300' },
-              },
-              ':active': {
-                props: { color: '$secondary200' },
-              },
-            },
-          },
-        },
-        positive: {
-          'bg': '$success500',
-          'borderColor': '$success300',
-          ':hover': {
-            bg: '$success600',
-            borderColor: '$success400',
-          },
-
-          ':active': {
-            bg: '$success700',
-            borderColor: '$success700',
-          },
-
-          '_text': {
-            'color': '$success600',
-            ':hover': {
-              color: '$success600',
-            },
-            ':active': {
-              color: '$success700',
-            },
-          },
-          '_icon': {
-            'color': '$success600',
-            ':hover': {
-              color: '$success600',
-            },
-            ':active': {
-              color: '$success700',
-            },
-          },
-          '_spinner': {
-            'props': {
-              color: '$success600',
-            },
-            ':hover': {
-              props: { color: '$success600' },
-            },
-            ':active': {
-              props: { color: '$success700' },
-            },
-          },
-          '_dark': {
-            'bg': '$success400',
-            'borderColor': '$success700',
-            ':hover': {
-              bg: '$success500',
-              borderColor: '$success400',
-            },
-            ':active': {
-              bg: '$success600',
-              borderColor: '$success300',
-            },
-            '_text': {
-              'color': '$success300',
-              ':hover': {
-                color: '$success300',
-              },
-              ':active': {
-                color: '$success200',
-              },
-            },
-            '_icon': {
-              'color': '$success300',
-              ':hover': {
-                color: '$success300',
-              },
-              ':active': {
-                color: '$success200',
-              },
-            },
-            '_spinner': {
-              'props': {
-                color: '$success300',
-              },
-              ':hover': {
-                props: { color: '$success300' },
-              },
-              ':active': {
-                props: { color: '$success200' },
-              },
-            },
-            ':focusVisible': {
-              _web: {
-                boxShadow: 'offset 0 0 0 2px $info400',
-              },
-            },
-          },
-        },
-        negative: {
-          'bg': '$error500',
-          'borderColor': '$error300',
-          ':hover': {
-            bg: '$error600',
-            borderColor: '$error400',
-          },
-
-          ':active': {
-            bg: '$error700',
-            borderColor: '$error700',
-          },
-          '_text': {
-            'color': '$error600',
-            ':hover': {
-              color: '$error600',
-            },
-            ':active': {
-              color: '$error700',
-            },
-          },
-          '_icon': {
-            'color': '$error600',
-            ':hover': {
-              color: '$error600',
-            },
-            ':active': {
-              color: '$error700',
-            },
-          },
-          '_spinner': {
-            'props': {
-              color: '$error600',
-            },
-            ':hover': {
-              props: { color: '$error600' },
-            },
-            ':active': {
-              props: { color: '$error700' },
-            },
-          },
-          '_dark': {
-            'bg': '$error400',
-            'borderColor': '$error700',
-            ':hover': {
-              bg: '$error500',
-              borderColor: '$error400',
-            },
-            ':active': {
-              bg: '$error600',
-              borderColor: '$error300',
-            },
-            '_text': {
-              'color': '$error300',
-              ':hover': {
-                color: '$error300',
-              },
-              ':active': {
-                color: '$error200',
-              },
-            },
-            '_icon': {
-              'color': '$error300',
-              ':hover': {
-                color: '$error300',
-              },
-              ':active': {
-                color: '$error200',
-              },
-            },
-            '_spinner': {
-              'props': {
-                color: '$error300',
-              },
-              ':hover': {
-                props: { color: '$error300' },
-              },
-              ':active': {
-                props: { color: '$error200' },
-              },
-            },
-            ':focusVisible': {
-              _web: {
-                boxShadow: 'offset 0 0 0 2px $info400',
-              },
-            },
-          },
-        },
-
-        default: {
-          'bg': '$transparent',
-          ':hover': {
-            bg: '$backgroundLight50',
-          },
-          ':active': {
-            bg: 'transparent',
-          },
-          '_dark': {
-            'bg': 'transparent',
-            ':hover': {
-              bg: '$backgroundDark900',
-            },
-            ':active': {
-              bg: 'transparent',
-            },
-          },
-        },
-      },
-
-      variant: {
-        link: {
-          'px': '$0',
-          ':hover': {
-            _text: {
-              textDecorationLine: 'underline',
-            },
-          },
-          ':active': {
-            _text: {
-              textDecorationLine: 'underline',
-            },
-          },
-        },
-        outline: {
-          'bg': 'transparent',
-          'borderWidth': '$1',
-          ':hover': {
-            bg: '$backgroundLight50',
-          },
-          ':active': {
-            bg: 'transparent',
-          },
-          '_dark': {
-            'bg': 'transparent',
-            ':hover': {
-              bg: '$backgroundDark900',
-            },
-            ':active': {
-              bg: 'transparent',
-            },
-          },
-        },
-        solid: {
-          _text: {
-            'color': '$textLight0',
-            ':hover': {
-              color: '$textLight0',
-            },
-            ':active': {
-              color: '$textLight0',
-            },
-          },
-          _spinner: {
-            'props': { color: '$textLight0' },
-            ':hover': {
-              props: { color: '$textLight0' },
-            },
-            ':active': {
-              props: { color: '$textLight0' },
-            },
-          },
-          _icon: {
-            'props': { color: '$textLight0' },
-            ':hover': {
-              props: { color: '$textLight0' },
-            },
-            ':active': {
-              props: { color: '$textLight0' },
-            },
-          },
-          _dark: {
-            _text: {
-              'color': '$textDark0',
-              ':hover': {
-                color: '$textDark0',
-              },
-              ':active': {
-                color: '$textDark0',
-              },
-            },
-            _spinner: {
-              'props': { color: '$textDark0' },
-              ':hover': {
-                props: { color: '$textDark0' },
-              },
-              ':active': {
-                props: { color: '$textDark0' },
-              },
-            },
-            _icon: {
-              'props': { color: '$textDark0' },
-              ':hover': {
-                props: { color: '$textDark0' },
-              },
-              ':active': {
-                props: { color: '$textDark0' },
-              },
-            },
-          },
-        },
-      },
-
-      size: {
-        xs: {
-          px: '$3.5',
-          h: '$8',
-          _icon: {
-            props: {
-              size: '2xs',
-            },
-          },
-          _text: {
-            props: {
-              size: 'xs',
-            },
-          },
-        },
-        sm: {
-          px: '$4',
-          h: '$9',
-          _icon: {
-            props: {
-              size: 'sm',
-            },
-          },
-          _text: {
-            props: {
-              size: 'sm',
-            },
-          },
-        },
-        md: {
-          px: '$5',
-          h: '$10',
-          _icon: {
-            props: {
-              size: 'md',
-            },
-          },
-          _text: {
-            props: {
-              size: 'md',
-            },
-          },
-        },
-        lg: {
-          px: '$6',
-          h: '$11',
-          _icon: {
-            props: {
-              size: 'md',
-            },
-          },
-          _text: {
-            props: {
-              size: 'lg',
-            },
-          },
-        },
-        xl: {
-          px: '$7',
-          h: '$12',
-          _icon: {
-            props: {
-              size: 'lg',
-            },
-          },
-          _text: {
-            props: {
-              size: 'xl',
-            },
-          },
-        },
-      },
-    },
-    'compoundVariants': [
-      {
-        action: 'primary',
-        variant: 'link',
-        value: {
-          'px': '$0',
-          'bg': 'transparent',
-          ':hover': {
-            bg: 'transparent',
-          },
-          ':active': {
-            bg: 'transparent',
-          },
-          '_dark': {
-            'bg': 'transparent',
-            ':hover': {
-              bg: 'transparent',
-            },
-            ':active': {
-              bg: 'transparent',
-            },
-          },
-        },
-      },
-      {
-        action: 'secondary',
-        variant: 'link',
-        value: {
-          'px': '$0',
-          'bg': 'transparent',
-          ':hover': {
-            bg: 'transparent',
-          },
-          ':active': {
-            bg: 'transparent',
-          },
-          '_dark': {
-            'bg': 'transparent',
-            ':hover': {
-              bg: 'transparent',
-            },
-            ':active': {
-              bg: 'transparent',
-            },
-          },
-        },
-      },
-      {
-        action: 'positive',
-        variant: 'link',
-        value: {
-          'px': '$0',
-          'bg': 'transparent',
-          ':hover': {
-            bg: 'transparent',
-          },
-          ':active': {
-            bg: 'transparent',
-          },
-          '_dark': {
-            'bg': 'transparent',
-            ':hover': {
-              bg: 'transparent',
-            },
-            ':active': {
-              bg: 'transparent',
-            },
-          },
-        },
-      },
-      {
-        action: 'negative',
-        variant: 'link',
-        value: {
-          'px': '$0',
-          'bg': 'transparent',
-          ':hover': {
-            bg: 'transparent',
-          },
-          ':active': {
-            bg: 'transparent',
-          },
-          '_dark': {
-            'bg': 'transparent',
-            ':hover': {
-              bg: 'transparent',
-            },
-            ':active': {
-              bg: 'transparent',
-            },
-          },
-        },
-      },
-      {
-        action: 'primary',
-        variant: 'outline',
-        value: {
-          'bg': 'transparent',
-          ':hover': {
-            bg: '$backgroundLight50',
-          },
-          ':active': {
-            bg: 'transparent',
-          },
-          '_dark': {
-            'bg': 'transparent',
-            ':hover': {
-              bg: '$backgroundDark900',
-            },
-            ':active': {
-              bg: 'transparent',
-            },
-          },
-        },
-      },
-      {
-        action: 'secondary',
-        variant: 'outline',
-        value: {
-          'bg': 'transparent',
-          ':hover': {
-            bg: '$backgroundLight50',
-          },
-          ':active': {
-            bg: 'transparent',
-          },
-          '_dark': {
-            'bg': 'transparent',
-            ':hover': {
-              bg: '$backgroundDark900',
-            },
-            ':active': {
-              bg: 'transparent',
-            },
-          },
-        },
-      },
-      {
-        action: 'positive',
-        variant: 'outline',
-        value: {
-          'bg': 'transparent',
-          ':hover': {
-            bg: '$backgroundLight50',
-          },
-          ':active': {
-            bg: 'transparent',
-          },
-          '_dark': {
-            'bg': 'transparent',
-            ':hover': {
-              bg: '$backgroundDark900',
-            },
-            ':active': {
-              bg: 'transparent',
-            },
-          },
-        },
-      },
-      {
-        action: 'negative',
-        variant: 'outline',
-        value: {
-          'bg': 'transparent',
-          ':hover': {
-            bg: '$backgroundLight50',
-          },
-          ':active': {
-            bg: 'transparent',
-          },
-          '_dark': {
-            'bg': 'transparent',
-            ':hover': {
-              bg: '$backgroundDark900',
-            },
-            ':active': {
-              bg: 'transparent',
-            },
-          },
-        },
-      },
-      {
-        action: 'primary',
-        variant: 'solid',
-        value: {
-          _text: {
-            'color': '$textLight0',
-            ':hover': {
-              color: '$textLight0',
-            },
-            ':active': {
-              color: '$textLight0',
-            },
-          },
-          _icon: {
-            'color': '$textLight0',
-            ':hover': {
-              color: '$textLight0',
-            },
-            ':active': {
-              color: '$textLight0',
-            },
-          },
-          _spinner: {
-            'props': { color: '$textLight0' },
-            ':hover': {
-              props: { color: '$textLight0' },
-            },
-            ':active': {
-              props: { color: '$textLight0' },
-            },
-          },
-          _dark: {
-            _text: {
-              'color': '$textDark0',
-              ':hover': {
-                color: '$textDark0',
-              },
-              ':active': {
-                color: '$textDark0',
-              },
-            },
-            _icon: {
-              'color': '$textDark0',
-              ':hover': {
-                color: '$textDark0',
-              },
-              ':active': {
-                color: '$textDark0',
-              },
-            },
-            _spinner: {
-              'props': { color: '$textDark0' },
-              ':hover': {
-                props: { color: '$textDark0' },
-              },
-              ':active': {
-                props: { color: '$textDark0' },
-              },
-            },
-          },
-        },
-      },
-      {
-        action: 'secondary',
-        variant: 'solid',
-        value: {
-          _text: {
-            'color': '$textLight0',
-            ':hover': {
-              color: '$textLight0',
-            },
-            ':active': {
-              color: '$textLight0',
-            },
-          },
-          _icon: {
-            'color': '$textLight0',
-            ':hover': {
-              color: '$textLight0',
-            },
-            ':active': {
-              color: '$textLight0',
-            },
-          },
-          _spinner: {
-            'props': { color: '$textLight0' },
-            ':hover': {
-              props: { color: '$textLight0' },
-            },
-            ':active': {
-              props: { color: '$textLight0' },
-            },
-          },
-          _dark: {
-            _text: {
-              'color': '$textDark0',
-              ':hover': {
-                color: '$textDark0',
-              },
-              ':active': {
-                color: '$textDark0',
-              },
-            },
-            _icon: {
-              'color': '$textDark0',
-              ':hover': {
-                color: '$textDark0',
-              },
-              ':active': {
-                color: '$textDark0',
-              },
-            },
-            _spinner: {
-              'props': { color: '$textDark0' },
-              ':hover': {
-                props: { color: '$textDark0' },
-              },
-              ':active': {
-                props: { color: '$textDark0' },
-              },
-            },
-          },
-        },
-      },
-      {
-        action: 'positive',
-        variant: 'solid',
-        value: {
-          _text: {
-            'color': '$textLight0',
-            ':hover': {
-              color: '$textLight0',
-            },
-            ':active': {
-              color: '$textLight0',
-            },
-          },
-          _icon: {
-            'color': '$textLight0',
-            ':hover': {
-              color: '$textLight0',
-            },
-            ':active': {
-              color: '$textLight0',
-            },
-            'props': { color: '$textLight0' },
-          },
-          _spinner: {
-            'props': { color: '$textLight0' },
-            ':hover': {
-              props: { color: '$textLight0' },
-            },
-            ':active': {
-              props: { color: '$textLight0' },
-            },
-          },
-
-          _dark: {
-            _text: {
-              'color': '$textDark0',
-              ':hover': {
-                color: '$textDark0',
-              },
-              ':active': {
-                color: '$textDark0',
-              },
-            },
-            _icon: {
-              'color': '$textDark0',
-              ':hover': {
-                color: '$textDark0',
-              },
-              ':active': {
-                color: '$textDark0',
-              },
-            },
-            _spinner: {
-              'props': { color: '$textDark0' },
-              ':hover': {
-                props: { color: '$textDark0' },
-              },
-              ':active': {
-                props: { color: '$textDark0' },
-              },
-            },
-          },
-        },
-      },
-      {
-        action: 'negative',
-        variant: 'solid',
-        value: {
-          _text: {
-            'color': '$textLight0',
-            ':hover': {
-              color: '$textLight0',
-            },
-            ':active': {
-              color: '$textLight0',
-            },
-          },
-          _icon: {
-            'color': '$textLight0',
-            ':hover': {
-              color: '$textLight0',
-            },
-            ':active': {
-              color: '$textLight0',
-            },
-          },
-          _spinner: {
-            'props': { color: '$textLight0' },
-            ':hover': {
-              props: { color: '$textLight0' },
-            },
-            ':active': {
-              props: { color: '$textLight0' },
-            },
-          },
-          _dark: {
-            _text: {
-              'color': '$textDark0',
-              ':hover': {
-                color: '$textDark0',
-              },
-              ':active': {
-                color: '$textDark0',
-              },
-            },
-            _icon: {
-              'color': '$textDark0',
-              ':hover': {
-                color: '$textDark0',
-              },
-              ':active': {
-                color: '$textDark0',
-              },
-            },
-            _spinner: {
-              'props': { color: '$textDark0' },
-              ':hover': {
-                props: { color: '$textDark0' },
-              },
-              ':active': {
-                props: { color: '$textDark0' },
-              },
-            },
-          },
-        },
-      },
-    ],
-
-    'defaultProps': {
-      size: 'md',
-      variant: 'solid',
-      action: 'primary',
-    },
-
-    '_web': {
-      ':focusVisible': {
-        outlineWidth: '$0.5',
-        outlineColor: '$primary700',
-        outlineStyle: 'solid',
-        _dark: {
-          outlineColor: '$primary300',
-        },
-      },
-    },
-
-    ':disabled': {
-      opacity: 0.4,
-    },
-  },
-  {
-    componentName: 'Button',
-    descendantStyle: ['_text', '_spinner', '_icon'],
-    ancestorStyle: ['_button'],
-  } as const
-);
+export default styled(Pressable, {}, {
+  componentName: 'Button',
+  descendantStyle: ['_text', '_spinner', '_icon'],
+  ancestorStyle: ['_button'],
+} as const);
diff --git a/packages/themed/src/components/Button/styled-components/Text.tsx b/packages/themed/src/components/Button/styled-components/Text.tsx
index 7eb60dee04..265ed1d9dd 100644
--- a/packages/themed/src/components/Button/styled-components/Text.tsx
+++ b/packages/themed/src/components/Button/styled-components/Text.tsx
@@ -1,16 +1,7 @@
 import { Text } from '../../Text';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Text,
-  {
-    color: '$textLight0',
-    _web: {
-      userSelect: 'none',
-    },
-  },
-  {
-    componentName: 'ButtonText',
-    ancestorStyle: ['_text'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'ButtonText',
+  ancestorStyle: ['_text'],
+} as const);
diff --git a/packages/themed/src/components/Center/styled-components/Root.tsx b/packages/themed/src/components/Center/styled-components/Root.tsx
index d1954b448f..98c9ebfd5f 100644
--- a/packages/themed/src/components/Center/styled-components/Root.tsx
+++ b/packages/themed/src/components/Center/styled-components/Root.tsx
@@ -1,13 +1,6 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  {
-    componentName: 'Center',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'Center',
+} as const);
diff --git a/packages/themed/src/components/Checkbox/styled-components/Icon.tsx b/packages/themed/src/components/Checkbox/styled-components/Icon.tsx
index 7afa277856..c35dd11b5a 100644
--- a/packages/themed/src/components/Checkbox/styled-components/Icon.tsx
+++ b/packages/themed/src/components/Checkbox/styled-components/Icon.tsx
@@ -4,22 +4,7 @@ import { StyledIcon } from '../../Icons/styled-components';
 
 export default styled(
   StyledIcon,
-  {
-    ':checked': {
-      color: '$backgroundLight0',
-    },
-    ':disabled': {
-      opacity: 0.4,
-    },
-    '_dark': {
-      ':checked': {
-        color: '$backgroundDark0',
-      },
-      ':disabled': {
-        opacity: 0.4,
-      },
-    },
-  },
+  {},
   {
     componentName: 'CheckboxIcon',
     ancestorStyle: ['_icon'],
diff --git a/packages/themed/src/components/Checkbox/styled-components/Indicator.tsx b/packages/themed/src/components/Checkbox/styled-components/Indicator.tsx
index 51427b238b..eb48c5475c 100644
--- a/packages/themed/src/components/Checkbox/styled-components/Indicator.tsx
+++ b/packages/themed/src/components/Checkbox/styled-components/Indicator.tsx
@@ -1,120 +1,7 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    'justifyContent': 'center',
-    'alignItems': 'center',
-    'borderColor': '$borderLight400',
-    'bg': '$transparent',
-    'borderRadius': 4,
-
-    '_web': {
-      ':focusVisible': {
-        outlineWidth: '2px',
-        outlineColor: '$primary700',
-        outlineStyle: 'solid',
-        _dark: {
-          outlineColor: '$primary300',
-        },
-      },
-    },
-
-    ':checked': {
-      borderColor: '$primary600',
-      bg: '$primary600',
-    },
-
-    ':hover': {
-      'borderColor': '$borderLight500',
-      'bg': 'transparent',
-      ':invalid': {
-        borderColor: '$error700',
-      },
-      ':checked': {
-        'bg': '$primary700',
-        'borderColor': '$primary700',
-        ':disabled': {
-          'borderColor': '$primary600',
-          'bg': '$primary600',
-          'opacity': 0.4,
-          ':invalid': {
-            borderColor: '$error700',
-          },
-        },
-      },
-      ':disabled': {
-        'borderColor': '$borderLight400',
-        ':invalid': {
-          borderColor: '$error700',
-        },
-      },
-    },
-
-    ':active': {
-      ':checked': {
-        bg: '$primary800',
-        borderColor: '$primary800',
-      },
-    },
-    ':invalid': {
-      borderColor: '$error700',
-    },
-    ':disabled': {
-      opacity: 0.4,
-    },
-
-    '_dark': {
-      'borderColor': '$borderDark500',
-      'bg': '$transparent',
-
-      ':checked': {
-        borderColor: '$primary500',
-        bg: '$primary500',
-      },
-      ':hover': {
-        'borderColor': '$borderDark400',
-        'bg': 'transparent',
-        ':invalid': {
-          borderColor: '$error400',
-        },
-        ':checked': {
-          'bg': '$primary400',
-          'borderColor': '$primary400',
-          ':disabled': {
-            'borderColor': '$primary500',
-            'bg': '$primary500',
-            'opacity': 0.4,
-            ':invalid': {
-              borderColor: '$error400',
-            },
-          },
-        },
-        ':disabled': {
-          'borderColor': '$borderDark500',
-          ':invalid': {
-            borderColor: '$error400',
-          },
-        },
-      },
-      ':active': {
-        ':checked': {
-          bg: '$primary300',
-          borderColor: '$primary300',
-        },
-      },
-
-      ':invalid': {
-        borderColor: '$error400',
-      },
-      ':disabled': {
-        opacity: 0.4,
-      },
-    },
-  },
-  {
-    componentName: 'CheckboxIndicator',
-    ancestorStyle: ['_indicator'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'CheckboxIndicator',
+  ancestorStyle: ['_indicator'],
+} as const);
diff --git a/packages/themed/src/components/Checkbox/styled-components/Label.tsx b/packages/themed/src/components/Checkbox/styled-components/Label.tsx
index 9ab9e4c33d..dfe71b3ad2 100644
--- a/packages/themed/src/components/Checkbox/styled-components/Label.tsx
+++ b/packages/themed/src/components/Checkbox/styled-components/Label.tsx
@@ -1,72 +1,7 @@
 import { Text } from '../../Text';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Text,
-  {
-    'color': '$textLight600',
-    ':checked': {
-      color: '$textLight900',
-    },
-    ':hover': {
-      'color': '$textLight900',
-      ':checked': {
-        'color': '$textLight900',
-        ':disabled': {
-          color: '$textLight900',
-        },
-      },
-      ':disabled': {
-        color: '$textLight600',
-      },
-    },
-    ':active': {
-      'color': '$textLight900',
-
-      ':checked': {
-        color: '$textLight900',
-      },
-    },
-
-    ':disabled': {
-      opacity: 0.4,
-    },
-
-    '_web': {
-      MozUserSelect: 'none',
-      WebkitUserSelect: 'none',
-      msUserSelect: 'none',
-    },
-
-    '_dark': {
-      'color': '$textDark400',
-      ':checked': {
-        color: '$textDark100',
-      },
-      ':hover': {
-        'color': '$textDark100',
-        ':checked': {
-          'color': '$textDark100',
-          ':disabled': {
-            color: '$textDark100',
-          },
-        },
-      },
-      ':disabled': {
-        color: '$textDark100',
-      },
-
-      ':active': {
-        'color': '$textDark100',
-
-        ':checked': {
-          color: '$textDark100',
-        },
-      },
-    },
-  },
-  {
-    componentName: 'CheckboxLabel',
-    ancestorStyle: ['_text'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'CheckboxLabel',
+  ancestorStyle: ['_text'],
+} as const);
diff --git a/packages/themed/src/components/Checkbox/styled-components/Root.tsx b/packages/themed/src/components/Checkbox/styled-components/Root.tsx
index c14e385338..d47877e3bc 100644
--- a/packages/themed/src/components/Checkbox/styled-components/Root.tsx
+++ b/packages/themed/src/components/Checkbox/styled-components/Root.tsx
@@ -1,76 +1,7 @@
 import { Pressable } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Pressable,
-  {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-
-    variants: {
-      size: {
-        lg: {
-          _text: {
-            props: {
-              size: 'lg',
-            },
-          },
-          _icon: {
-            props: {
-              size: 'md',
-            },
-          },
-          _indicator: {
-            borderWidth: 3,
-            h: '$6',
-            w: '$6',
-          },
-        },
-        md: {
-          _text: {
-            props: {
-              size: 'md',
-            },
-          },
-
-          _icon: {
-            props: {
-              size: 'sm',
-            },
-          },
-          _indicator: {
-            borderWidth: 2,
-            h: '$5',
-            w: '$5',
-          },
-        },
-        sm: {
-          _text: {
-            props: {
-              size: 'sm',
-            },
-          },
-
-          _icon: {
-            props: {
-              size: '2xs',
-            },
-          },
-          _indicator: {
-            borderWidth: 2,
-            h: '$4',
-            w: '$4',
-          },
-        },
-      },
-    },
-    defaultProps: {
-      size: 'md',
-    },
-  },
-  {
-    componentName: 'Checkbox',
-    descendantStyle: ['_icon', '_text', '_indicator'],
-  } as const
-);
+export default styled(Pressable, {}, {
+  componentName: 'Checkbox',
+  descendantStyle: ['_icon', '_text', '_indicator'],
+} as const);
diff --git a/packages/themed/src/components/Checkbox/styled-components/Root.web.tsx b/packages/themed/src/components/Checkbox/styled-components/Root.web.tsx
index 26d6680ef3..1b2f956878 100644
--- a/packages/themed/src/components/Checkbox/styled-components/Root.web.tsx
+++ b/packages/themed/src/components/Checkbox/styled-components/Root.web.tsx
@@ -1,87 +1,7 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-
-    variants: {
-      size: {
-        lg: {
-          _text: {
-            props: {
-              size: 'lg',
-            },
-          },
-
-          _icon: {
-            props: {
-              size: 'md',
-            },
-          },
-          _indicator: {
-            borderWidth: 3,
-            h: '$6',
-            w: '$6',
-          },
-        },
-
-        md: {
-          _text: {
-            props: {
-              size: 'md',
-            },
-          },
-
-          _icon: {
-            props: {
-              size: 'sm',
-            },
-          },
-          _indicator: {
-            borderWidth: 2,
-            h: '$5',
-            w: '$5',
-          },
-        },
-
-        sm: {
-          _text: {
-            props: {
-              size: 'sm',
-            },
-          },
-
-          _icon: {
-            props: {
-              size: '2xs',
-            },
-          },
-          _indicator: {
-            borderWidth: 2,
-            h: '$4',
-            w: '$4',
-          },
-        },
-      },
-    },
-
-    defaultProps: {
-      size: 'md',
-    },
-
-    _web: {
-      'cursor': 'pointer',
-      ':disabled': {
-        cursor: 'not-allowed',
-      },
-    },
-  },
-  {
-    componentName: 'Checkbox',
-    descendantStyle: ['_icon', '_text', '_indicator'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'Checkbox',
+  descendantStyle: ['_icon', '_text', '_indicator'],
+} as const);
diff --git a/packages/themed/src/components/Divider/styled-components/Root.tsx b/packages/themed/src/components/Divider/styled-components/Root.tsx
index 679effc353..0402434e50 100644
--- a/packages/themed/src/components/Divider/styled-components/Root.tsx
+++ b/packages/themed/src/components/Divider/styled-components/Root.tsx
@@ -1,30 +1,6 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    bg: '$backgroundLight200',
-    _dark: {
-      bg: '$backgroundLight800',
-    },
-    variants: {
-      orientation: {
-        vertical: {
-          width: '$px',
-          height: '$full',
-        },
-        horizontal: {
-          height: '$px',
-          width: '$full',
-        },
-      },
-    },
-    defaultProps: {
-      orientation: 'horizontal',
-    },
-  },
-  {
-    componentName: 'Divider',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'Divider',
+} as const);
diff --git a/packages/themed/src/components/Fab/styled-components/Icon.tsx b/packages/themed/src/components/Fab/styled-components/Icon.tsx
index d91660bfce..a35a6959c3 100644
--- a/packages/themed/src/components/Fab/styled-components/Icon.tsx
+++ b/packages/themed/src/components/Fab/styled-components/Icon.tsx
@@ -1,15 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { StyledIcon } from '../../Icons/styled-components';
 
-export default styled(
-  StyledIcon,
-  {
-    props: {
-      size: 'md',
-    },
-  },
-  {
-    componentName: 'FabIcon',
-    ancestorStyle: ['_icon'],
-  } as const
-);
+export default styled(StyledIcon, {}, {
+  componentName: 'FabIcon',
+  ancestorStyle: ['_icon'],
+} as const);
diff --git a/packages/themed/src/components/Fab/styled-components/Label.tsx b/packages/themed/src/components/Fab/styled-components/Label.tsx
index 1f1f4ee467..6dfaebd166 100644
--- a/packages/themed/src/components/Fab/styled-components/Label.tsx
+++ b/packages/themed/src/components/Fab/styled-components/Label.tsx
@@ -1,13 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { Text } from '../../Text';
 
-export default styled(
-  Text,
-  {
-    color: '$textLight50',
-  },
-  {
-    componentName: 'FabLabel',
-    ancestorStyle: ['_text'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'FabLabel',
+  ancestorStyle: ['_text'],
+} as const);
diff --git a/packages/themed/src/components/Fab/styled-components/Root.tsx b/packages/themed/src/components/Fab/styled-components/Root.tsx
index 6faedaf50b..59b260e0e5 100644
--- a/packages/themed/src/components/Fab/styled-components/Root.tsx
+++ b/packages/themed/src/components/Fab/styled-components/Root.tsx
@@ -1,189 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { Pressable } from 'react-native';
 
-export default styled(
-  Pressable,
-  {
-    'bg': '$primary500',
-    'rounded': '$full',
-    'zIndex': 20,
-    'p': 16,
-    'flexDirection': 'row',
-
-    'alignItems': 'center',
-    'justifyContent': 'center',
-    'position': 'absolute',
-    ':hover': {
-      bg: '$primary600',
-    },
-
-    ':active': {
-      bg: '$primary700',
-    },
-
-    ':disabled': {
-      opacity: 0.4,
-      _web: {
-        // @ts-ignore
-        pointerEvents: 'all !important',
-        cursor: 'not-allowed',
-      },
-    },
-
-    '_text': {
-      color: '$textLight50',
-      fontWeight: '$normal',
-      _dark: {
-        _text: {
-          color: '$textDark50',
-        },
-      },
-    },
-
-    '_icon': {
-      'color': '$textLight50',
-      ':hover': {
-        color: '$textLight0',
-      },
-      ':active': {
-        color: '$textLight0',
-      },
-      '_dark': {
-        _icon: {
-          'color': '$textDark0',
-          ':hover': {
-            color: '$textDark0',
-          },
-          ':active': {
-            color: '$textDark0',
-          },
-        },
-      },
-    },
-
-    '_dark': {
-      'bg': '$primary400',
-      ':hover': {
-        bg: '$primary500',
-      },
-      ':active': {
-        bg: '$primary600',
-      },
-      ':disabled': {
-        opacity: 0.4,
-        _web: {
-          cursor: 'not-allowed',
-        },
-      },
-    },
-
-    '_web': {
-      ':focusVisible': {
-        outlineWidth: 2,
-        outlineColor: '$primary700',
-        outlineStyle: 'solid',
-        _dark: {
-          outlineColor: '$primary300',
-        },
-      },
-    },
-
-    'variants': {
-      size: {
-        sm: {
-          px: '$2.5',
-          py: '$2.5',
-          _text: {
-            fontSize: '$sm',
-          },
-          _icon: {
-            props: {
-              size: 'sm',
-            },
-          },
-        },
-        md: {
-          px: '$3',
-          py: '$3',
-          _text: {
-            fontSize: '$md',
-          },
-          _icon: {
-            props: {
-              size: 'md',
-            },
-          },
-        },
-        lg: {
-          px: '$4',
-          py: '$4',
-          _text: {
-            fontSize: '$lg',
-          },
-          _icon: {
-            props: {
-              size: 'md',
-            },
-          },
-        },
-      },
-
-      placement: {
-        'top right': {
-          top: '$4',
-          right: '$4',
-        },
-
-        'top left': {
-          top: '$4',
-          left: '$4',
-        },
-
-        'bottom right': {
-          bottom: '$4',
-          right: '$4',
-        },
-
-        'bottom left': {
-          bottom: '$4',
-          left: '$4',
-        },
-
-        'top center': {
-          top: '$4',
-          alignSelf: 'center',
-          // TODO: fix this, this is correct way, but React Native doesn't support this on Native
-          // left: '50%',
-          // transform: [
-          //   {
-          //     // @ts-ignore
-          //     translateX: '-50%',
-          //   },
-          // ],
-        },
-
-        'bottom center': {
-          bottom: '$4',
-          alignSelf: 'center',
-          // TODO: fix this, this is correct way, but React Native doesn't support this on Native
-          // left: '50%',
-          // transform: [
-          //   {
-          //     // @ts-ignore
-          //     translateX: '-50%',
-          //   },
-          // ],
-        },
-      },
-    },
-    'defaultProps': {
-      placement: 'bottom right',
-      size: 'md',
-      hardShadow: '2',
-    },
-  },
-  {
-    componentName: 'Fab',
-    descendantStyle: ['_text', '_icon'],
-  } as const
-);
+export default styled(Pressable, {}, {
+  componentName: 'Fab',
+  descendantStyle: ['_text', '_icon'],
+} as const);
diff --git a/packages/themed/src/components/FormControl/styled-components/Error.tsx b/packages/themed/src/components/FormControl/styled-components/Error.tsx
index 40bf3edb55..4dda333f01 100644
--- a/packages/themed/src/components/FormControl/styled-components/Error.tsx
+++ b/packages/themed/src/components/FormControl/styled-components/Error.tsx
@@ -1,15 +1,6 @@
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    mt: '$1',
-  },
-  {
-    componentName: 'FormControlError',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'FormControlError',
+} as const);
diff --git a/packages/themed/src/components/FormControl/styled-components/ErrorIcon.tsx b/packages/themed/src/components/FormControl/styled-components/ErrorIcon.tsx
index a9b230c21f..8bdaddc04e 100644
--- a/packages/themed/src/components/FormControl/styled-components/ErrorIcon.tsx
+++ b/packages/themed/src/components/FormControl/styled-components/ErrorIcon.tsx
@@ -1,20 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { StyledIcon } from '../../Icons/styled-components';
 
-export default styled(
-  StyledIcon,
-  {
-    color: '$error700',
-    _dark: {
-      //@ts-ignore
-      color: '$error400',
-    },
-    props: {
-      size: 'sm',
-    },
-  },
-  {
-    componentName: 'FormControlErrorIcon',
-    ancestorStyle: ['_icon'],
-  } as const
-);
+export default styled(StyledIcon, {}, {
+  componentName: 'FormControlErrorIcon',
+  ancestorStyle: ['_icon'],
+} as const);
diff --git a/packages/themed/src/components/FormControl/styled-components/ErrorText.tsx b/packages/themed/src/components/FormControl/styled-components/ErrorText.tsx
index 826e1d423e..d448c9fb26 100644
--- a/packages/themed/src/components/FormControl/styled-components/ErrorText.tsx
+++ b/packages/themed/src/components/FormControl/styled-components/ErrorText.tsx
@@ -1,20 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { Text } from '../../Text';
 
-export default styled(
-  Text,
-  {
-    props: {
-      size: 'xs',
-    },
-    color: '$error700',
-    ml: '$1',
-    _dark: {
-      color: '$error400',
-    },
-  },
-  {
-    componentName: 'FormControlErrorText',
-    ancestorStyle: ['_errorText'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'FormControlErrorText',
+  ancestorStyle: ['_errorText'],
+} as const);
diff --git a/packages/themed/src/components/FormControl/styled-components/Helper.tsx b/packages/themed/src/components/FormControl/styled-components/Helper.tsx
index a55bc602ba..3154e6fc8c 100644
--- a/packages/themed/src/components/FormControl/styled-components/Helper.tsx
+++ b/packages/themed/src/components/FormControl/styled-components/Helper.tsx
@@ -1,15 +1,6 @@
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    mt: '$1',
-  },
-  {
-    componentName: 'FormControlHelper',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'FormControlHelper',
+} as const);
diff --git a/packages/themed/src/components/FormControl/styled-components/HelperText.tsx b/packages/themed/src/components/FormControl/styled-components/HelperText.tsx
index e530c5ad9b..a1f608a6c2 100644
--- a/packages/themed/src/components/FormControl/styled-components/HelperText.tsx
+++ b/packages/themed/src/components/FormControl/styled-components/HelperText.tsx
@@ -1,19 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { Text } from '../../Text';
 
-export default styled(
-  Text,
-  {
-    props: {
-      size: 'xs',
-    },
-    color: '$textLight500',
-    _dark: {
-      color: '$textDark400',
-    },
-  },
-  {
-    componentName: 'FormControlHelperText',
-    ancestorStyle: ['_helperText'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'FormControlHelperText',
+  ancestorStyle: ['_helperText'],
+} as const);
diff --git a/packages/themed/src/components/FormControl/styled-components/Label.tsx b/packages/themed/src/components/FormControl/styled-components/Label.tsx
index 7d1778c2e9..089eb5bd1f 100644
--- a/packages/themed/src/components/FormControl/styled-components/Label.tsx
+++ b/packages/themed/src/components/FormControl/styled-components/Label.tsx
@@ -1,16 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    mb: '$1',
-  },
-  {
-    componentName: 'FormControlLabel',
-    descendantStyle: ['_labelText'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'FormControlLabel',
+  descendantStyle: ['_labelText'],
+} as const);
diff --git a/packages/themed/src/components/FormControl/styled-components/LabelAstrick.tsx b/packages/themed/src/components/FormControl/styled-components/LabelAstrick.tsx
index 140856974b..8e5b1968f1 100644
--- a/packages/themed/src/components/FormControl/styled-components/LabelAstrick.tsx
+++ b/packages/themed/src/components/FormControl/styled-components/LabelAstrick.tsx
@@ -1,17 +1,7 @@
 // import { Text } from '@gluestack-ui/ui';
 import { styled } from '@gluestack-style/react';
 import { Text } from '../../Text';
-export default styled(
-  Text,
-  {
-    ml: '$1',
-    color: '$error700',
-    _dark: {
-      color: '$error400',
-    },
-  },
-  {
-    componentName: 'FormControlErrorText',
-    ancestorStyle: ['_labelAstrick'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'FormControlErrorText',
+  ancestorStyle: ['_labelAstrick'],
+} as const);
diff --git a/packages/themed/src/components/FormControl/styled-components/LabelText.tsx b/packages/themed/src/components/FormControl/styled-components/LabelText.tsx
index 352bbf5282..c162a8cee6 100644
--- a/packages/themed/src/components/FormControl/styled-components/LabelText.tsx
+++ b/packages/themed/src/components/FormControl/styled-components/LabelText.tsx
@@ -1,17 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { Text } from '../../Text';
 
-export default styled(
-  Text,
-  {
-    fontWeight: '$medium',
-    color: '$textLight900',
-    _dark: {
-      color: '$textDark50',
-    },
-  },
-  {
-    componentName: 'FormControlLabelText',
-    ancestorStyle: ['_labelText'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'FormControlLabelText',
+  ancestorStyle: ['_labelText'],
+} as const);
diff --git a/packages/themed/src/components/FormControl/styled-components/Root.tsx b/packages/themed/src/components/FormControl/styled-components/Root.tsx
index 63c8f18d91..98ca0d40a3 100644
--- a/packages/themed/src/components/FormControl/styled-components/Root.tsx
+++ b/packages/themed/src/components/FormControl/styled-components/Root.tsx
@@ -1,68 +1,7 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    flexDirection: 'column',
-    variants: {
-      size: {
-        sm: {
-          _labelText: {
-            props: { size: 'sm' },
-          },
-          _labelAstrick: {
-            props: { size: 'sm' },
-          },
-          _helperText: {
-            props: { size: 'xs' },
-          },
-          _errorText: {
-            props: { size: 'xs' },
-          },
-        },
-        md: {
-          _labelText: {
-            props: { size: 'md' },
-          },
-          _labelAstrick: {
-            props: { size: 'md' },
-          },
-          _helperText: {
-            props: { size: 'sm' },
-          },
-          _errorText: {
-            props: { size: 'sm' },
-          },
-        },
-        lg: {
-          _labelText: {
-            props: { size: 'lg' },
-          },
-          _labelAstrick: {
-            props: { size: 'lg' },
-          },
-          _helperText: {
-            props: { size: 'md' },
-          },
-          _errorText: {
-            props: { size: 'md' },
-          },
-        },
-      },
-    },
-
-    defaultProps: {
-      size: 'md',
-    },
-  },
-  {
-    componentName: 'FormControl',
-    descendantStyle: [
-      '_labelText',
-      '_helperText',
-      '_errorText',
-      '_labelAstrick',
-    ],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'FormControl',
+  descendantStyle: ['_labelText', '_helperText', '_errorText', '_labelAstrick'],
+} as const);
diff --git a/packages/themed/src/components/HStack/styled-components/Root.tsx b/packages/themed/src/components/HStack/styled-components/Root.tsx
index 8969124c1b..2a2e32eef6 100644
--- a/packages/themed/src/components/HStack/styled-components/Root.tsx
+++ b/packages/themed/src/components/HStack/styled-components/Root.tsx
@@ -1,45 +1,6 @@
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    flexDirection: 'row',
-    variants: {
-      space: {
-        'xs': {
-          gap: `$1`,
-        },
-        'sm': {
-          gap: `$2`,
-        },
-        'md': {
-          gap: `$3`,
-        },
-        'lg': {
-          gap: `$4`,
-        },
-        'xl': {
-          gap: `$5`,
-        },
-        '2xl': {
-          gap: `$6`,
-        },
-        '3xl': {
-          gap: `$7`,
-        },
-        '4xl': {
-          gap: `$8`,
-        },
-      },
-      reversed: {
-        true: {
-          flexDirection: 'row-reverse',
-        },
-      },
-    },
-  },
-  {
-    componentName: 'HStack',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'HStack',
+} as const);
diff --git a/packages/themed/src/components/HStack/styled-components/Spacer.tsx b/packages/themed/src/components/HStack/styled-components/Spacer.tsx
new file mode 100644
index 0000000000..4245465dad
--- /dev/null
+++ b/packages/themed/src/components/HStack/styled-components/Spacer.tsx
@@ -0,0 +1,6 @@
+import { styled } from '@gluestack-style/react';
+import { View } from 'react-native';
+
+export default styled(View, {}, {
+  componentName: 'HStackSpacer',
+} as const);
diff --git a/packages/themed/src/components/Heading/styled-components/Root.tsx b/packages/themed/src/components/Heading/styled-components/Root.tsx
index 09ebef8497..be5fcf8255 100644
--- a/packages/themed/src/components/Heading/styled-components/Root.tsx
+++ b/packages/themed/src/components/Heading/styled-components/Root.tsx
@@ -1,129 +1,5 @@
 import { styled } from '@gluestack-style/react';
-import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
-export default styled(
-  H3,
-  {
-    color: '$textLight900',
-    letterSpacing: '$sm',
-    fontWeight: '$bold',
-    fontFamily: '$heading',
-
-    // Overrides expo-html default styling
-    marginVertical: 0,
-    _dark: {
-      color: '$textDark50',
-    },
-    variants: {
-      isTruncated: {
-        true: {
-          props: {
-            // @ts-ignore
-            numberOfLines: 1,
-            ellipsizeMode: 'tail',
-          },
-        },
-      },
-      bold: {
-        true: {
-          fontWeight: '$bold',
-        },
-      },
-      underline: {
-        true: {
-          textDecorationLine: 'underline',
-        },
-      },
-      strikeThrough: {
-        true: {
-          textDecorationLine: 'line-through',
-        },
-      },
-      sub: {
-        true: {
-          fontSize: '$xs',
-          lineHeight: '$xs',
-        },
-      },
-      italic: {
-        true: {
-          fontStyle: 'italic',
-        },
-      },
-      highlight: {
-        true: {
-          bg: '$yellow500',
-        },
-      },
-      size: {
-        '5xl': {
-          //@ts-ignore
-          props: { as: H1 },
-          fontSize: '$6xl',
-          lineHeight: '$7xl',
-        },
-        '4xl': {
-          //@ts-ignore
-          props: { as: H1 },
-          fontSize: '$5xl',
-          lineHeight: '$6xl',
-        },
-
-        '3xl': {
-          //@ts-ignore
-          props: { as: H1 },
-          fontSize: '$4xl',
-          lineHeight: '$5xl',
-        },
-
-        '2xl': {
-          //@ts-ignore
-          props: { as: H2 },
-          fontSize: '$3xl',
-          lineHeight: '$3xl',
-        },
-
-        'xl': {
-          //@ts-ignore
-          props: { as: H3 },
-          fontSize: '$2xl',
-          lineHeight: '$3xl',
-        },
-
-        'lg': {
-          //@ts-ignore
-          props: { as: H4 },
-          fontSize: '$xl',
-          lineHeight: '$2xl',
-        },
-
-        'md': {
-          //@ts-ignore
-          props: { as: H5 },
-          fontSize: '$lg',
-          lineHeight: '$lg',
-        },
-
-        'sm': {
-          //@ts-ignore
-          props: { as: H6 },
-          fontSize: '$md',
-          lineHeight: '$lg',
-        },
-
-        'xs': {
-          //@ts-ignore
-          props: { as: H6 },
-          fontSize: '$sm',
-          lineHeight: '$xs',
-        },
-      },
-    },
-
-    defaultProps: {
-      size: 'lg',
-    },
-  },
-  {
-    componentName: 'Heading',
-  } as const
-);
+import { H4 } from '@expo/html-elements';
+export default styled(H4, {}, {
+  componentName: 'Heading',
+} as const);
diff --git a/packages/themed/src/components/Icons/Icons/Add.tsx b/packages/themed/src/components/Icons/Icons/Add.tsx
index b497039522..4d01bea0ca 100644
--- a/packages/themed/src/components/Icons/Icons/Add.tsx
+++ b/packages/themed/src/components/Icons/Icons/Add.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const AddIcon: any = createIcon({
+const AddIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/AtSign.tsx b/packages/themed/src/components/Icons/Icons/AtSign.tsx
index 4a049cca95..5e230c6c18 100644
--- a/packages/themed/src/components/Icons/Icons/AtSign.tsx
+++ b/packages/themed/src/components/Icons/Icons/AtSign.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const AtSignIcon: any = createIcon({
+const AtSignIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Bell.tsx b/packages/themed/src/components/Icons/Icons/Bell.tsx
index 5b0b4b635b..a716d8fd9b 100644
--- a/packages/themed/src/components/Icons/Icons/Bell.tsx
+++ b/packages/themed/src/components/Icons/Icons/Bell.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const BellIcon: any = createIcon({
+const BellIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Calendar.tsx b/packages/themed/src/components/Icons/Icons/Calendar.tsx
index 510c36de35..cb5b62cb8f 100644
--- a/packages/themed/src/components/Icons/Icons/Calendar.tsx
+++ b/packages/themed/src/components/Icons/Icons/Calendar.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const CalendarDaysIcon: any = createIcon({
+const CalendarDaysIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Circle.tsx b/packages/themed/src/components/Icons/Icons/Circle.tsx
index 9c14402a23..c084b40d10 100644
--- a/packages/themed/src/components/Icons/Icons/Circle.tsx
+++ b/packages/themed/src/components/Icons/Icons/Circle.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const CircleIcon: any = createIcon({
+const CircleIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Clock.tsx b/packages/themed/src/components/Icons/Icons/Clock.tsx
index 8d97887d2a..12781fbb20 100644
--- a/packages/themed/src/components/Icons/Icons/Clock.tsx
+++ b/packages/themed/src/components/Icons/Icons/Clock.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const ClockIcon: any = createIcon({
+const ClockIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Edit.tsx b/packages/themed/src/components/Icons/Icons/Edit.tsx
index d9494bee06..6fd7e5a086 100644
--- a/packages/themed/src/components/Icons/Icons/Edit.tsx
+++ b/packages/themed/src/components/Icons/Icons/Edit.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const EditIcon: any = createIcon({
+const EditIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Eye.tsx b/packages/themed/src/components/Icons/Icons/Eye.tsx
index bd9b4a5898..d6c8a15e49 100644
--- a/packages/themed/src/components/Icons/Icons/Eye.tsx
+++ b/packages/themed/src/components/Icons/Icons/Eye.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const EyeIcon: any = createIcon({
+const EyeIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
@@ -28,7 +28,7 @@ const EyeIcon: any = createIcon({
 
 EyeIcon.displayName = 'EyeIcon';
 
-const EyeOffIcon: any = createIcon({
+const EyeOffIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Favourite.tsx b/packages/themed/src/components/Icons/Icons/Favourite.tsx
index 7ad835256f..c22fbde902 100644
--- a/packages/themed/src/components/Icons/Icons/Favourite.tsx
+++ b/packages/themed/src/components/Icons/Icons/Favourite.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const FavouriteIcon: any = createIcon({
+const FavouriteIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Globe.tsx b/packages/themed/src/components/Icons/Icons/Globe.tsx
index 70749e5cbf..59b8da761a 100644
--- a/packages/themed/src/components/Icons/Icons/Globe.tsx
+++ b/packages/themed/src/components/Icons/Icons/Globe.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const GlobeIcon: any = createIcon({
+const GlobeIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Link.tsx b/packages/themed/src/components/Icons/Icons/Link.tsx
index a870d3fb30..2aac2a70f7 100644
--- a/packages/themed/src/components/Icons/Icons/Link.tsx
+++ b/packages/themed/src/components/Icons/Icons/Link.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const LinkIcon: any = createIcon({
+const LinkIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
@@ -27,7 +27,7 @@ const LinkIcon: any = createIcon({
 });
 LinkIcon.displayName = 'LinkIcon';
 
-const ExternalLinkIcon: any = createIcon({
+const ExternalLinkIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Loader.tsx b/packages/themed/src/components/Icons/Icons/Loader.tsx
index 3e04dcf8ca..f115d3614a 100644
--- a/packages/themed/src/components/Icons/Icons/Loader.tsx
+++ b/packages/themed/src/components/Icons/Icons/Loader.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const LoaderIcon: any = createIcon({
+const LoaderIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Lock.tsx b/packages/themed/src/components/Icons/Icons/Lock.tsx
index 3479a02255..213d870ffe 100644
--- a/packages/themed/src/components/Icons/Icons/Lock.tsx
+++ b/packages/themed/src/components/Icons/Icons/Lock.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const LockIcon: any = createIcon({
+const LockIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Mail.tsx b/packages/themed/src/components/Icons/Icons/Mail.tsx
index 4a004500d8..0f26c103b7 100644
--- a/packages/themed/src/components/Icons/Icons/Mail.tsx
+++ b/packages/themed/src/components/Icons/Icons/Mail.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const MailIcon: any = createIcon({
+const MailIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Message.tsx b/packages/themed/src/components/Icons/Icons/Message.tsx
index 5e64dfa0f8..99fa2d8f2e 100644
--- a/packages/themed/src/components/Icons/Icons/Message.tsx
+++ b/packages/themed/src/components/Icons/Icons/Message.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const MessageCircleIcon: any = createIcon({
+const MessageCircleIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Paperclip.tsx b/packages/themed/src/components/Icons/Icons/Paperclip.tsx
index 42f2ef82fc..50cb69cb49 100644
--- a/packages/themed/src/components/Icons/Icons/Paperclip.tsx
+++ b/packages/themed/src/components/Icons/Icons/Paperclip.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const PaperclipIcon: any = createIcon({
+const PaperclipIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Phone.tsx b/packages/themed/src/components/Icons/Icons/Phone.tsx
index eb69586c9f..6e4d15ba22 100644
--- a/packages/themed/src/components/Icons/Icons/Phone.tsx
+++ b/packages/themed/src/components/Icons/Icons/Phone.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const PhoneIcon: any = createIcon({
+const PhoneIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Play.tsx b/packages/themed/src/components/Icons/Icons/Play.tsx
index 464ebb2852..38b9aa1cee 100644
--- a/packages/themed/src/components/Icons/Icons/Play.tsx
+++ b/packages/themed/src/components/Icons/Icons/Play.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const PlayIcon: any = createIcon({
+const PlayIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Repeat.tsx b/packages/themed/src/components/Icons/Icons/Repeat.tsx
index 6eeefd91bf..1f4f5e1100 100644
--- a/packages/themed/src/components/Icons/Icons/Repeat.tsx
+++ b/packages/themed/src/components/Icons/Icons/Repeat.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const RepeatIcon: any = createIcon({
+const RepeatIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
@@ -42,7 +42,7 @@ const RepeatIcon: any = createIcon({
 
 RepeatIcon.displayName = 'RepeatIcon';
 
-const Repeat1Icon: any = createIcon({
+const Repeat1Icon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Share.tsx b/packages/themed/src/components/Icons/Icons/Share.tsx
index 1562e4b4cb..b139ff529f 100644
--- a/packages/themed/src/components/Icons/Icons/Share.tsx
+++ b/packages/themed/src/components/Icons/Icons/Share.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const ShareIcon: any = createIcon({
+const ShareIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Slash.tsx b/packages/themed/src/components/Icons/Icons/Slash.tsx
index e35e6581c8..c496685dd0 100644
--- a/packages/themed/src/components/Icons/Icons/Slash.tsx
+++ b/packages/themed/src/components/Icons/Icons/Slash.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const SlashIcon: any = createIcon({
+const SlashIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Star.tsx b/packages/themed/src/components/Icons/Icons/Star.tsx
index 0421ac33fa..54fdbd7f7b 100644
--- a/packages/themed/src/components/Icons/Icons/Star.tsx
+++ b/packages/themed/src/components/Icons/Icons/Star.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const StarIcon: any = createIcon({
+const StarIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/ThreeDots.tsx b/packages/themed/src/components/Icons/Icons/ThreeDots.tsx
index 0208ff965f..2c1bb5a6c7 100644
--- a/packages/themed/src/components/Icons/Icons/ThreeDots.tsx
+++ b/packages/themed/src/components/Icons/Icons/ThreeDots.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const ThreeDotsIcon: any = createIcon({
+const ThreeDotsIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Trash.tsx b/packages/themed/src/components/Icons/Icons/Trash.tsx
index 507749a570..d3088f46e4 100644
--- a/packages/themed/src/components/Icons/Icons/Trash.tsx
+++ b/packages/themed/src/components/Icons/Icons/Trash.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const TrashIcon: any = createIcon({
+const TrashIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/Icons/Unlock.tsx b/packages/themed/src/components/Icons/Icons/Unlock.tsx
index 44d5f4f830..607da3e761 100644
--- a/packages/themed/src/components/Icons/Icons/Unlock.tsx
+++ b/packages/themed/src/components/Icons/Icons/Unlock.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import { Root } from '../styled-components';
 
-const UnlockIcon: any = createIcon({
+const UnlockIcon = createIcon({
   Root,
   viewBox: '0 0 24 24',
   path: (
diff --git a/packages/themed/src/components/Icons/styled-components/Root.tsx b/packages/themed/src/components/Icons/styled-components/Root.tsx
index 2fd74ffba9..4bb39dae9a 100644
--- a/packages/themed/src/components/Icons/styled-components/Root.tsx
+++ b/packages/themed/src/components/Icons/styled-components/Root.tsx
@@ -1,68 +1,11 @@
 import { AsForwarder } from '@gluestack-style/react';
 import { styled } from '@gluestack-style/react';
 
-export const StyledIcon = styled(
+export const BaseIcon = styled(
   AsForwarder,
+  {},
   {
-    color: '$backgroundLight800',
-    _dark: {
-      color: '$backgroundDark400',
-    },
-    variants: {
-      size: {
-        '2xs': {
-          h: '$3',
-          w: '$3',
-          props: {
-            // @ts-ignore
-            size: 12,
-          },
-        },
-        'xs': {
-          h: '$3.5',
-          w: '$3.5',
-          props: {
-            //@ts-ignore
-            size: 14,
-          },
-        },
-        'sm': {
-          h: '$4',
-          w: '$4',
-          props: {
-            //@ts-ignore
-            size: 16,
-          },
-        },
-        'md': {
-          h: '$4.5',
-          w: '$4.5',
-          props: {
-            //@ts-ignore
-            size: 18,
-          },
-        },
-        'lg': {
-          h: '$5',
-          w: '$5',
-          props: {
-            //@ts-ignore
-            size: 20,
-          },
-        },
-        'xl': {
-          h: '$6',
-          w: '$6',
-          props: {
-            //@ts-ignore
-            size: 24,
-          },
-        },
-      },
-    },
-  },
-  {
-    componentName: 'Icon',
+    componentName: 'BaseIcon',
     resolveProps: ['stroke', 'fill'],
   } as const,
   {
@@ -73,19 +16,4 @@ export const StyledIcon = styled(
   }
 );
 
-export default styled(
-  StyledIcon,
-  {
-    props: {
-      size: 'md',
-      //@ts-ignore
-      fill: 'none',
-    },
-    color: '$backgroundLight800',
-    _dark: {
-      //@ts-ignore
-      color: '$backgroundDark400',
-    },
-  },
-  {}
-);
+export default styled(BaseIcon, {}, { componentName: 'Icon' });
diff --git a/packages/themed/src/components/Icons/styled-components/index.tsx b/packages/themed/src/components/Icons/styled-components/index.tsx
index 29523c0f2f..67efde511a 100644
--- a/packages/themed/src/components/Icons/styled-components/index.tsx
+++ b/packages/themed/src/components/Icons/styled-components/index.tsx
@@ -1,2 +1,2 @@
-export { default as Root } from './Root';
+export { default as Root, BaseIcon as StyledIcon } from './Root';
 export * from './Root';
diff --git a/packages/themed/src/components/Image/styled-components/Root.tsx b/packages/themed/src/components/Image/styled-components/Root.tsx
index 6fc661a46f..0f9aa86bec 100644
--- a/packages/themed/src/components/Image/styled-components/Root.tsx
+++ b/packages/themed/src/components/Image/styled-components/Root.tsx
@@ -1,54 +1,6 @@
 import { Image } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Image,
-  {
-    maxWidth: '$full',
-    variants: {
-      size: {
-        '2xs': {
-          w: '$6',
-          h: '$6',
-        },
-
-        'xs': {
-          w: '$10',
-          h: '$10',
-        },
-
-        'sm': {
-          w: '$16',
-          h: '$16',
-        },
-
-        'md': {
-          w: '$20',
-          h: '$20',
-        },
-
-        'lg': {
-          w: '$24',
-          h: '$24',
-        },
-
-        'xl': {
-          w: '$32',
-          h: '$32',
-        },
-
-        '2xl': {
-          w: '$64',
-          h: '$64',
-        },
-        'full': {
-          w: '$full',
-          h: '$full',
-        },
-      },
-    },
-  },
-  {
-    componentName: 'Image',
-  } as const
-);
+export default styled(Image, {}, {
+  componentName: 'Image',
+} as const);
diff --git a/packages/themed/src/components/Input/styled-components/Icon.tsx b/packages/themed/src/components/Input/styled-components/Icon.tsx
index f71970f3bd..4b68ba9eec 100644
--- a/packages/themed/src/components/Input/styled-components/Icon.tsx
+++ b/packages/themed/src/components/Input/styled-components/Icon.tsx
@@ -1,15 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { StyledIcon } from '../../Icons/styled-components';
 
-export default styled(
-  StyledIcon,
-  {
-    props: {
-      size: 'md',
-    },
-  },
-  {
-    componentName: 'InputIcon',
-    ancestorStyle: ['_icon'],
-  } as const
-);
+export default styled(StyledIcon, {}, {
+  componentName: 'InputIcon',
+  ancestorStyle: ['_icon'],
+} as const);
diff --git a/packages/themed/src/components/Input/styled-components/Input.tsx b/packages/themed/src/components/Input/styled-components/Input.tsx
index 0ee7d63d73..ace0f58a3c 100644
--- a/packages/themed/src/components/Input/styled-components/Input.tsx
+++ b/packages/themed/src/components/Input/styled-components/Input.tsx
@@ -3,82 +3,7 @@ import { TextInput } from 'react-native';
 
 export default styled(
   TextInput,
-  {
-    flex: 1,
-    color: '$textLight900',
-    props: {
-      placeholderTextColor: '$textLight500',
-    },
-    _dark: {
-      color: '$textDark50',
-      props: {
-        placeholderTextColor: '$textDark400',
-      },
-    },
-    _web: {
-      'cursor': 'text',
-      ':disabled': {
-        cursor: 'not-allowed',
-      },
-    },
-    variants: {
-      size: {
-        '2xs': {
-          fontSize: '$2xs',
-          lineHeight: '$2xs',
-        },
-        'xs': {
-          fontSize: '$xs',
-          lineHeight: '$sm',
-        },
-
-        'sm': {
-          fontSize: '$sm',
-          lineHeight: '$sm',
-        },
-
-        'md': {
-          fontSize: '$md',
-          lineHeight: '$md',
-        },
-
-        'lg': {
-          fontSize: '$lg',
-          lineHeight: '$xl',
-        },
-
-        'xl': {
-          fontSize: '$xl',
-          lineHeight: '$xl',
-        },
-
-        '2xl': {
-          fontSize: '$2xl',
-          lineHeight: '$2xl',
-        },
-
-        '3xl': {
-          fontSize: '$3xl',
-          lineHeight: '$3xl',
-        },
-
-        '4xl': {
-          fontSize: '$4xl',
-          lineHeight: '$4xl',
-        },
-
-        '5xl': {
-          fontSize: '$5xl',
-          lineHeight: '$6xl',
-        },
-
-        '6xl': {
-          fontSize: '$6xl',
-          lineHeight: '$7xl',
-        },
-      },
-    },
-  },
+  {},
   {
     componentName: 'InputField',
     ancestorStyle: ['_input'],
diff --git a/packages/themed/src/components/Input/styled-components/Root.tsx b/packages/themed/src/components/Input/styled-components/Root.tsx
index c662d18d9b..b30321ec66 100644
--- a/packages/themed/src/components/Input/styled-components/Root.tsx
+++ b/packages/themed/src/components/Input/styled-components/Root.tsx
@@ -1,377 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    'borderWidth': 1,
-    'borderColor': '$backgroundLight300',
-    'borderRadius': '$sm',
-    'flexDirection': 'row',
-    'overflow': 'hidden',
-    'alignContent': 'center',
-
-    ':hover': {
-      borderColor: '$borderLight400',
-    },
-
-    ':focus': {
-      'borderColor': '$primary700',
-      ':hover': {
-        borderColor: '$primary700',
-      },
-    },
-
-    ':disabled': {
-      'opacity': 0.4,
-      ':hover': {
-        borderColor: '$backgroundLight300',
-      },
-    },
-
-    '_input': {
-      py: 'auto',
-      px: '$3',
-    },
-
-    '_icon': {
-      color: '$textLight400',
-    },
-
-    '_dark': {
-      'borderColor': '$borderDark700',
-      ':hover': {
-        borderColor: '$borderDark400',
-      },
-      ':focus': {
-        'borderColor': '$primary400',
-        ':hover': {
-          borderColor: '$primary400',
-        },
-      },
-      ':disabled': {
-        ':hover': {
-          borderColor: '$borderDark700',
-        },
-      },
-    },
-
-    'variants': {
-      size: {
-        xl: {
-          h: '$12',
-          _input: {
-            props: {
-              size: 'xl',
-            },
-          },
-          _icon: {
-            props: {
-              size: 'xl',
-            },
-          },
-        },
-        lg: {
-          h: '$11',
-          _input: {
-            props: {
-              size: 'lg',
-            },
-          },
-          _icon: {
-            props: {
-              size: 'lg',
-            },
-          },
-        },
-        md: {
-          h: '$10',
-          _input: {
-            props: {
-              size: 'md',
-            },
-          },
-          _icon: {
-            props: {
-              size: 'sm',
-            },
-          },
-        },
-        sm: {
-          h: '$9',
-          _input: {
-            props: {
-              size: 'sm',
-            },
-          },
-          _icon: {
-            props: {
-              size: 'xs',
-            },
-          },
-        },
-      },
-      variant: {
-        underlined: {
-          '_input': {
-            _web: {
-              outlineWidth: 0,
-              outline: 'none',
-            },
-            px: '$0',
-          },
-          'borderWidth': 0,
-          'borderRadius': 0,
-          'borderBottomWidth': '$1',
-          ':focus': {
-            borderColor: '$primary700',
-            _web: {
-              boxShadow: 'inset 0 -1px 0 0 $primary700',
-            },
-          },
-          ':invalid': {
-            'borderBottomWidth': 2,
-            'borderBottomColor': '$error700',
-            '_web': {
-              boxShadow: 'inset 0 -1px 0 0 $error700',
-            },
-            ':hover': {
-              borderBottomColor: '$error700',
-            },
-            ':focus': {
-              'borderBottomColor': '$error700',
-              '_web': {
-                boxShadow: 'inset 0 -1px 0 0 $error700',
-              },
-              ':hover': {
-                borderBottomColor: '$error700',
-                _web: {
-                  boxShadow: 'inset 0 -1px 0 0 $error700',
-                },
-              },
-            },
-            ':disabled': {
-              ':hover': {
-                borderBottomColor: '$error700',
-                _web: {
-                  boxShadow: 'inset 0 -1px 0 0 $error700',
-                },
-              },
-            },
-          },
-          '_dark': {
-            ':focus': {
-              borderColor: '$primary400',
-              _web: {
-                boxShadow: 'inset 0 -1px 0 0 $primary400',
-              },
-            },
-            ':invalid': {
-              'borderColor': '$error400',
-              '_web': {
-                boxShadow: 'inset 0 -1px 0 0 $error400',
-              },
-              ':hover': {
-                borderBottomColor: '$error400',
-              },
-              ':focus': {
-                'borderBottomColor': '$error400',
-                '_web': {
-                  boxShadow: 'inset 0 -1px 0 0 $error400',
-                },
-                ':hover': {
-                  borderBottomColor: '$error400',
-                  _web: {
-                    boxShadow: 'inset 0 -1px 0 0 $error400',
-                  },
-                },
-              },
-              ':disabled': {
-                ':hover': {
-                  borderBottomColor: '$error400',
-                  _web: {
-                    boxShadow: 'inset 0 -1px 0 0 $error400',
-                  },
-                },
-              },
-            },
-          },
-        },
-
-        outline: {
-          '_input': {
-            _web: {
-              outlineWidth: 0,
-              outline: 'none',
-            },
-          },
-          ':focus': {
-            borderColor: '$primary700',
-            _web: {
-              boxShadow: 'inset 0 0 0 1px $primary700',
-            },
-          },
-          ':invalid': {
-            'borderColor': '$error700',
-            '_web': {
-              boxShadow: 'inset 0 0 0 1px $error700',
-            },
-            ':hover': {
-              borderColor: '$error700',
-            },
-            ':focus': {
-              'borderColor': '$error700',
-              '_web': {
-                boxShadow: 'inset 0 0 0 1px $error700',
-              },
-              ':hover': {
-                borderColor: '$error700',
-                _web: {
-                  boxShadow: 'inset 0 0 0 1px $error700',
-                },
-              },
-            },
-            ':disabled': {
-              ':hover': {
-                borderColor: '$error700',
-                _web: {
-                  boxShadow: 'inset 0 0 0 1px $error700',
-                },
-              },
-            },
-          },
-          '_dark': {
-            ':focus': {
-              borderColor: '$primary400',
-              _web: {
-                boxShadow: 'inset 0 0 0 1px $primary400',
-              },
-            },
-            ':invalid': {
-              'borderColor': '$error400',
-              '_web': {
-                boxShadow: 'inset 0 0 0 1px $error400',
-              },
-              ':hover': {
-                borderColor: '$error400',
-              },
-              ':focus': {
-                'borderColor': '$error400',
-                '_web': {
-                  boxShadow: 'inset 0 0 0 1px $error400',
-                },
-                ':hover': {
-                  borderColor: '$error400',
-                  _web: {
-                    boxShadow: 'inset 0 0 0 1px $error400',
-                  },
-                },
-              },
-              ':disabled': {
-                ':hover': {
-                  borderColor: '$error400',
-                  _web: {
-                    boxShadow: 'inset 0 0 0 1px $error400',
-                  },
-                },
-              },
-            },
-          },
-        },
-
-        rounded: {
-          'borderRadius': 999,
-          '_input': {
-            px: '$4',
-            _web: {
-              outlineWidth: 0,
-              outline: 'none',
-            },
-          },
-          ':focus': {
-            borderColor: '$primary700',
-            _web: {
-              boxShadow: 'inset 0 0 0 1px $primary700',
-            },
-          },
-          ':invalid': {
-            'borderColor': '$error700',
-            '_web': {
-              boxShadow: 'inset 0 0 0 1px $error700',
-            },
-            ':hover': {
-              borderColor: '$error700',
-            },
-            ':focus': {
-              'borderColor': '$error700',
-              '_web': {
-                boxShadow: 'inset 0 0 0 1px $error700',
-              },
-              ':hover': {
-                borderColor: '$error700',
-                _web: {
-                  boxShadow: 'inset 0 0 0 1px $error700',
-                },
-              },
-            },
-            ':disabled': {
-              ':hover': {
-                borderColor: '$error700',
-                _web: {
-                  boxShadow: 'inset 0 0 0 1px $error700',
-                },
-              },
-            },
-          },
-
-          '_dark': {
-            ':focus': {
-              borderColor: '$primary400',
-              _web: {
-                boxShadow: 'inset 0 0 0 1px $primary400',
-              },
-            },
-            ':invalid': {
-              'borderColor': '$error400',
-              '_web': {
-                boxShadow: 'inset 0 0 0 1px $error400',
-              },
-              ':hover': {
-                borderColor: '$error400',
-              },
-              ':focus': {
-                'borderColor': '$error400',
-                '_web': {
-                  boxShadow: 'inset 0 0 0 1px $error400',
-                },
-                ':hover': {
-                  borderColor: '$error400',
-                  _web: {
-                    boxShadow: 'inset 0 0 0 1px $error400',
-                  },
-                },
-              },
-              ':disabled': {
-                ':hover': {
-                  borderColor: '$error400',
-                  _web: {
-                    boxShadow: 'inset 0 0 0 1px $error400',
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-
-    'defaultProps': {
-      size: 'md',
-      variant: 'outline',
-    },
-  },
-  {
-    componentName: 'Input',
-    descendantStyle: ['_input', '_icon'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'Input',
+  descendantStyle: ['_input', '_icon'],
+} as const);
diff --git a/packages/themed/src/components/Input/styled-components/Slot.tsx b/packages/themed/src/components/Input/styled-components/Slot.tsx
index a68320e5c9..5cb9965080 100644
--- a/packages/themed/src/components/Input/styled-components/Slot.tsx
+++ b/packages/themed/src/components/Input/styled-components/Slot.tsx
@@ -1,19 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { Pressable } from 'react-native';
 
-export default styled(
-  Pressable,
-  {
-    justifyContent: 'center',
-    alignItems: 'center',
-    _web: {
-      ':disabled': {
-        cursor: 'not-allowed',
-      },
-    },
-  },
-  {
-    componentName: 'InputSlot',
-    descendantStyle: ['_icon'],
-  } as const
-);
+export default styled(Pressable, {}, {
+  componentName: 'InputSlot',
+  descendantStyle: ['_icon'],
+} as const);
diff --git a/packages/themed/src/components/Link/styled-components/Root.tsx b/packages/themed/src/components/Link/styled-components/Root.tsx
index 5b8c52f1ed..186b583f8f 100644
--- a/packages/themed/src/components/Link/styled-components/Root.tsx
+++ b/packages/themed/src/components/Link/styled-components/Root.tsx
@@ -4,42 +4,7 @@ import { Pressable } from 'react-native';
 export default styled(
   Pressable,
 
-  {
-    _web: {
-      'outlineWidth': 0,
-      ':disabled': {
-        cursor: 'not-allowed',
-      },
-      ':focusVisible': {
-        outlineWidth: 2,
-        outlineColor: '$primary700',
-        outlineStyle: 'solid',
-        _dark: {
-          outlineColor: '$primary400',
-        },
-      },
-    },
-    _text: {
-      ':hover': {
-        color: '$info600',
-        textDecorationLine: 'none',
-      },
-      ':active': {
-        color: '$info700',
-      },
-      ':disabled': {
-        opacity: 0.4,
-      },
-      '_dark': {
-        ':hover': {
-          color: '$info400',
-        },
-        ':active': {
-          color: '$info300',
-        },
-      },
-    },
-  },
+  {},
   {
     componentName: 'Link',
     descendantStyle: ['_text'],
diff --git a/packages/themed/src/components/Link/styled-components/Text.tsx b/packages/themed/src/components/Link/styled-components/Text.tsx
index 617e53c0d3..4cde89a5c2 100644
--- a/packages/themed/src/components/Link/styled-components/Text.tsx
+++ b/packages/themed/src/components/Link/styled-components/Text.tsx
@@ -1,17 +1,7 @@
 import { Text } from '../../Text';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Text,
-  {
-    textDecorationLine: 'underline',
-    color: '$info700',
-    _dark: {
-      color: '$info300',
-    },
-  },
-  {
-    componentName: 'LinkText',
-    ancestorStyle: ['_text'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'LinkText',
+  ancestorStyle: ['_text'],
+} as const);
diff --git a/packages/themed/src/components/Menu/index.tsx b/packages/themed/src/components/Menu/index.tsx
index 0cf75c0f57..c5c54278a2 100644
--- a/packages/themed/src/components/Menu/index.tsx
+++ b/packages/themed/src/components/Menu/index.tsx
@@ -1,3 +1,4 @@
+import { AnimatePresence } from '@gluestack-style/animation-resolver';
 import { createMenu } from '@gluestack-ui/menu';
 import { Root, Item, Label, Backdrop } from './styled-components';
 
@@ -7,7 +8,7 @@ export const Menu = createMenu({
   Label,
   Backdrop,
   //@ts-ignore
-  AnimatePresence: Root.AnimatePresence,
+  AnimatePresence: AnimatePresence,
 });
 export const MenuItem = Menu.Item;
 export const MenuItemLabel = Menu.ItemLabel;
diff --git a/packages/themed/src/components/Menu/styled-components/Backdrop.tsx b/packages/themed/src/components/Menu/styled-components/Backdrop.tsx
index e07e102bbd..2e0639c5f4 100644
--- a/packages/themed/src/components/Menu/styled-components/Backdrop.tsx
+++ b/packages/themed/src/components/Menu/styled-components/Backdrop.tsx
@@ -1,22 +1,6 @@
 import { Pressable } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export const Backdrop = styled(
-  Pressable,
-  {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    // use this for when you want to give background colour to backdrop
-    // opacity: 0.5,
-    // bg: '$backgroundLight500',
-    _web: {
-      cursor: 'default',
-    },
-  },
-  {
-    componentName: 'MenuBackdrop',
-  } as const
-);
+export const Backdrop = styled(Pressable, {}, {
+  componentName: 'MenuBackdrop',
+} as const);
diff --git a/packages/themed/src/components/Menu/styled-components/Item.tsx b/packages/themed/src/components/Menu/styled-components/Item.tsx
index 5bb347a4e7..0712280ea7 100644
--- a/packages/themed/src/components/Menu/styled-components/Item.tsx
+++ b/packages/themed/src/components/Menu/styled-components/Item.tsx
@@ -1,46 +1,6 @@
 import { styled } from '@gluestack-style/react';
 import { Pressable } from 'react-native';
-export const Item = styled(
-  Pressable,
-  {
-    'p': '$3',
-    'flexDirection': 'row',
-    'alignItems': 'center',
-    ':hover': {
-      bg: '$backgroundLight100',
-    },
-
-    ':active': {
-      bg: '$backgroundLight200',
-    },
-
-    ':focus': {
-      bg: '$backgroundLight100',
-    },
-
-    '_dark': {
-      ':hover': {
-        bg: '$backgroundDark800',
-      },
-
-      ':active': {
-        bg: '$backgroundDark700',
-      },
-
-      ':focus': {
-        bg: '$backgroundDark800',
-      },
-    },
-
-    ':disabled': {
-      'opacity': 0.4,
-      ':focus': {
-        bg: 'transparent',
-      },
-    },
-  },
-  {
-    componentName: 'MenuItem',
-    descendantStyle: ['_text'],
-  } as const
-);
+export const Item = styled(Pressable, {}, {
+  componentName: 'MenuItem',
+  descendantStyle: ['_text'],
+} as const);
diff --git a/packages/themed/src/components/Menu/styled-components/Item.web.tsx b/packages/themed/src/components/Menu/styled-components/Item.web.tsx
index ee9e7350f5..e0ae65f605 100644
--- a/packages/themed/src/components/Menu/styled-components/Item.web.tsx
+++ b/packages/themed/src/components/Menu/styled-components/Item.web.tsx
@@ -1,71 +1,6 @@
 import { styled } from '@gluestack-style/react';
 import { LI } from '@expo/html-elements';
-export const Item = styled(
-  LI,
-  {
-    'p': '$3',
-    'flexDirection': 'row',
-    'alignItems': 'center',
-
-    ':hover': {
-      bg: '$backgroundLight100',
-    },
-
-    ':disabled': {
-      'opacity': 0.4,
-      '_web': {
-        cursor: 'not-allowed',
-      },
-      ':focus': {
-        bg: 'transparent',
-      },
-      '_dark': {
-        ':focus': {
-          bg: 'transparent',
-        },
-      },
-    },
-
-    ':active': {
-      bg: '$backgroundLight200',
-    },
-
-    ':focus': {
-      bg: '$backgroundLight100',
-      // @ts-ignore
-      outlineWidth: '$0',
-      outlineStyle: 'none',
-    },
-
-    ':focusVisible': {
-      // @ts-ignore
-      outlineWidth: '$0.5',
-      outlineColor: '$primary700',
-      outlineStyle: 'solid',
-      _dark: {
-        outlineColor: '$primary300',
-      },
-    },
-
-    '_dark': {
-      ':hover': {
-        bg: '$backgroundDark800',
-      },
-
-      ':active': {
-        bg: '$backgroundDark700',
-      },
-
-      ':focus': {
-        bg: '$backgroundDark800',
-      },
-    },
-    '_web': {
-      cursor: 'pointer',
-    },
-  },
-  {
-    componentName: 'MenuItem',
-    descendantStyle: ['_text'],
-  } as const
-);
+export const Item = styled(LI, {}, {
+  componentName: 'MenuItem',
+  descendantStyle: ['_text'],
+} as const);
diff --git a/packages/themed/src/components/Menu/styled-components/Root.tsx b/packages/themed/src/components/Menu/styled-components/Root.tsx
index 26fc157bfd..537d4f73ae 100644
--- a/packages/themed/src/components/Menu/styled-components/Root.tsx
+++ b/packages/themed/src/components/Menu/styled-components/Root.tsx
@@ -1,45 +1,8 @@
 //@ts-nocheck
 import { UL } from '@expo/html-elements';
-import { AnimationResolver } from '@gluestack-style/animation-plugin';
 import { styled } from '@gluestack-style/react';
 import { createMotionAnimatedComponent, Motion } from '@legendapp/motion';
 const MotionUL = createMotionAnimatedComponent(UL) as typeof Motion.Pressable;
-export const Root = styled(
-  MotionUL,
-  {
-    ':initial': {
-      opacity: 0,
-    },
-    ':animate': {
-      opacity: 1,
-    },
-    ':exit': {
-      opacity: 0,
-    },
-    ':transition': {
-      type: 'spring',
-      damping: 18,
-      stiffness: 250,
-      opacity: {
-        type: 'timing',
-        duration: 200,
-      },
-    },
-    'minWidth': 200,
-    'py': '$2',
-    'rounded': '$sm',
-    'bg': '$backgroundLight0',
-    '_dark': {
-      bg: '$backgroundDark900',
-    },
-    'defaultProps': {
-      softShadow: '3',
-    },
-  },
-  {
-    componentName: 'Menu',
-  } as const,
-  {
-    plugins: [new AnimationResolver({})],
-  }
-);
+export const Root = styled(MotionUL, {}, {
+  componentName: 'Menu',
+} as const);
diff --git a/packages/themed/src/components/Modal/index.tsx b/packages/themed/src/components/Modal/index.tsx
index 9735e8052f..cc17573405 100644
--- a/packages/themed/src/components/Modal/index.tsx
+++ b/packages/themed/src/components/Modal/index.tsx
@@ -1,3 +1,4 @@
+import { AnimatePresence } from '@gluestack-style/animation-resolver';
 import { createModal } from '@gluestack-ui/modal';
 import {
   Root,
@@ -18,8 +19,9 @@ export const Modal = createModal({
   Body,
   Backdrop,
   //@ts-ignore
-  AnimatePresence: Content.AnimatePresence,
+  AnimatePresence: AnimatePresence,
 });
+
 export const ModalContent = Modal.Content;
 export const ModalCloseButton = Modal.CloseButton;
 export const ModalHeader = Modal.Header;
diff --git a/packages/themed/src/components/Modal/styled-components/Backdrop.tsx b/packages/themed/src/components/Modal/styled-components/Backdrop.tsx
index 84e9f73526..895c3c77f3 100644
--- a/packages/themed/src/components/Modal/styled-components/Backdrop.tsx
+++ b/packages/themed/src/components/Modal/styled-components/Backdrop.tsx
@@ -1,53 +1,6 @@
-//@ts-nocheck
-import { Pressable } from 'react-native';
-import { createMotionAnimatedComponent, Motion } from '@legendapp/motion';
 import { styled } from '@gluestack-style/react';
-import { AnimationResolver } from '@gluestack-style/animation-plugin';
+import { AnimatedPressable } from '@gluestack-style/animation-resolver';
 
-const MotionPressable = createMotionAnimatedComponent(
-  Pressable
-) as typeof Motion.Pressable;
-
-export default styled(
-  MotionPressable,
-  {
-    ':initial': {
-      opacity: 0,
-    },
-    ':animate': {
-      opacity: 0.5,
-    },
-    ':exit': {
-      opacity: 0,
-    },
-    ':transition': {
-      type: 'spring',
-      damping: 18,
-      stiffness: 250,
-      opacity: {
-        type: 'timing',
-        duration: 250,
-      },
-    },
-    'position': 'absolute',
-    'left': 0,
-    'top': 0,
-    'right': 0,
-    'bottom': 0,
-    'bg': '$backgroundLight950',
-    // @ts-ignore
-    '_dark': {
-      bg: '$backgroundDark950',
-    },
-    // @ts-ignore
-    '_web': {
-      cursor: 'default',
-    },
-  },
-  {
-    componentName: 'ModalBackdrop',
-  } as const,
-  {
-    plugins: [new AnimationResolver({})],
-  }
-);
+export default styled(AnimatedPressable, {}, {
+  componentName: 'ModalBackdrop',
+} as const);
diff --git a/packages/themed/src/components/Modal/styled-components/Body.tsx b/packages/themed/src/components/Modal/styled-components/Body.tsx
index 7fade285a2..602077d648 100644
--- a/packages/themed/src/components/Modal/styled-components/Body.tsx
+++ b/packages/themed/src/components/Modal/styled-components/Body.tsx
@@ -1,14 +1,6 @@
 import { ScrollView } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  ScrollView,
-  {
-    px: '$4',
-    paddingTop: 0,
-    paddingBottom: '$2',
-  },
-  {
-    componentName: 'ModalBody',
-  } as const
-);
+export default styled(ScrollView, {}, {
+  componentName: 'ModalBody',
+} as const);
diff --git a/packages/themed/src/components/Modal/styled-components/CloseButton.tsx b/packages/themed/src/components/Modal/styled-components/CloseButton.tsx
index cfc00d5fc8..1e03515e1c 100644
--- a/packages/themed/src/components/Modal/styled-components/CloseButton.tsx
+++ b/packages/themed/src/components/Modal/styled-components/CloseButton.tsx
@@ -1,88 +1,7 @@
 import { Pressable } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Pressable,
-  {
-    'zIndex': 1,
-    'p': '$2',
-    'rounded': '$sm',
-    '_icon': {
-      color: '$backgroundLight400',
-    },
-    '_text': {
-      color: '$backgroundLight400',
-    },
-
-    ':hover': {
-      _icon: {
-        color: '$backgroundLight700',
-      },
-      _text: {
-        color: '$backgroundLight700',
-      },
-    },
-
-    ':active': {
-      _icon: {
-        color: '$backgroundLight900',
-      },
-      _text: {
-        color: '$backgroundLight900',
-      },
-    },
-
-    '_dark': {
-      '_icon': {
-        color: '$backgroundDark400',
-      },
-      '_text': {
-        color: '$backgroundDark400',
-      },
-      ':hover': {
-        _icon: {
-          color: '$backgroundDark200',
-        },
-        _text: {
-          color: '$backgroundDark200',
-        },
-      },
-
-      ':active': {
-        _icon: {
-          color: '$backgroundDark100',
-        },
-        _text: {
-          color: '$backgroundDark100',
-        },
-      },
-    },
-    ':focusVisible': {
-      bg: '$backgroundLight100',
-      _icon: {
-        color: '$backgroundLight900',
-      },
-      _text: {
-        color: '$backgroundLight900',
-      },
-      _dark: {
-        bg: '$backgroundDark700',
-        _icon: {
-          color: '$backgroundLight100',
-        },
-        _text: {
-          color: '$backgroundLight100',
-        },
-      },
-    },
-
-    '_web': {
-      outlineWidth: 0,
-      cursor: 'pointer',
-    },
-  },
-  {
-    componentName: 'ModalCloseButton',
-    descendantStyle: ['_icon', '_text'],
-  } as const
-);
+export default styled(Pressable, {}, {
+  componentName: 'ModalCloseButton',
+  descendantStyle: ['_icon', '_text'],
+} as const);
diff --git a/packages/themed/src/components/Modal/styled-components/Content.tsx b/packages/themed/src/components/Modal/styled-components/Content.tsx
index e12b1e9883..1e8fd19655 100644
--- a/packages/themed/src/components/Modal/styled-components/Content.tsx
+++ b/packages/themed/src/components/Modal/styled-components/Content.tsx
@@ -1,49 +1,7 @@
-//@ts-nocheck
-import { Motion } from '@legendapp/motion';
 import { styled } from '@gluestack-style/react';
-import { AnimationResolver } from '@gluestack-style/animation-plugin';
+import { AnimatedView } from '@gluestack-style/animation-resolver';
 
-export default styled(
-  Motion.View,
-  {
-    'bg': '$backgroundLight50',
-    'rounded': '$lg',
-    'overflow': 'hidden',
-    ':initial': {
-      scale: 0.9,
-      opacity: 0,
-    },
-    ':animate': {
-      scale: 1,
-      opacity: 1,
-    },
-    ':exit': {
-      scale: 0.9,
-      opacity: 0,
-    },
-    ':transition': {
-      type: 'spring',
-      damping: 18,
-      stiffness: 250,
-      opacity: {
-        type: 'timing',
-        duration: 250,
-      },
-    },
-    // @ts-ignore
-    '_dark': {
-      bg: '$backgroundDark900',
-    },
-
-    'defaultProps': {
-      softShadow: '3',
-    },
-  },
-  {
-    componentName: 'ModalContent',
-    ancestorStyle: ['_content'],
-  } as const,
-  {
-    plugins: [new AnimationResolver({})],
-  }
-);
+export default styled(AnimatedView, {}, {
+  componentName: 'ModalContent',
+  ancestorStyle: ['_content'],
+} as const);
diff --git a/packages/themed/src/components/Modal/styled-components/Footer.tsx b/packages/themed/src/components/Modal/styled-components/Footer.tsx
index 74a56b5f0b..92be51abd3 100644
--- a/packages/themed/src/components/Modal/styled-components/Footer.tsx
+++ b/packages/themed/src/components/Modal/styled-components/Footer.tsx
@@ -1,16 +1,6 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    p: '$4',
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-  },
-  {
-    componentName: 'ModalFooter',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'ModalFooter',
+} as const);
diff --git a/packages/themed/src/components/Modal/styled-components/Header.tsx b/packages/themed/src/components/Modal/styled-components/Header.tsx
index 615eadadaa..62e641c4c2 100644
--- a/packages/themed/src/components/Modal/styled-components/Header.tsx
+++ b/packages/themed/src/components/Modal/styled-components/Header.tsx
@@ -1,17 +1,6 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    px: '$4',
-    paddingTop: '$4',
-    paddingBottom: '$2',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  {
-    componentName: 'ModalHeader',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'ModalHeader',
+} as const);
diff --git a/packages/themed/src/components/Modal/styled-components/Root.tsx b/packages/themed/src/components/Modal/styled-components/Root.tsx
index 151c31b127..1b9b6e6f2f 100644
--- a/packages/themed/src/components/Modal/styled-components/Root.tsx
+++ b/packages/themed/src/components/Modal/styled-components/Root.tsx
@@ -2,31 +2,7 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    width: '$full',
-    height: '$full',
-    justifyContent: 'center',
-    alignItems: 'center',
-    variants: {
-      size: {
-        xs: { _content: { width: '60%', maxWidth: 360 } },
-        sm: { _content: { width: '70%', maxWidth: 420 } },
-        md: { _content: { width: '80%', maxWidth: 510 } },
-        lg: { _content: { width: '90%', maxWidth: 640 } },
-        full: { _content: { width: '100%' } },
-      },
-    },
-
-    defaultProps: { size: 'md' },
-
-    _web: {
-      pointerEvents: 'box-none',
-    },
-  },
-  {
-    componentName: 'Modal',
-    descendantStyle: ['_content'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'Modal',
+  descendantStyle: ['_content'],
+} as const);
diff --git a/packages/themed/src/components/Popover/index.tsx b/packages/themed/src/components/Popover/index.tsx
index b01cd93df5..3f8705d799 100644
--- a/packages/themed/src/components/Popover/index.tsx
+++ b/packages/themed/src/components/Popover/index.tsx
@@ -1,3 +1,4 @@
+import { AnimatePresence } from '@gluestack-style/animation-resolver';
 import { createPopover } from '@gluestack-ui/popover';
 import {
   Root,
@@ -20,7 +21,7 @@ export const Popover = createPopover({
   Backdrop,
   CloseButton,
   //@ts-ignore
-  AnimatePresence: Content.AnimatePresence,
+  AnimatePresence: AnimatePresence,
 });
 export const PopoverArrow = Popover.Arrow;
 export const PopoverContent = Popover.Content;
diff --git a/packages/themed/src/components/Popover/styled-components/Backdrop.tsx b/packages/themed/src/components/Popover/styled-components/Backdrop.tsx
index 2cb9e60163..08d205972b 100644
--- a/packages/themed/src/components/Popover/styled-components/Backdrop.tsx
+++ b/packages/themed/src/components/Popover/styled-components/Backdrop.tsx
@@ -1,54 +1,6 @@
-//@ts-nocheck
-import { Pressable } from 'react-native';
-import { createMotionAnimatedComponent, Motion } from '@legendapp/motion';
 import { styled } from '@gluestack-style/react';
-import { AnimationResolver } from '@gluestack-style/animation-plugin';
+import { AnimatedPressable } from '@gluestack-style/animation-resolver';
 
-//@ts-ignore
-const MotionPressable = createMotionAnimatedComponent(
-  Pressable
-) as typeof Motion.Pressable;
-
-export default styled(
-  MotionPressable,
-  {
-    ':initial': {
-      opacity: 0,
-    },
-    ':animate': {
-      opacity: 0.5,
-    },
-    ':exit': {
-      opacity: 0,
-    },
-    ':transition': {
-      type: 'spring',
-      damping: 18,
-      stiffness: 250,
-      opacity: {
-        type: 'timing',
-        duration: 250,
-      },
-    },
-    'position': 'absolute',
-    'left': 0,
-    'top': 0,
-    'right': 0,
-    'bottom': 0,
-    'bg': '$backgroundLight950',
-    // @ts-ignore
-    '_dark': {
-      bg: '$backgroundDark950',
-    },
-    // @ts-ignore
-    '_web': {
-      cursor: 'default',
-    },
-  },
-  {
-    componentName: 'PopoverBackdrop',
-  } as const,
-  {
-    plugins: [new AnimationResolver({})],
-  }
-);
+export default styled(AnimatedPressable, {}, {
+  componentName: 'PopoverBackdrop',
+} as const);
diff --git a/packages/themed/src/components/Popover/styled-components/Body.tsx b/packages/themed/src/components/Popover/styled-components/Body.tsx
index 9d970cac61..6d76241711 100644
--- a/packages/themed/src/components/Popover/styled-components/Body.tsx
+++ b/packages/themed/src/components/Popover/styled-components/Body.tsx
@@ -1,13 +1,6 @@
 import { ScrollView } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  ScrollView,
-  {
-    p: '$4',
-    pt: '$2',
-  },
-  {
-    componentName: 'PopoverBody',
-  } as const
-);
+export default styled(ScrollView, {}, {
+  componentName: 'PopoverBody',
+} as const);
diff --git a/packages/themed/src/components/Popover/styled-components/CloseButton.tsx b/packages/themed/src/components/Popover/styled-components/CloseButton.tsx
index ad71d2aa48..73cd843c72 100644
--- a/packages/themed/src/components/Popover/styled-components/CloseButton.tsx
+++ b/packages/themed/src/components/Popover/styled-components/CloseButton.tsx
@@ -1,88 +1,7 @@
 import { Pressable } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Pressable,
-  {
-    'zIndex': 1,
-    'p': '$2',
-    'rounded': '$sm',
-    '_icon': {
-      color: '$backgroundLight400',
-    },
-    '_text': {
-      color: '$backgroundLight400',
-    },
-
-    ':hover': {
-      _icon: {
-        color: '$backgroundLight700',
-      },
-      _text: {
-        color: '$backgroundLight700',
-      },
-    },
-
-    ':active': {
-      _icon: {
-        color: '$backgroundLight900',
-      },
-      _text: {
-        color: '$backgroundLight900',
-      },
-    },
-
-    '_dark': {
-      '_icon': {
-        color: '$backgroundDark400',
-      },
-      '_text': {
-        color: '$backgroundDark400',
-      },
-      ':hover': {
-        _icon: {
-          color: '$backgroundDark200',
-        },
-        _text: {
-          color: '$backgroundDark200',
-        },
-      },
-
-      ':active': {
-        _icon: {
-          color: '$backgroundDark100',
-        },
-        _text: {
-          color: '$backgroundDark100',
-        },
-      },
-    },
-    ':focusVisible': {
-      bg: '$backgroundLight100',
-      _icon: {
-        color: '$backgroundLight900',
-      },
-      _text: {
-        color: '$backgroundLight900',
-      },
-      _dark: {
-        bg: '$backgroundDark700',
-        _icon: {
-          color: '$backgroundLight100',
-        },
-        _text: {
-          color: '$backgroundLight100',
-        },
-      },
-    },
-
-    '_web': {
-      outlineWidth: 0,
-      cursor: 'pointer',
-    },
-  },
-  {
-    componentName: 'PopoverCloseButton',
-    descendantStyle: ['_icon', '_text'],
-  } as const
-);
+export default styled(Pressable, {}, {
+  componentName: 'PopoverCloseButton',
+  descendantStyle: ['_icon', '_text'],
+} as const);
diff --git a/packages/themed/src/components/Popover/styled-components/Content.tsx b/packages/themed/src/components/Popover/styled-components/Content.tsx
index 2438e3901f..3718de7adf 100644
--- a/packages/themed/src/components/Popover/styled-components/Content.tsx
+++ b/packages/themed/src/components/Popover/styled-components/Content.tsx
@@ -1,46 +1,7 @@
-//@ts-nocheck
 import { Motion } from '@legendapp/motion';
 import { styled } from '@gluestack-style/react';
-import { AnimationResolver } from '@gluestack-style/animation-plugin';
 
-export default styled(
-  Motion.View,
-  {
-    'bg': '$backgroundLight50',
-    'rounded': '$lg',
-    'overflow': 'hidden',
-    ':initial': {
-      opacity: 0,
-    },
-    ':animate': {
-      opacity: 1,
-    },
-    ':exit': {
-      opacity: 0,
-    },
-    ':transition': {
-      type: 'spring',
-      damping: 18,
-      stiffness: 250,
-      opacity: {
-        type: 'timing',
-        duration: 250,
-      },
-    },
-    // @ts-ignore
-    '_dark': {
-      bg: '$backgroundDark900',
-    },
-
-    'defaultProps': {
-      softShadow: '3',
-    },
-  },
-  {
-    componentName: 'ModalContent',
-    ancestorStyle: ['_content'],
-  } as const,
-  {
-    plugins: [new AnimationResolver({})],
-  }
-);
+export default styled(Motion.View, {}, {
+  componentName: 'PopoverContent',
+  ancestorStyle: ['_content'],
+} as const);
diff --git a/packages/themed/src/components/Popover/styled-components/Footer.tsx b/packages/themed/src/components/Popover/styled-components/Footer.tsx
index 740f69a091..ed723d986c 100644
--- a/packages/themed/src/components/Popover/styled-components/Footer.tsx
+++ b/packages/themed/src/components/Popover/styled-components/Footer.tsx
@@ -1,22 +1,6 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    p: '$4',
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-    borderTopWidth: 1,
-    borderColor: '$borderLight300',
-
-    _dark: {
-      borderColor: '$borderDark700',
-    },
-  },
-  {
-    componentName: 'PopoverFooter',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'PopoverFooter',
+} as const);
diff --git a/packages/themed/src/components/Popover/styled-components/Header.tsx b/packages/themed/src/components/Popover/styled-components/Header.tsx
index d9b9107a8e..d3bfc37e6b 100644
--- a/packages/themed/src/components/Popover/styled-components/Header.tsx
+++ b/packages/themed/src/components/Popover/styled-components/Header.tsx
@@ -1,16 +1,6 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    p: '$4',
-    pb: '$2',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  {
-    componentName: 'PopoverHeader',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'PopoverHeader',
+} as const);
diff --git a/packages/themed/src/components/Popover/styled-components/Root.tsx b/packages/themed/src/components/Popover/styled-components/Root.tsx
index 25a66f267d..38d1d34f02 100644
--- a/packages/themed/src/components/Popover/styled-components/Root.tsx
+++ b/packages/themed/src/components/Popover/styled-components/Root.tsx
@@ -1,32 +1,7 @@
-//@ts-nocheck
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    width: '$full',
-    height: '$full',
-    justifyContent: 'center',
-    alignItems: 'center',
-    variants: {
-      size: {
-        xs: { _content: { width: '60%', maxWidth: 360 } },
-        sm: { _content: { width: '70%', maxWidth: 420 } },
-        md: { _content: { width: '80%', maxWidth: 510 } },
-        lg: { _content: { width: '90%', maxWidth: 640 } },
-        full: { _content: { width: '100%' } },
-      },
-    },
-
-    defaultProps: { size: 'md' },
-
-    _web: {
-      pointerEvents: 'box-none',
-    },
-  },
-  {
-    componentName: 'Popover',
-    descendantStyle: ['_content'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'Popover',
+  descendantStyle: ['_content'],
+} as const);
diff --git a/packages/themed/src/components/Pressable/styled-components/Root.tsx b/packages/themed/src/components/Pressable/styled-components/Root.tsx
index c3055e4d81..59febd2bcc 100644
--- a/packages/themed/src/components/Pressable/styled-components/Root.tsx
+++ b/packages/themed/src/components/Pressable/styled-components/Root.tsx
@@ -1,21 +1,6 @@
 import { styled } from '@gluestack-style/react';
 import { Pressable } from 'react-native';
 
-export default styled(
-  Pressable,
-  {
-    _web: {
-      ':focusVisible': {
-        outlineWidth: '2px',
-        outlineColor: '$primary700',
-        outlineStyle: 'solid',
-        _dark: {
-          outlineColor: '$primary300',
-        },
-      },
-    },
-  },
-  {
-    componentName: 'Pressable',
-  } as const
-);
+export default styled(Pressable, {}, {
+  componentName: 'Pressable',
+} as const);
diff --git a/packages/themed/src/components/Progress/styled-components/FilledTrack.tsx b/packages/themed/src/components/Progress/styled-components/FilledTrack.tsx
index 83b5e0fa87..7ad791ccc9 100644
--- a/packages/themed/src/components/Progress/styled-components/FilledTrack.tsx
+++ b/packages/themed/src/components/Progress/styled-components/FilledTrack.tsx
@@ -1,17 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    bg: '$primary500',
-    borderRadius: '$full',
-    _dark: {
-      bg: '$primary400',
-    },
-  },
-  {
-    componentName: 'ProgressFilledTrack',
-    ancestorStyle: ['_filledTrack'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'ProgressFilledTrack',
+  ancestorStyle: ['_filledTrack'],
+} as const);
diff --git a/packages/themed/src/components/Progress/styled-components/Root.tsx b/packages/themed/src/components/Progress/styled-components/Root.tsx
index 668222d248..814fd03a51 100644
--- a/packages/themed/src/components/Progress/styled-components/Root.tsx
+++ b/packages/themed/src/components/Progress/styled-components/Root.tsx
@@ -1,61 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    bg: '$backgroundLight300',
-    borderRadius: '$full',
-    w: '100%',
-    variants: {
-      size: {
-        'xs': {
-          h: '$1',
-          _filledTrack: {
-            h: '$1',
-          },
-        },
-        'sm': {
-          h: '$2',
-          _filledTrack: {
-            h: '$2',
-          },
-        },
-        'md': {
-          h: '$3',
-          _filledTrack: {
-            h: '$3',
-          },
-        },
-        'lg': {
-          h: '$4',
-          _filledTrack: {
-            h: '$4',
-          },
-        },
-        'xl': {
-          h: '$5',
-          _filledTrack: {
-            h: '$5',
-          },
-        },
-        '2xl': {
-          h: '$6',
-          _filledTrack: {
-            h: '$6',
-          },
-        },
-      },
-    },
-    _dark: {
-      bg: '$backgroundDark700',
-    },
-    defaultProps: {
-      size: 'md',
-    },
-  },
-  {
-    componentName: 'Progress',
-    descendantStyle: ['_filledTrack'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'Progress',
+  descendantStyle: ['_filledTrack'],
+} as const);
diff --git a/packages/themed/src/components/Provider/index.tsx b/packages/themed/src/components/Provider/index.tsx
index a1d9582ba7..441d110f44 100644
--- a/packages/themed/src/components/Provider/index.tsx
+++ b/packages/themed/src/components/Provider/index.tsx
@@ -3,8 +3,7 @@ import { createProvider } from '@gluestack-ui/provider';
 import { StyledProvider } from '@gluestack-style/react';
 import { OverlayProvider } from '@gluestack-ui/overlay';
 import { ToastProvider } from '@gluestack-ui/toast';
-
-import { config } from './../gluestack-ui.config';
+import { config } from '@gluestack-ui/config';
 const GluestackUIStyledProvider = createProvider({ StyledProvider });
 
 type GluestackUIProviderProps = Partial<
@@ -13,15 +12,17 @@ type GluestackUIProviderProps = Partial<
 
 const GluestackUIProvider = ({
   children,
-  config: configProp = config.theme,
   ...props
 }: GluestackUIProviderProps) => {
   return (
-    <GluestackUIStyledProvider config={configProp} {...props}>
-      <OverlayProvider>
-        <ToastProvider>{children}</ToastProvider>
-      </OverlayProvider>
-    </GluestackUIStyledProvider>
+    <>
+      {/** @ts-ignore */}
+      <GluestackUIStyledProvider config={config} {...props}>
+        <OverlayProvider>
+          <ToastProvider>{children}</ToastProvider>
+        </OverlayProvider>
+      </GluestackUIStyledProvider>
+    </>
   );
 };
 
diff --git a/packages/themed/src/components/Radio/styled-components/Icon.tsx b/packages/themed/src/components/Radio/styled-components/Icon.tsx
index 2b0e910e4c..96d24ff082 100644
--- a/packages/themed/src/components/Radio/styled-components/Icon.tsx
+++ b/packages/themed/src/components/Radio/styled-components/Icon.tsx
@@ -1,39 +1,8 @@
 import { styled } from '@gluestack-style/react';
 import { StyledIcon } from '../../Icons/styled-components';
 
-export default styled(
-  StyledIcon,
-  {
-    'w': '$full',
-    'h': '$full',
-    'borderRadius': '$full',
-    ':checked': {
-      'color': '$primary600',
-      ':hover': {
-        'color': '$primary700',
-        ':disabled': {
-          color: '$primary600',
-        },
-      },
-    },
-    '_dark': {
-      ':checked': {
-        'color': '$primary500',
-        ':disabled': {
-          color: '$primary500',
-        },
-        ':hover': {
-          ':disabled': {
-            color: '$primary500',
-          },
-          'color': '$primary400',
-        },
-      },
-    },
-  },
-  {
-    componentName: 'RadioIcon',
-    ancestorStyle: ['_icon'],
-    resolveProps: ['color'],
-  } as const
-);
+export default styled(StyledIcon, {}, {
+  componentName: 'RadioIcon',
+  ancestorStyle: ['_icon'],
+  resolveProps: ['color'],
+} as const);
diff --git a/packages/themed/src/components/Radio/styled-components/Indicator.tsx b/packages/themed/src/components/Radio/styled-components/Indicator.tsx
index a37709e022..b357180427 100644
--- a/packages/themed/src/components/Radio/styled-components/Indicator.tsx
+++ b/packages/themed/src/components/Radio/styled-components/Indicator.tsx
@@ -1,115 +1,7 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    'justifyContent': 'center',
-    'alignItems': 'center',
-    'bg': 'transparent',
-    'borderColor': '$borderLight400',
-    'borderWidth': 2,
-    'borderRadius': 999,
-    '_web': {
-      ':focusVisible': {
-        outlineWidth: 2,
-        outlineColor: '$primary700',
-        outlineStyle: 'solid',
-        _dark: {
-          outlineColor: '$primary400',
-        },
-      },
-    },
-
-    ':checked': {
-      borderColor: '$primary600',
-      bg: 'transparent',
-    },
-
-    ':hover': {
-      'borderColor': '$borderLight500',
-      'bg': 'transparent',
-
-      ':checked': {
-        bg: 'transparent',
-        borderColor: '$primary700',
-      },
-      ':invalid': {
-        borderColor: '$error700',
-      },
-      ':disabled': {
-        ':invalid': {
-          borderColor: '$error400',
-          opacity: 0.4,
-        },
-        'borderColor': '$borderLight400',
-        'opacity': 0.4,
-      },
-    },
-
-    ':active': {
-      bg: 'transparent',
-      borderColor: '$primary800',
-    },
-
-    '_dark': {
-      'borderColor': '$borderDark500',
-      'bg': '$transparent',
-
-      ':hover': {
-        'borderColor': '$borderDark400',
-        'bg': 'transparent',
-
-        ':checked': {
-          bg: 'transparent',
-          borderColor: '$primary400',
-        },
-        ':invalid': {
-          borderColor: '$error400',
-        },
-        ':disabled': {
-          'borderColor': '$borderDark500',
-          'opacity': 0.4,
-          ':checked': {
-            bg: 'transparent',
-            borderColor: '$primary500',
-          },
-          ':invalid': {
-            borderColor: '$error400',
-          },
-        },
-      },
-
-      ':checked': {
-        borderColor: '$primary500',
-      },
-
-      ':active': {
-        bg: 'transparent',
-        borderColor: '$primary300',
-      },
-      ':invalid': {
-        borderColor: '$error400',
-      },
-    },
-
-    ':invalid': {
-      borderColor: '$error700',
-    },
-
-    ':disabled': {
-      'opacity': 0.4,
-      ':checked': {
-        borderColor: '$borderLight400',
-        bg: 'transparent',
-      },
-      ':invalid': {
-        borderColor: '$error400',
-      },
-    },
-  },
-  {
-    componentName: 'RadioIndicator',
-    ancestorStyle: ['_indicator'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'RadioIndicator',
+  ancestorStyle: ['_indicator'],
+} as const);
diff --git a/packages/themed/src/components/Radio/styled-components/Label.tsx b/packages/themed/src/components/Radio/styled-components/Label.tsx
index 0ec86f277d..fce2b3f5a0 100644
--- a/packages/themed/src/components/Radio/styled-components/Label.tsx
+++ b/packages/themed/src/components/Radio/styled-components/Label.tsx
@@ -1,69 +1,7 @@
 import { Text } from '../../Text';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Text,
-  {
-    'color': '$textLight600',
-    ':checked': {
-      color: '$textLight900',
-    },
-    ':hover': {
-      'color': '$textLight900',
-      ':checked': {
-        color: '$textLight900',
-      },
-      ':disabled': {
-        'color': '$textLight600',
-        ':checked': {
-          color: '$textLight900',
-        },
-      },
-    },
-    ':active': {
-      'color': '$textLight900',
-      ':checked': {
-        color: '$textLight900',
-      },
-    },
-
-    ':disabled': {
-      opacity: 0.4,
-    },
-
-    '_web': {
-      MozUserSelect: 'none',
-      WebkitUserSelect: 'none',
-      msUserSelect: 'none',
-    },
-
-    '_dark': {
-      'color': '$textDark400',
-      ':checked': {
-        color: '$textDark100',
-      },
-      ':hover': {
-        'color': '$textDark100',
-        ':checked': {
-          color: '$textDark100',
-        },
-        ':disabled': {
-          'color': '$textDark400',
-          ':checked': {
-            color: '$textDark100',
-          },
-        },
-      },
-      ':active': {
-        'color': '$textDark100',
-        ':checked': {
-          color: '$textDark100',
-        },
-      },
-    },
-  },
-  {
-    componentName: 'RadioLabel',
-    ancestorStyle: ['_text'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'RadioLabel',
+  ancestorStyle: ['_text'],
+} as const);
diff --git a/packages/themed/src/components/Radio/styled-components/Root.tsx b/packages/themed/src/components/Radio/styled-components/Root.tsx
index 04b10e5927..524a7b5bc8 100644
--- a/packages/themed/src/components/Radio/styled-components/Root.tsx
+++ b/packages/themed/src/components/Radio/styled-components/Root.tsx
@@ -1,63 +1,8 @@
 import { Pressable } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Pressable,
-  {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'flex-start',
-
-    variants: {
-      size: {
-        lg: {
-          _text: {
-            props: {
-              size: 'lg',
-            },
-          },
-          _indicator: {
-            p: 2,
-            h: '$6',
-            w: '$6',
-          },
-        },
-
-        md: {
-          _text: {
-            props: {
-              size: 'md',
-            },
-          },
-          _indicator: {
-            p: 1.5,
-            h: '$5',
-            w: '$5',
-          },
-        },
-
-        sm: {
-          _text: {
-            props: {
-              size: 'sm',
-            },
-          },
-          _indicator: {
-            p: 1,
-            h: '$4',
-            w: '$4',
-          },
-        },
-      },
-    },
-
-    defaultProps: {
-      size: 'md',
-    },
-  },
-  {
-    componentName: 'Radio',
-    descendantStyle: ['_icon', '_text', '_indicator'],
-    ancestorStyle: ['_radio'],
-  } as const
-);
+export default styled(Pressable, {}, {
+  componentName: 'Radio',
+  descendantStyle: ['_icon', '_text', '_indicator'],
+  ancestorStyle: ['_radio'],
+} as const);
diff --git a/packages/themed/src/components/Radio/styled-components/Root.web.tsx b/packages/themed/src/components/Radio/styled-components/Root.web.tsx
index ee090399f4..828f2612b8 100644
--- a/packages/themed/src/components/Radio/styled-components/Root.web.tsx
+++ b/packages/themed/src/components/Radio/styled-components/Root.web.tsx
@@ -1,67 +1,8 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-
-    variants: {
-      size: {
-        lg: {
-          _text: {
-            props: {
-              size: 'lg',
-            },
-          },
-          _indicator: {
-            p: 2,
-            h: '$6',
-            w: '$6',
-          },
-        },
-        md: {
-          _text: {
-            props: {
-              size: 'md',
-            },
-          },
-          _indicator: {
-            p: 1.5,
-            h: '$5',
-            w: '$5',
-          },
-        },
-        sm: {
-          _text: {
-            props: {
-              size: 'sm',
-            },
-          },
-          _indicator: {
-            p: 1,
-            h: '$4',
-            w: '$4',
-          },
-        },
-      },
-    },
-
-    defaultProps: {
-      size: 'md',
-    },
-    _web: {
-      'cursor': 'pointer',
-      ':disabled': {
-        cursor: 'not-allowed',
-      },
-    },
-  },
-  {
-    componentName: 'Radio',
-    descendantStyle: ['_icon', '_text', '_indicator'],
-    ancestorStyle: ['_radio'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'Radio',
+  descendantStyle: ['_icon', '_text', '_indicator'],
+  ancestorStyle: ['_radio'],
+} as const);
diff --git a/packages/themed/src/components/Select/index.tsx b/packages/themed/src/components/Select/index.tsx
index 0e5cd109f0..7724b2fc5e 100644
--- a/packages/themed/src/components/Select/index.tsx
+++ b/packages/themed/src/components/Select/index.tsx
@@ -23,6 +23,7 @@ import {
   Input as StyledSelectInput,
   Icon as StyledSelectIcon,
 } from './styled-components';
+import { AnimatePresence } from '@gluestack-style/animation-resolver';
 
 const Actionsheet = createActionsheet({
   Root,
@@ -39,7 +40,7 @@ const Actionsheet = createActionsheet({
   SectionList,
   SectionHeaderText,
   // @ts-ignore
-  AnimatePresence: Content.AnimatePresence,
+  AnimatePresence: AnimatePresence,
 });
 
 export const Select = createSelect(
diff --git a/packages/themed/src/components/Select/styled-components-actionsheet/Backdrop.tsx b/packages/themed/src/components/Select/styled-components-actionsheet/Backdrop.tsx
index fba8a08141..d1e543640e 100644
--- a/packages/themed/src/components/Select/styled-components-actionsheet/Backdrop.tsx
+++ b/packages/themed/src/components/Select/styled-components-actionsheet/Backdrop.tsx
@@ -1,44 +1,6 @@
-//@ts-nocheck
-import { createMotionAnimatedComponent, Motion } from '@legendapp/motion';
-import { Pressable } from 'react-native';
+import { AnimatedPressable } from '@gluestack-style/animation-resolver';
 import { styled } from '@gluestack-style/react';
-import { AnimationResolver } from '@gluestack-style/animation-plugin';
 
-const MotionPressable = createMotionAnimatedComponent(
-  Pressable
-) as typeof Motion.Pressable;
-
-export default styled(
-  MotionPressable,
-  {
-    ':initial': {
-      opacity: 0,
-    },
-    ':animate': {
-      opacity: 0.5,
-    },
-    ':exit': {
-      opacity: 0,
-    },
-    'position': 'absolute',
-    'left': 0,
-    'top': 0,
-    'right': 0,
-    'bottom': 0,
-    'bg': '$backgroundLight950',
-    // @ts-ignore
-    '_dark': {
-      bg: '$backgroundDark950',
-    },
-    // @ts-ignore
-    '_web': {
-      cursor: 'default',
-    },
-  },
-  {
-    componentName: 'SelectActionsheetBackdrop',
-  } as const,
-  {
-    plugins: [new AnimationResolver({})],
-  }
-);
+export default styled(AnimatedPressable, {}, {
+  componentName: 'SelectActionsheetBackdrop',
+} as const);
diff --git a/packages/themed/src/components/Select/styled-components-actionsheet/Content.tsx b/packages/themed/src/components/Select/styled-components-actionsheet/Content.tsx
index 2b3c652349..53f348c7be 100644
--- a/packages/themed/src/components/Select/styled-components-actionsheet/Content.tsx
+++ b/packages/themed/src/components/Select/styled-components-actionsheet/Content.tsx
@@ -1,38 +1,7 @@
-import { Motion } from '@legendapp/motion';
 import { styled } from '@gluestack-style/react';
-import { AnimationResolver } from '@gluestack-style/animation-plugin';
+import { AnimatedView } from '@gluestack-style/animation-resolver';
 
-export default styled(
-  Motion.View,
-  {
-    alignItems: 'center',
-    borderTopLeftRadius: '$3xl',
-    borderTopRightRadius: '$3xl',
-    p: '$2',
-    bg: '$backgroundLight0',
-    _sectionHeaderBackground: {
-      bg: '$backgroundLight0',
-    },
-    // @ts-ignore
-    _dark: {
-      bg: '$backgroundDark900',
-      _sectionHeaderBackground: {
-        bg: '$backgroundDark900',
-      },
-    },
-    // @ts-ignore
-    _web: {
-      userSelect: 'none',
-    },
-    defaultProps: {
-      hardShadow: '5',
-    },
-  },
-  {
-    componentName: 'SelectActionsheetContent',
-    descendantStyle: ['_sectionHeaderBackground'],
-  } as const,
-  {
-    plugins: [new AnimationResolver({})],
-  }
-);
+export default styled(AnimatedView, {}, {
+  componentName: 'SelectActionsheetContent',
+  descendantStyle: ['_sectionHeaderBackground'],
+} as const);
diff --git a/packages/themed/src/components/Select/styled-components-actionsheet/DragIndicator.tsx b/packages/themed/src/components/Select/styled-components-actionsheet/DragIndicator.tsx
index e2ea203557..5b3c8d0f9d 100644
--- a/packages/themed/src/components/Select/styled-components-actionsheet/DragIndicator.tsx
+++ b/packages/themed/src/components/Select/styled-components-actionsheet/DragIndicator.tsx
@@ -1,18 +1,6 @@
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    height: '$1',
-    width: '$16',
-    bg: '$backgroundLight400',
-    rounded: '$full',
-    _dark: {
-      bg: '$backgroundDark500',
-    },
-  },
-  {
-    componentName: 'SelectActionsheetDragIndicator',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'SelectActionsheetDragIndicator',
+} as const);
diff --git a/packages/themed/src/components/Select/styled-components-actionsheet/FlatList.tsx b/packages/themed/src/components/Select/styled-components-actionsheet/FlatList.tsx
index f9c4050963..38b383f4a3 100644
--- a/packages/themed/src/components/Select/styled-components-actionsheet/FlatList.tsx
+++ b/packages/themed/src/components/Select/styled-components-actionsheet/FlatList.tsx
@@ -1,13 +1,6 @@
 import { FlatList } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  FlatList,
-  {
-    w: '$full',
-    h: 'auto',
-  },
-  {
-    componentName: 'SelectActionsheetFlatList',
-  } as const
-);
+export default styled(FlatList, {}, {
+  componentName: 'SelectActionsheetFlatList',
+} as const);
diff --git a/packages/themed/src/components/Select/styled-components-actionsheet/Icon.tsx b/packages/themed/src/components/Select/styled-components-actionsheet/Icon.tsx
index abe7432686..c1c5ef7beb 100644
--- a/packages/themed/src/components/Select/styled-components-actionsheet/Icon.tsx
+++ b/packages/themed/src/components/Select/styled-components-actionsheet/Icon.tsx
@@ -1,23 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { StyledIcon } from '../../Icons/styled-components';
 
-export default styled(
-  StyledIcon,
-  {
-    w: '$4',
-    h: '$4',
-    mr: '$2',
-    color: '$backgroundLight500',
-    _dark: {
-      //@ts-ignore
-      color: '$backgroundDark400',
-    },
-    props: {
-      size: 'md',
-    },
-  },
-  {
-    componentName: 'SelectActionsheetIcon',
-    ancestorStyle: ['_icon'],
-  } as const
-);
+export default styled(StyledIcon, {}, {
+  componentName: 'SelectActionsheetIcon',
+  ancestorStyle: ['_icon'],
+} as const);
diff --git a/packages/themed/src/components/Select/styled-components-actionsheet/IndicatorWrapper.tsx b/packages/themed/src/components/Select/styled-components-actionsheet/IndicatorWrapper.tsx
index 12b0b68396..2645cd2aed 100644
--- a/packages/themed/src/components/Select/styled-components-actionsheet/IndicatorWrapper.tsx
+++ b/packages/themed/src/components/Select/styled-components-actionsheet/IndicatorWrapper.tsx
@@ -1,14 +1,6 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    py: '$1',
-    w: '$full',
-    alignItems: 'center',
-  },
-  {
-    componentName: 'SelectActionsheetIndicatorWrapper',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'SelectActionsheetIndicatorWrapper',
+} as const);
diff --git a/packages/themed/src/components/Select/styled-components-actionsheet/Item.tsx b/packages/themed/src/components/Select/styled-components-actionsheet/Item.tsx
index 8f770c34a1..4eaeaf8a2e 100644
--- a/packages/themed/src/components/Select/styled-components-actionsheet/Item.tsx
+++ b/packages/themed/src/components/Select/styled-components-actionsheet/Item.tsx
@@ -1,61 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { Pressable } from 'react-native';
 
-export default styled(
-  Pressable,
-  {
-    'p': '$3',
-    'flexDirection': 'row',
-    'alignItems': 'center',
-    'rounded': '$sm',
-    'w': '$full',
-
-    ':disabled': {
-      opacity: 0.4,
-      _web: {
-        // @ts-ignore
-        pointerEvents: 'all !important',
-        cursor: 'not-allowed',
-      },
-    },
-
-    ':hover': {
-      bg: '$backgroundLight100',
-    },
-
-    ':active': {
-      bg: '$backgroundLight200',
-    },
-
-    ':focus': {
-      bg: '$backgroundLight100',
-    },
-
-    '_dark': {
-      ':hover': {
-        bg: '$backgroundDark800',
-      },
-
-      ':active': {
-        bg: '$backgroundDark700',
-      },
-
-      ':focus': {
-        bg: '$backgroundDark800',
-      },
-    },
-
-    '_web': {
-      ':focusVisible': {
-        bg: '$backgroundLight100',
-        _dark: {
-          bg: '$backgroundDark700',
-        },
-      },
-    },
-  },
-  {
-    componentName: 'SelectActionsheetItem',
-    descendantStyle: ['_text'],
-  } as const
-);
+export default styled(Pressable, {}, {
+  componentName: 'SelectActionsheetItem',
+  descendantStyle: ['_text'],
+} as const);
diff --git a/packages/themed/src/components/Select/styled-components-actionsheet/ItemText.tsx b/packages/themed/src/components/Select/styled-components-actionsheet/ItemText.tsx
index fa7229f415..42f7a808d5 100644
--- a/packages/themed/src/components/Select/styled-components-actionsheet/ItemText.tsx
+++ b/packages/themed/src/components/Select/styled-components-actionsheet/ItemText.tsx
@@ -1,21 +1,7 @@
 import { Text } from '../../Text';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Text,
-  {
-    mx: '$2',
-    fontSize: '$md',
-    fontFamily: '$body',
-    fontWeight: '$normal',
-    lineHeight: '$md',
-    color: '$textLight700',
-    _dark: {
-      color: '$textDark200',
-    },
-  },
-  {
-    componentName: 'SelectActionsheetItemText',
-    ancestorStyle: ['_text'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'SelectActionsheetItemText',
+  ancestorStyle: ['_text'],
+} as const);
diff --git a/packages/themed/src/components/Select/styled-components-actionsheet/Root.tsx b/packages/themed/src/components/Select/styled-components-actionsheet/Root.tsx
index 47bac2b4b4..e1e62b238b 100644
--- a/packages/themed/src/components/Select/styled-components-actionsheet/Root.tsx
+++ b/packages/themed/src/components/Select/styled-components-actionsheet/Root.tsx
@@ -1,15 +1,6 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    width: '$full',
-    height: '$full',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  },
-  {
-    componentName: 'SelectActionsheet',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'SelectActionsheet',
+} as const);
diff --git a/packages/themed/src/components/Select/styled-components-actionsheet/ScrollView.tsx b/packages/themed/src/components/Select/styled-components-actionsheet/ScrollView.tsx
index d499788d70..9e0fc83511 100644
--- a/packages/themed/src/components/Select/styled-components-actionsheet/ScrollView.tsx
+++ b/packages/themed/src/components/Select/styled-components-actionsheet/ScrollView.tsx
@@ -1,13 +1,6 @@
 import { ScrollView } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  ScrollView,
-  {
-    w: '$full',
-    h: 'auto',
-  },
-  {
-    componentName: 'SelectActionsheetScrollView',
-  } as const
-);
+export default styled(ScrollView, {}, {
+  componentName: 'SelectActionsheetScrollView',
+} as const);
diff --git a/packages/themed/src/components/Select/styled-components-actionsheet/SectionHeaderText.tsx b/packages/themed/src/components/Select/styled-components-actionsheet/SectionHeaderText.tsx
index 90b204b37d..537dd30ddf 100644
--- a/packages/themed/src/components/Select/styled-components-actionsheet/SectionHeaderText.tsx
+++ b/packages/themed/src/components/Select/styled-components-actionsheet/SectionHeaderText.tsx
@@ -1,22 +1,7 @@
 import { Text } from '../../Text';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Text,
-  {
-    color: '$textLight500',
-    fontSize: '$sm',
-    fontFamily: '$body',
-    fontWeight: '$bold',
-    lineHeight: '$xs',
-    textTransform: 'uppercase',
-    p: '$3',
-    _dark: {
-      color: '$textDark400',
-    },
-  },
-  {
-    componentName: 'SelectActionsheetSectionHeaderText',
-    ancestorStyle: ['_sectionHeaderBackground'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'SelectActionsheetSectionHeaderText',
+  ancestorStyle: ['_sectionHeaderText'],
+} as const);
diff --git a/packages/themed/src/components/Select/styled-components-actionsheet/SectionList.tsx b/packages/themed/src/components/Select/styled-components-actionsheet/SectionList.tsx
index 8b0e524ba2..a1ef055c9b 100644
--- a/packages/themed/src/components/Select/styled-components-actionsheet/SectionList.tsx
+++ b/packages/themed/src/components/Select/styled-components-actionsheet/SectionList.tsx
@@ -1,13 +1,6 @@
 import { SectionList } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  SectionList,
-  {
-    w: '$full',
-    h: 'auto',
-  },
-  {
-    componentName: 'SelectActionsheetSectionList',
-  } as const
-);
+export default styled(SectionList, {}, {
+  componentName: 'SelectActionsheetSectionList',
+} as const);
diff --git a/packages/themed/src/components/Select/styled-components-actionsheet/VirtualizedList.tsx b/packages/themed/src/components/Select/styled-components-actionsheet/VirtualizedList.tsx
index 1855e2a3e1..192817f8c4 100644
--- a/packages/themed/src/components/Select/styled-components-actionsheet/VirtualizedList.tsx
+++ b/packages/themed/src/components/Select/styled-components-actionsheet/VirtualizedList.tsx
@@ -1,13 +1,6 @@
 import { VirtualizedList } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  VirtualizedList,
-  {
-    w: '$full',
-    h: 'auto',
-  },
-  {
-    componentName: 'SelectActionsheetVirtualizedList',
-  } as const
-);
+export default styled(VirtualizedList, {}, {
+  componentName: 'SelectActionsheetVirtualizedList',
+} as const);
diff --git a/packages/themed/src/components/Select/styled-components/Icon.tsx b/packages/themed/src/components/Select/styled-components/Icon.tsx
index 1e0a6cc558..3eafce24c1 100644
--- a/packages/themed/src/components/Select/styled-components/Icon.tsx
+++ b/packages/themed/src/components/Select/styled-components/Icon.tsx
@@ -3,11 +3,7 @@ import { StyledIcon } from '../../Icons/styled-components';
 
 export default styled(
   StyledIcon,
-  {
-    props: {
-      size: 'md',
-    },
-  },
+  {},
   {
     componentName: 'SelectIcon',
     ancestorStyle: ['_icon'],
diff --git a/packages/themed/src/components/Select/styled-components/Input.tsx b/packages/themed/src/components/Select/styled-components/Input.tsx
index 1bbfb00ed5..3027adab62 100644
--- a/packages/themed/src/components/Select/styled-components/Input.tsx
+++ b/packages/themed/src/components/Select/styled-components/Input.tsx
@@ -3,23 +3,7 @@ import { TextInput } from 'react-native';
 
 export default styled(
   TextInput,
-  {
-    _web: {
-      w: '$full',
-    },
-    flex: 1,
-    h: '$full',
-    color: '$textLight900',
-    props: {
-      placeholderTextColor: '$textLight500',
-    },
-    _dark: {
-      color: '$textDark50',
-      props: {
-        placeholderTextColor: '$textDark400',
-      },
-    },
-  },
+  {},
   {
     componentName: 'SelectInput',
     ancestorStyle: ['_input'],
diff --git a/packages/themed/src/components/Select/styled-components/Trigger.tsx b/packages/themed/src/components/Select/styled-components/Trigger.tsx
index 266a17a0d1..0547922146 100644
--- a/packages/themed/src/components/Select/styled-components/Trigger.tsx
+++ b/packages/themed/src/components/Select/styled-components/Trigger.tsx
@@ -3,357 +3,7 @@ import { Pressable } from 'react-native';
 
 export default styled(
   Pressable,
-  {
-    'borderWidth': 1,
-    'borderColor': '$backgroundLight300',
-    'borderRadius': '$sm',
-    'flexDirection': 'row',
-    'overflow': 'hidden',
-    'alignItems': 'center',
-
-    ':hover': {
-      borderColor: '$borderLight400',
-    },
-
-    ':focus': {
-      borderColor: '$primary700',
-    },
-
-    ':disabled': {
-      'opacity': 0.4,
-      ':hover': {
-        borderColor: '$backgroundLight300',
-      },
-    },
-
-    '_input': {
-      py: 'auto',
-      px: '$3',
-    },
-
-    '_icon': {
-      color: '$backgroundLight500',
-      _dark: {
-        color: '$backgroundLight500',
-      },
-    },
-
-    '_dark': {
-      'borderColor': '$borderDark700',
-      ':hover': {
-        borderColor: '$borderDark400',
-      },
-      ':focus': {
-        borderColor: '$primary400',
-      },
-      ':disabled': {
-        ':hover': {
-          borderColor: '$borderDark700',
-        },
-      },
-    },
-
-    'variants': {
-      size: {
-        xl: {
-          h: '$12',
-          _input: {
-            fontSize: '$xl',
-          },
-          _icon: {
-            h: '$6',
-            w: '$6',
-          },
-        },
-        lg: {
-          h: '$11',
-          _input: {
-            fontSize: '$lg',
-          },
-          _icon: {
-            h: '$5',
-            w: '$5',
-          },
-        },
-        md: {
-          h: '$10',
-          _input: {
-            fontSize: '$md',
-          },
-          _icon: {
-            h: '$4',
-            w: '$4',
-          },
-        },
-        sm: {
-          h: '$9',
-          _input: {
-            fontSize: '$sm',
-          },
-          _icon: {
-            h: '$3.5',
-            w: '$3.5',
-          },
-        },
-      },
-      variant: {
-        underlined: {
-          '_input': {
-            _web: {
-              outlineWidth: 0,
-              outline: 'none',
-            },
-            px: '$0',
-          },
-          'borderWidth': 0,
-          'borderRadius': 0,
-          'borderBottomWidth': '$1',
-          ':focus': {
-            'borderColor': '$primary700',
-            '_web': {
-              boxShadow: 'inset 0 -1px 0 0 $primary700',
-            },
-            ':hover': {
-              borderColor: '$primary700',
-              _web: {
-                boxShadow: 'inset 0 -1px 0 0 $primary600',
-              },
-            },
-          },
-          ':invalid': {
-            'borderBottomWidth': 2,
-            'borderBottomColor': '$error700',
-            '_web': {
-              boxShadow: 'inset 0 -1px 0 0 $error700',
-            },
-            ':hover': {
-              borderBottomColor: '$error700',
-            },
-            ':focus': {
-              'borderBottomColor': '$error700',
-              ':hover': {
-                borderBottomColor: '$error700',
-                _web: {
-                  boxShadow: 'inset 0 -1px 0 0 $error700',
-                },
-              },
-            },
-            ':disabled': {
-              ':hover': {
-                borderBottomColor: '$error700',
-                _web: {
-                  boxShadow: 'inset 0 -1px 0 0 $error700',
-                },
-              },
-            },
-          },
-          '_dark': {
-            ':focus': {
-              borderColor: '$primary400',
-              _web: {
-                boxShadow: 'inset 0 -1px 0 0 $primary400',
-              },
-            },
-            ':invalid': {
-              'borderColor': '$error400',
-              '_web': {
-                boxShadow: 'inset 0 -1px 0 0 $error400',
-              },
-              ':hover': {
-                borderBottomColor: '$error400',
-              },
-              ':focus': {
-                'borderBottomColor': '$error400',
-                ':hover': {
-                  borderBottomColor: '$error400',
-                  _web: {
-                    boxShadow: 'inset 0 -1px 0 0 $error400',
-                  },
-                },
-              },
-
-              ':disabled': {
-                ':hover': {
-                  borderBottomColor: '$error400',
-                  _web: {
-                    boxShadow: 'inset 0 -1px 0 0 $error400',
-                  },
-                },
-              },
-            },
-          },
-        },
-        outline: {
-          '_input': {
-            _web: {
-              outlineWidth: 0,
-              outline: 'none',
-            },
-          },
-          ':focus': {
-            'borderColor': '$primary700',
-            '_web': {
-              boxShadow: 'inset 0 0 0 1px $primary700',
-            },
-            ':hover': {
-              borderColor: '$primary700',
-              _web: {
-                boxShadow: 'inset 0 0 0 1px $primary600',
-              },
-            },
-          },
-          ':invalid': {
-            'borderColor': '$error700',
-            '_web': {
-              boxShadow: 'inset 0 0 0 1px $error700',
-            },
-            ':hover': {
-              borderColor: '$error700',
-            },
-            ':focus': {
-              'borderColor': '$error700',
-              ':hover': {
-                borderColor: '$error700',
-                _web: {
-                  boxShadow: 'inset 0 0 0 1px $error700',
-                },
-              },
-            },
-            ':disabled': {
-              ':hover': {
-                borderColor: '$error700',
-                _web: {
-                  boxShadow: 'inset 0 0 0 1px $error700',
-                },
-              },
-            },
-          },
-          '_dark': {
-            ':focus': {
-              borderColor: '$primary400',
-              _web: {
-                boxShadow: 'inset 0 0 0 1px $primary400',
-              },
-            },
-            ':invalid': {
-              'borderColor': '$error400',
-              '_web': {
-                boxShadow: 'inset 0 0 0 1px $error400',
-              },
-              ':hover': {
-                borderColor: '$error400',
-              },
-              ':focus': {
-                'borderColor': '$error400',
-                ':hover': {
-                  borderColor: '$error400',
-                  _web: {
-                    boxShadow: 'inset 0 0 0 1px $error400',
-                  },
-                },
-              },
-              ':disabled': {
-                ':hover': {
-                  borderColor: '$error400',
-                  _web: {
-                    boxShadow: 'inset 0 0 0 1px $error400',
-                  },
-                },
-              },
-            },
-          },
-        },
-        rounded: {
-          'borderRadius': 999,
-          '_input': {
-            px: '$4',
-            _web: {
-              outlineWidth: 0,
-              outline: 'none',
-            },
-          },
-          ':focus': {
-            'borderColor': '$primary700',
-            '_web': {
-              boxShadow: 'inset 0 0 0 1px $primary700',
-            },
-            ':hover': {
-              borderColor: '$primary700',
-              _web: {
-                boxShadow: 'inset 0 0 0 1px $primary600',
-              },
-            },
-          },
-          ':invalid': {
-            'borderColor': '$error700',
-            '_web': {
-              boxShadow: 'inset 0 0 0 1px $error700',
-            },
-            ':hover': {
-              borderColor: '$error700',
-            },
-            ':focus': {
-              'borderColor': '$error700',
-              ':hover': {
-                borderColor: '$error700',
-                _web: {
-                  boxShadow: 'inset 0 0 0 1px $error700',
-                },
-              },
-            },
-            ':disabled': {
-              ':hover': {
-                borderColor: '$error700',
-                _web: {
-                  boxShadow: 'inset 0 0 0 1px $error700',
-                },
-              },
-            },
-          },
-
-          '_dark': {
-            ':focus': {
-              borderColor: '$primary400',
-              _web: {
-                boxShadow: 'inset 0 0 0 1px $primary400',
-              },
-            },
-            ':invalid': {
-              'borderColor': '$error400',
-              '_web': {
-                boxShadow: 'inset 0 0 0 1px $error400',
-              },
-              ':hover': {
-                borderColor: '$error400',
-              },
-              ':focus': {
-                'borderColor': '$error400',
-                ':hover': {
-                  borderColor: '$error400',
-                  _web: {
-                    boxShadow: 'inset 0 0 0 1px $error400',
-                  },
-                },
-              },
-              ':disabled': {
-                ':hover': {
-                  borderColor: '$error400',
-                  _web: {
-                    boxShadow: 'inset 0 0 0 1px $error400',
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-
-    'defaultProps': {
-      size: 'md',
-      variant: 'outline',
-    },
-  },
+  {},
 
   {
     componentName: 'SelectTrigger',
diff --git a/packages/themed/src/components/Slider/styled-components/FilledTrack.tsx b/packages/themed/src/components/Slider/styled-components/FilledTrack.tsx
index 36164d53a9..0350da835d 100644
--- a/packages/themed/src/components/Slider/styled-components/FilledTrack.tsx
+++ b/packages/themed/src/components/Slider/styled-components/FilledTrack.tsx
@@ -1,34 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    'bg': '$primary500',
-    '_dark': {
-      bg: '$primary400',
-    },
-    ':focus': {
-      bg: '$primary600',
-      _dark: {
-        bg: '$primary300',
-      },
-    },
-    ':active': {
-      bg: '$primary600',
-      _dark: {
-        bg: '$primary300',
-      },
-    },
-    ':hover': {
-      bg: '$primary600',
-      _dark: {
-        bg: '$primary300',
-      },
-    },
-  },
-  {
-    componentName: 'SliderFilledTrack',
-    ancestorStyle: ['_filledTrack'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'SliderFilledTrack',
+  ancestorStyle: ['_filledTrack'],
+} as const);
diff --git a/packages/themed/src/components/Slider/styled-components/Root.tsx b/packages/themed/src/components/Slider/styled-components/Root.tsx
index 498777e927..52116c5dba 100644
--- a/packages/themed/src/components/Slider/styled-components/Root.tsx
+++ b/packages/themed/src/components/Slider/styled-components/Root.tsx
@@ -1,200 +1,7 @@
 // @ts-nocheck
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
-export default styled(
-  View,
-  {
-    justifyContent: 'center',
-    alignItems: 'center',
-    variants: {
-      orientation: {
-        horizontal: {
-          w: '$full',
-          _track: {
-            width: '$full',
-          },
-          _filledTrack: {
-            height: '$full',
-          },
-        },
-        vertical: {
-          h: '$full',
-          _track: {
-            height: '$full',
-          },
-          _filledTrack: {
-            width: '$full',
-          },
-        },
-      },
-      isReversed: {
-        true: {},
-        false: {},
-      },
-      size: {
-        sm: {
-          _thumb: {
-            h: '$4',
-            w: '$4',
-          },
-        },
-        md: {
-          _thumb: {
-            h: '$5',
-            w: '$5',
-          },
-        },
-        lg: {
-          _thumb: {
-            h: '$6',
-            w: '$6',
-          },
-        },
-      },
-    },
-    compoundVariants: [
-      {
-        orientation: 'horizontal',
-        size: 'sm',
-        value: {
-          _track: {
-            height: '$1',
-            flexDirection: 'row',
-          },
-        },
-      },
-      {
-        orientation: 'horizontal',
-        size: 'sm',
-        isReversed: true,
-        value: {
-          _track: {
-            height: '$1',
-            flexDirection: 'row-reverse',
-          },
-        },
-      },
-      {
-        orientation: 'horizontal',
-        size: 'md',
-        value: {
-          _track: {
-            height: 5,
-            flexDirection: 'row',
-          },
-        },
-      },
-      {
-        orientation: 'horizontal',
-        size: 'md',
-        isReversed: true,
-        value: {
-          _track: {
-            height: 5,
-            flexDirection: 'row-reverse',
-          },
-        },
-      },
-      {
-        orientation: 'horizontal',
-        size: 'lg',
-        value: {
-          _track: {
-            height: '$1.5',
-            flexDirection: 'row',
-          },
-        },
-      },
-      {
-        orientation: 'horizontal',
-        size: 'lg',
-        isReversed: true,
-        value: {
-          _track: {
-            height: '$1.5',
-            flexDirection: 'row-reverse',
-          },
-        },
-      },
-      {
-        orientation: 'vertical',
-        size: 'sm',
-        value: {
-          _track: {
-            w: '$1',
-            flexDirection: 'column-reverse',
-          },
-        },
-      },
-      {
-        orientation: 'vertical',
-        size: 'sm',
-        isReversed: true,
-        value: {
-          _track: {
-            width: '$1',
-            flexDirection: 'column',
-          },
-        },
-      },
-      {
-        orientation: 'vertical',
-        size: 'md',
-        value: {
-          _track: {
-            width: 5,
-            flexDirection: 'column-reverse',
-          },
-        },
-      },
-      {
-        orientation: 'vertical',
-        size: 'md',
-        isReversed: true,
-        value: {
-          _track: {
-            width: 5,
-            flexDirection: 'column',
-          },
-        },
-      },
-      {
-        orientation: 'vertical',
-        size: 'lg',
-        value: {
-          _track: {
-            width: '$1.5',
-            flexDirection: 'column-reverse',
-          },
-        },
-      },
-      {
-        orientation: 'vertical',
-        size: 'lg',
-        isReversed: true,
-        value: {
-          _track: {
-            width: '$1.5',
-            flexDirection: 'column',
-          },
-        },
-      },
-    ],
-    _web: {
-      ':disabled': {
-        // @ts-ignore
-        pointerEvents: 'all !important',
-        cursor: 'not-allowed',
-        opacity: 0.4,
-      },
-    },
-    defaultProps: {
-      size: 'md',
-      orientation: 'horizontal',
-    },
-  },
-  {
-    componentName: 'Slider',
-    descendantStyle: ['_thumb', '_track', '_filledTrack'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'Slider',
+  descendantStyle: ['_thumb', '_track', '_filledTrack'],
+} as const);
diff --git a/packages/themed/src/components/Slider/styled-components/Thumb.tsx b/packages/themed/src/components/Slider/styled-components/Thumb.tsx
index 3e3c2dff90..e6906d0287 100644
--- a/packages/themed/src/components/Slider/styled-components/Thumb.tsx
+++ b/packages/themed/src/components/Slider/styled-components/Thumb.tsx
@@ -1,65 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    'bg': '$primary500',
-    '_dark': {
-      bg: '$primary400',
-    },
-    'position': 'absolute',
-    'borderRadius': '$full',
-    ':focus': {
-      bg: '$primary600',
-      _dark: {
-        bg: '$primary300',
-      },
-    },
-    ':active': {
-      bg: '$primary600',
-      _dark: {
-        bg: '$primary300',
-      },
-    },
-    ':hover': {
-      bg: '$primary600',
-      _dark: {
-        bg: '$primary300',
-      },
-    },
-    ':disabled': {
-      bg: '$primary500',
-      _dark: {
-        bg: '$primary500',
-      },
-    },
-    '_web': {
-      //@ts-ignore
-      'cursor': 'pointer',
-      ':active': {
-        outlineWidth: 4,
-        outlineStyle: 'solid',
-        outlineColor: '$primary400',
-        _dark: {
-          outlineColor: '$primary500',
-        },
-      },
-      ':focus': {
-        outlineWidth: 4,
-        outlineStyle: 'solid',
-        outlineColor: '$primary400',
-        _dark: {
-          outlineColor: '$primary500',
-        },
-      },
-    },
-    'defaultProps': {
-      hardShadow: '1',
-    },
-  },
-  {
-    componentName: 'SliderThumb',
-    ancestorStyle: ['_thumb'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'SliderThumb',
+  ancestorStyle: ['_thumb'],
+} as const);
diff --git a/packages/themed/src/components/Slider/styled-components/ThumbInteraction.tsx b/packages/themed/src/components/Slider/styled-components/ThumbInteraction.tsx
index cddbabe2b0..2a90e25ed9 100644
--- a/packages/themed/src/components/Slider/styled-components/ThumbInteraction.tsx
+++ b/packages/themed/src/components/Slider/styled-components/ThumbInteraction.tsx
@@ -1,13 +1,6 @@
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    borderRadius: 9999,
-    zIndex: -1,
-  },
-  {
-    componentName: 'SliderThumbInteraction',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'SliderThumbInteraction',
+} as const);
diff --git a/packages/themed/src/components/Slider/styled-components/Track.tsx b/packages/themed/src/components/Slider/styled-components/Track.tsx
index 98ac2f6b8f..57b1d79756 100644
--- a/packages/themed/src/components/Slider/styled-components/Track.tsx
+++ b/packages/themed/src/components/Slider/styled-components/Track.tsx
@@ -1,31 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { Pressable } from 'react-native';
 
-export default styled(
-  Pressable,
-  {
-    // h: '100%',
-    // w: '100%',
-    bg: '$backgroundLight300',
-    _dark: {
-      bg: '$backgroundDark700',
-    },
-    borderRadius: '$lg',
-    overflow: 'hidden',
-
-    variants: {
-      variant: {
-        horizontal: {
-          width: '100%',
-        },
-        vertical: {
-          height: '100%',
-        },
-      },
-    },
-  },
-  {
-    componentName: 'SliderTrack',
-    ancestorStyle: ['_track'],
-  } as const
-);
+export default styled(Pressable, {}, {
+  componentName: 'SliderTrack',
+  ancestorStyle: ['_track'],
+} as const);
diff --git a/packages/themed/src/components/Spinner/styled-components/Root.tsx b/packages/themed/src/components/Spinner/styled-components/Root.tsx
index 92bf44f400..798eb002de 100644
--- a/packages/themed/src/components/Spinner/styled-components/Root.tsx
+++ b/packages/themed/src/components/Spinner/styled-components/Root.tsx
@@ -4,16 +4,7 @@ import { ActivityIndicator } from 'react-native';
 
 export default styled(
   ActivityIndicator,
-  {
-    props: {
-      color: '$primary500',
-    },
-    _dark: {
-      props: {
-        color: '$primary400',
-      },
-    },
-  },
+  {},
   {
     componentName: 'Spinner',
     resolveProps: ['color'],
diff --git a/packages/themed/src/components/Switch/styled-components/Root.tsx b/packages/themed/src/components/Switch/styled-components/Root.tsx
index 8c39fb1adb..6faaedb291 100644
--- a/packages/themed/src/components/Switch/styled-components/Root.tsx
+++ b/packages/themed/src/components/Switch/styled-components/Root.tsx
@@ -3,165 +3,7 @@ import { Switch } from 'react-native';
 
 export default styled(
   Switch,
-  {
-    'props': {
-      // todo: add support for this in style.gluestack.io
-      // trackColor: { false: '$backgroundLight300', true: '$primary600' },
-
-      // hacky fix for the above
-      //@ts-ignore
-      trackColor: { false: '$backgroundLight300', true: '$primary600' },
-      thumbColor: '$backgroundLight0',
-      //@ts-ignore
-      activeThumbColor: '$backgroundLight0',
-
-      // for ios specifically in unchecked state
-      ios_backgroundColor: '$backgroundLight300',
-    },
-    'borderRadius': '$full',
-    'variants': {
-      //@ts-ignore
-
-      size: {
-        sm: {
-          transform: [
-            {
-              scale: 0.75,
-            },
-          ],
-        },
-        md: {},
-        lg: {
-          transform: [
-            {
-              scale: 1.25,
-            },
-          ],
-        },
-      },
-    },
-    '_web': {
-      ':focus': {
-        outlineWidth: 0,
-        outlineColor: '$primary700',
-        outlineStyle: 'solid',
-        _dark: {
-          // @ts-ignore
-          outlineColor: '$primary600',
-          outlineWidth: 0,
-          outlineStyle: 'solid',
-        },
-      },
-    },
-
-    'defaultProps': {
-      size: 'md',
-    },
-    ':disabled': {
-      '_web': {
-        'cursor': 'pointer',
-        ':disabled': {
-          cursor: 'not-allowed',
-        },
-      },
-      'opacity': 0.4,
-      //@ts-ignore
-      'trackColor': { false: '$backgroundLight300', true: '$primary600' },
-      // for ios specifically in unchecked state
-      'ios_backgroundColor': '$backgroundLight300',
-      ':hover': {
-        props: {
-          //@ts-ignore
-          trackColor: { false: '$backgroundLight300', true: '$primary600' },
-        },
-      },
-    },
-    ':invalid': {
-      borderColor: '$error700',
-      borderRadius: 12,
-      borderWidth: 2,
-    },
-    ':hover': {
-      'props': {
-        // todo: add support for this in style.gluestack.io
-        // trackColor: { false: '$backgroundLight400', true: '$primary700' },
-
-        // hacky fix for the above
-        //@ts-ignore
-
-        trackColor: { false: '$backgroundLight400', true: '$primary700' },
-        ios_backgroundColor: '$backgroundLight400',
-      },
-      ':invalid': {
-        props: {
-          // todo: add support for this in style.gluestack.io
-          // trackColor: { false: '$backgroundLight400', true: '$primary700' },
-
-          // hacky fix for the above
-          //@ts-ignore
-
-          trackColor: { false: '$backgroundLight300', true: '$primary700' },
-        },
-      },
-    },
-    ':checked': {
-      props: {
-        //@ts-ignore
-        thumbColor: '$backgroundLight0',
-      },
-    },
-    '_dark': {
-      'props': {
-        //@ts-ignore
-        trackColor: { false: '$backgroundDark700', true: '$primary500' },
-        thumbColor: '$backgroundDark0',
-        //@ts-ignore
-        activeThumbColor: '$backgroundDark0',
-      },
-      ':invalid': {
-        borderColor: '$error400',
-        borderRadius: 12,
-        borderWidth: 2,
-      },
-      ':hover': {
-        'props': {
-          //@ts-ignore
-          trackColor: { false: '$backgroundDark600', true: '$primary600' },
-          ios_backgroundColor: '$backgroundLight400',
-        },
-        ':invalid': {
-          props: {
-            // todo: add support for this in style.gluestack.io
-            // trackColor: { false: '$backgroundLight400', true: '$primary700' },
-
-            // hacky fix for the above
-            //@ts-ignore
-
-            trackColor: { false: '$backgroundDark700', true: '$primary600' },
-          },
-        },
-      },
-      ':disabled': {
-        '_web': {
-          'cursor': 'pointer',
-          ':disabled': {
-            cursor: 'not-allowed',
-          },
-        },
-        'opacity': 0.4,
-        //@ts-ignore
-        'trackColor': { false: '$backgroundLight300', true: '$primary500' },
-        // for ios specifically in unchecked state
-        'ios_backgroundColor': '$backgroundLight300',
-        ':hover': {
-          props: {
-            //@ts-ignore
-            trackColor: { false: '$backgroundDark700', true: '$primary500' },
-          },
-        },
-      },
-    },
-  },
+  {},
   {
     componentName: 'Switch',
     resolveProps: [
diff --git a/packages/themed/src/components/Tabs/styled-components/Tab.tsx b/packages/themed/src/components/Tabs/styled-components/Tab.tsx
index 4cfc13dce7..b3c0e48342 100644
--- a/packages/themed/src/components/Tabs/styled-components/Tab.tsx
+++ b/packages/themed/src/components/Tabs/styled-components/Tab.tsx
@@ -2,68 +2,8 @@
 import { styled } from '@gluestack-style/react';
 import { Pressable } from 'react-native';
 
-export default styled(
-  Pressable,
-  {
-    'bg': 'transparent',
-    '_web': {
-      outlineWidth: 0,
-    },
-
-    'variants': {
-      size: {
-        md: {
-          px: '$4',
-          py: '$2',
-
-          _text: {
-            fontSize: '$md',
-            lineHeight: '$md',
-          },
-        },
-      },
-    },
-
-    'defaultProps': {
-      size: 'md',
-    },
-    ':hover': {
-      // bg: '$secondary50_alpha_20',
-      borderRadius: '$full',
-    },
-    ':active': {
-      // bg: '$secondary50_alpha_10',
-      borderRadius: '$full',
-    },
-    ':focus': {
-      // bg: '$secondary50_alpha_20',
-      borderRadius: '$full',
-    },
-    ':disabled': {
-      opacity: 0.5,
-    },
-
-    '_dark': {
-      ':hover': {
-        bg: '$backgroundLight500',
-        borderRadius: '$full',
-      },
-      ':active': {
-        bg: '$backgroundLight400',
-        borderRadius: '$full',
-      },
-      ':focus': {
-        bg: '$backgroundLight400',
-        borderRadius: '$full',
-      },
-      ':disabled': {
-        opacity: 0.5,
-      },
-    },
-  },
-  {
-    componentName: 'TabsTab',
-    descendantStyle: ['_title', '_icon'],
-    ancestorStyle: ['_tab'],
-  } as const
-);
+export default styled(Pressable, {}, {
+  componentName: 'TabsTab',
+  descendantStyle: ['_title', '_icon'],
+  ancestorStyle: ['_tab'],
+} as const);
diff --git a/packages/themed/src/components/Tabs/styled-components/TabIcon.tsx b/packages/themed/src/components/Tabs/styled-components/TabIcon.tsx
index 17fb5eba4e..15e92c51e0 100644
--- a/packages/themed/src/components/Tabs/styled-components/TabIcon.tsx
+++ b/packages/themed/src/components/Tabs/styled-components/TabIcon.tsx
@@ -1,16 +1,7 @@
 import { View } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  View,
-  {
-    alignItems: 'center',
-    justifyContent: 'center',
-    display: 'flex',
-    mr: 12,
-  },
-  {
-    componentName: 'TabsTabIcon',
-    ancestorStyle: ['_icon'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'TabsTabIcon',
+  ancestorStyle: ['_icon'],
+} as const);
diff --git a/packages/themed/src/components/Tabs/styled-components/TabList.tsx b/packages/themed/src/components/Tabs/styled-components/TabList.tsx
index cb75ce34f0..8ffcf3e955 100644
--- a/packages/themed/src/components/Tabs/styled-components/TabList.tsx
+++ b/packages/themed/src/components/Tabs/styled-components/TabList.tsx
@@ -1,16 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    flexDirection: 'row',
-    alignSelf: 'flex-start',
-    // bg: 'radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%) , rgba(255, 255, 255, 0.04);',
-    rounded: '$full',
-  },
-  {
-    componentName: 'TabsTabList',
-    descendantStyle: ['_tab'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'TabsTabList',
+  descendantStyle: ['_tab'],
+} as const);
diff --git a/packages/themed/src/components/Tabs/styled-components/TabTitle.tsx b/packages/themed/src/components/Tabs/styled-components/TabTitle.tsx
index 338df4eda1..63ccd6b843 100644
--- a/packages/themed/src/components/Tabs/styled-components/TabTitle.tsx
+++ b/packages/themed/src/components/Tabs/styled-components/TabTitle.tsx
@@ -1,13 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { Text } from 'react-native';
 
-export default styled(
-  Text,
-  {
-    fontFamily: '$body',
-  },
-  {
-    componentName: 'TabsTabTitle',
-    ancestorStyle: ['_title'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'TabsTabTitle',
+  ancestorStyle: ['_title'],
+} as const);
diff --git a/packages/themed/src/components/Text/styled-components/Root.tsx b/packages/themed/src/components/Text/styled-components/Root.tsx
index cfd87eccd9..c39220c83a 100644
--- a/packages/themed/src/components/Text/styled-components/Root.tsx
+++ b/packages/themed/src/components/Text/styled-components/Root.tsx
@@ -1,121 +1,6 @@
 import { Text } from 'react-native';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Text,
-  {
-    color: '$textLight700',
-    _dark: {
-      color: '$textDark200',
-    },
-    fontWeight: '$normal',
-    fontFamily: '$body',
-    fontStyle: 'normal',
-    letterSpacing: '$md',
-
-    variants: {
-      isTruncated: {
-        true: {
-          props: {
-            // @ts-ignore
-            numberOfLines: 1,
-            ellipsizeMode: 'tail',
-          },
-        },
-      },
-      bold: {
-        true: {
-          fontWeight: '$bold',
-        },
-      },
-      underline: {
-        true: {
-          textDecorationLine: 'underline',
-        },
-      },
-      strikeThrough: {
-        true: {
-          textDecorationLine: 'line-through',
-        },
-      },
-      sub: {
-        true: {
-          fontSize: '$xs',
-          lineHeight: '$xs',
-        },
-      },
-      italic: {
-        true: {
-          fontStyle: 'italic',
-        },
-      },
-      highlight: {
-        true: {
-          bg: '$yellow500',
-        },
-      },
-      size: {
-        '2xs': {
-          fontSize: '$2xs',
-          lineHeight: '$2xs',
-        },
-        'xs': {
-          fontSize: '$xs',
-          lineHeight: '$sm',
-        },
-
-        'sm': {
-          fontSize: '$sm',
-          lineHeight: '$sm',
-        },
-
-        'md': {
-          fontSize: '$md',
-          lineHeight: '$md',
-        },
-
-        'lg': {
-          fontSize: '$lg',
-          lineHeight: '$xl',
-        },
-
-        'xl': {
-          fontSize: '$xl',
-          lineHeight: '$xl',
-        },
-
-        '2xl': {
-          fontSize: '$2xl',
-          lineHeight: '$2xl',
-        },
-
-        '3xl': {
-          fontSize: '$3xl',
-          lineHeight: '$3xl',
-        },
-
-        '4xl': {
-          fontSize: '$4xl',
-          lineHeight: '$4xl',
-        },
-
-        '5xl': {
-          fontSize: '$5xl',
-          lineHeight: '$6xl',
-        },
-
-        '6xl': {
-          fontSize: '$6xl',
-          lineHeight: '$7xl',
-        },
-      },
-    },
-
-    defaultProps: {
-      size: 'md',
-    },
-  },
-  {
-    componentName: 'Text',
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'Text',
+} as const);
diff --git a/packages/themed/src/components/Textarea/styled-components/Input.tsx b/packages/themed/src/components/Textarea/styled-components/Input.tsx
index 75df105e09..549d70eccf 100644
--- a/packages/themed/src/components/Textarea/styled-components/Input.tsx
+++ b/packages/themed/src/components/Textarea/styled-components/Input.tsx
@@ -3,29 +3,7 @@ import { TextInput } from 'react-native';
 
 export default styled(
   TextInput,
-  {
-    p: '$2',
-    color: '$textLight900',
-    textAlignVertical: 'top',
-    flex: 1,
-    props: {
-      // @ts-ignore
-      multiline: true,
-      placeholderTextColor: '$textLight500',
-    },
-    _dark: {
-      color: '$textDark50',
-      props: {
-        placeholderTextColor: '$textDark400',
-      },
-    },
-    _web: {
-      'cursor': 'text',
-      ':disabled': {
-        cursor: 'not-allowed',
-      },
-    },
-  },
+  {},
   {
     componentName: 'TextareaInput',
     ancestorStyle: ['_input'],
diff --git a/packages/themed/src/components/Textarea/styled-components/Root.tsx b/packages/themed/src/components/Textarea/styled-components/Root.tsx
index 8cad68de54..e71b5765a4 100644
--- a/packages/themed/src/components/Textarea/styled-components/Root.tsx
+++ b/packages/themed/src/components/Textarea/styled-components/Root.tsx
@@ -3,159 +3,7 @@ import { styled } from '@gluestack-style/react';
 
 export default styled(
   View,
-  {
-    'w': '100%',
-    'borderWidth': 1,
-    'borderColor': '$backgroundLight300',
-    'borderRadius': '$sm',
-    'h': 100,
-    '_input': {
-      p: '$3',
-      _web: {
-        outlineWidth: 0,
-        outline: 'none',
-      },
-    },
-    ':hover': {
-      borderColor: '$borderLight400',
-    },
-
-    ':focus': {
-      'borderColor': '$primary700',
-      ':hover': {
-        borderColor: '$primary700',
-      },
-    },
-
-    ':disabled': {
-      'opacity': 0.4,
-      ':hover': {
-        borderColor: '$backgroundLight300',
-      },
-    },
-    '_dark': {
-      'borderColor': '$borderDark700',
-      ':hover': {
-        borderColor: '$borderDark600',
-      },
-      ':focus': {
-        'borderColor': '$primary400',
-        ':hover': {
-          borderColor: '$primary400',
-        },
-      },
-      ':disabled': {
-        ':hover': {
-          borderColor: '$borderDark700',
-        },
-      },
-    },
-
-    'variants': {
-      size: {
-        xl: {
-          _input: {
-            fontSize: '$xl',
-          },
-        },
-
-        lg: {
-          _input: {
-            fontSize: '$lg',
-          },
-        },
-        md: {
-          _input: {
-            fontSize: '$md',
-          },
-        },
-        sm: {
-          _input: {
-            fontSize: '$sm',
-          },
-        },
-      },
-      variant: {
-        default: {
-          '_input': {
-            _web: {
-              outlineWidth: '0',
-              outline: 'none',
-            },
-          },
-          ':focus': {
-            borderColor: '$primary700',
-            _web: {
-              boxShadow: 'inset 0 0 0 1px $primary700',
-            },
-          },
-          ':invalid': {
-            'borderColor': '$error700',
-            '_web': {
-              boxShadow: 'inset 0 0 0 1px $error700',
-            },
-            ':hover': {
-              borderColor: '$error700',
-            },
-            ':focus': {
-              ':hover': {
-                borderColor: '$primary700',
-                _web: {
-                  boxShadow: 'inset 0 0 0 1px $primary700',
-                },
-              },
-            },
-            ':disabled': {
-              ':hover': {
-                borderColor: '$error700',
-                _web: {
-                  boxShadow: 'inset 0 0 0 1px $error700',
-                },
-              },
-            },
-          },
-          '_dark': {
-            ':focus': {
-              borderColor: '$primary400',
-              _web: {
-                boxShadow: 'inset 0 0 0 1px $primary400',
-              },
-            },
-            ':invalid': {
-              'borderColor': '$error400',
-              '_web': {
-                boxShadow: 'inset 0 0 0 1px $error400',
-              },
-              ':hover': {
-                borderColor: '$error400',
-              },
-              ':focus': {
-                ':hover': {
-                  borderColor: '$primary400',
-                  _web: {
-                    boxShadow: 'inset 0 0 0 1px $primary400',
-                  },
-                },
-              },
-              ':disabled': {
-                ':hover': {
-                  borderColor: '$error400',
-                  _web: {
-                    boxShadow: 'inset 0 0 0 1px $error400',
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-
-    'defaultProps': {
-      variant: 'default',
-      size: 'md',
-    },
-  },
+  {},
   {
     componentName: 'Textarea',
     descendantStyle: ['_input'],
diff --git a/packages/themed/src/components/Toast/styled-components/Description.tsx b/packages/themed/src/components/Toast/styled-components/Description.tsx
index adf1411704..20f17c16cd 100644
--- a/packages/themed/src/components/Toast/styled-components/Description.tsx
+++ b/packages/themed/src/components/Toast/styled-components/Description.tsx
@@ -1,19 +1,7 @@
 import { Text } from '../../Text';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Text,
-  {
-    color: '$textLight700',
-    _dark: {
-      color: '$textDark200',
-    },
-    props: {
-      size: 'sm',
-    },
-  },
-  {
-    componentName: 'ToastDescription',
-    ancestorStyle: ['_text'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'ToastDescription',
+  ancestorStyle: ['_description'],
+} as const);
diff --git a/packages/themed/src/components/Toast/styled-components/Root.tsx b/packages/themed/src/components/Toast/styled-components/Root.tsx
index 67dc5e1f12..049a846cc5 100644
--- a/packages/themed/src/components/Toast/styled-components/Root.tsx
+++ b/packages/themed/src/components/Toast/styled-components/Root.tsx
@@ -1,116 +1,7 @@
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    px: '$4',
-    py: '$3',
-    borderRadius: '$sm',
-    flexDirection: 'row',
-    variants: {
-      action: {
-        error: {
-          bg: '$backgroundLightError',
-          borderColor: '$error300',
-          _icon: {
-            color: '$error500',
-          },
-          _dark: {
-            bg: '$backgroundDarkError',
-            borderColor: '$error700',
-            _icon: {
-              color: '$error500',
-            },
-          },
-        },
-        warning: {
-          bg: '$backgroundLightWarning',
-          borderColor: '$warning300',
-          _icon: {
-            color: '$warning500',
-          },
-          _dark: {
-            bg: '$backgroundDarkWarning',
-            borderColor: '$warning700',
-            _icon: {
-              color: '$warning500',
-            },
-          },
-        },
-        success: {
-          bg: '$backgroundLightSuccess',
-          borderColor: '$success300',
-          _icon: {
-            color: '$success500',
-          },
-          _dark: {
-            bg: '$backgroundDarkSuccess',
-            borderColor: '$success700',
-            _icon: {
-              color: '$warning500',
-            },
-          },
-        },
-        info: {
-          bg: '$backgroundLightInfo',
-          borderColor: '$info300',
-          _icon: {
-            color: '$info500',
-          },
-          _dark: {
-            bg: '$backgroundDarkInfo',
-            borderColor: '$info700',
-            _icon: {
-              color: '$info500',
-            },
-          },
-        },
-        attention: {
-          bg: '$backgroundLightMuted',
-          borderColor: '$secondary300',
-          _icon: {
-            color: '$secondary600',
-          },
-          _dark: {
-            bg: '$backgroundDarkMuted',
-            borderColor: '$secondary700',
-            _icon: {
-              color: '$secondary400',
-            },
-          },
-        },
-      },
-
-      variant: {
-        solid: {},
-        outline: {
-          borderWidth: '$1',
-          bg: '$white',
-          _dark: {
-            bg: '$black',
-          },
-        },
-        accent: {
-          borderLeftWidth: '$4',
-        },
-      },
-    },
-    m: '$3',
-
-    _web: {
-      props: {
-        pointerEvents: 'auto',
-      },
-    },
-    defaultProps: {
-      hardShadow: '5',
-      variant: 'solid',
-      action: 'attention',
-    },
-  },
-  {
-    componentName: 'Toast',
-    descendantStyle: ['_icon', '_text'],
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'Toast',
+  descendantStyle: ['_icon', '_title', '_description'],
+} as const);
diff --git a/packages/themed/src/components/Toast/styled-components/Title.tsx b/packages/themed/src/components/Toast/styled-components/Title.tsx
index a2d7cc0af1..a9dc38c22b 100644
--- a/packages/themed/src/components/Toast/styled-components/Title.tsx
+++ b/packages/themed/src/components/Toast/styled-components/Title.tsx
@@ -1,20 +1,7 @@
 import { Text } from '../../Text';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Text,
-  {
-    fontWeight: '$medium',
-    props: {
-      size: 'md',
-    },
-    color: '$textLight900',
-    _dark: {
-      color: '$textDark50',
-    },
-  },
-  {
-    componentName: 'ToastTitle',
-    ancestorStyle: ['_text'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'ToastTitle',
+  ancestorStyle: ['_title'],
+} as const);
diff --git a/packages/themed/src/components/Tooltip/index.tsx b/packages/themed/src/components/Tooltip/index.tsx
index 41446aaaaf..e9a3295995 100644
--- a/packages/themed/src/components/Tooltip/index.tsx
+++ b/packages/themed/src/components/Tooltip/index.tsx
@@ -1,12 +1,13 @@
 import { Root, Content, Text } from './styled-components';
 import { createTooltip } from '@gluestack-ui/tooltip';
+import { AnimatePresence } from '@gluestack-style/animation-resolver';
 
 export const Tooltip = createTooltip({
   Root,
   Content,
   Text,
   //@ts-ignore
-  AnimatePresence: Content.AnimatePresence,
+  AnimatePresence: AnimatePresence,
 });
 export const TooltipContent = Tooltip.Content;
 export const TooltipText = Tooltip.Text;
diff --git a/packages/themed/src/components/Tooltip/styled-components/Content.tsx b/packages/themed/src/components/Tooltip/styled-components/Content.tsx
index 7773561dc3..0dbe6792ea 100644
--- a/packages/themed/src/components/Tooltip/styled-components/Content.tsx
+++ b/packages/themed/src/components/Tooltip/styled-components/Content.tsx
@@ -1,59 +1,7 @@
-//@ts-nocheck
-import { AnimationResolver } from '@gluestack-style/animation-plugin';
+import { AnimatedView } from '@gluestack-style/animation-resolver';
 import { styled } from '@gluestack-style/react';
-import { Motion } from '@legendapp/motion';
 
-export default styled(
-  Motion.View,
-  {
-    ':initial': {
-      opacity: 0,
-      scale: 0.5,
-    },
-    ':animate': {
-      opacity: 1,
-      scale: 1,
-    },
-    ':exit': {
-      opacity: 0,
-      scale: 0.5,
-    },
-    ':transition': {
-      type: 'spring',
-      damping: 18,
-      stiffness: 250,
-      opacity: {
-        type: 'timing',
-        duration: 250,
-      },
-    },
-
-    'py': '$1',
-    'px': '$3',
-    'borderRadius': '$sm',
-    'bg': '$backgroundLight900',
-
-    '_text': {
-      fontSize: '$xs',
-      color: '$textLight50',
-    },
-
-    // @ts-ignore
-    '_dark': {
-      bg: '$backgroundDark800',
-      _text: {
-        color: '$textDark50',
-      },
-    },
-    'defaultProps': {
-      hardShadow: '2',
-    },
-  },
-  {
-    componentName: 'TooltipContent',
-    descendantStyle: ['_text'],
-  } as const,
-  {
-    plugins: [new AnimationResolver({})],
-  }
-);
+export default styled(AnimatedView, {}, {
+  componentName: 'TooltipContent',
+  descendantStyle: ['_text'],
+} as const);
diff --git a/packages/themed/src/components/Tooltip/styled-components/Root.tsx b/packages/themed/src/components/Tooltip/styled-components/Root.tsx
index a000c18471..b9694e960c 100644
--- a/packages/themed/src/components/Tooltip/styled-components/Root.tsx
+++ b/packages/themed/src/components/Tooltip/styled-components/Root.tsx
@@ -1,12 +1,6 @@
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    width: '$full',
-  },
-  {
-    componentName: 'Tooltip',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'Tooltip',
+} as const);
diff --git a/packages/themed/src/components/Tooltip/styled-components/Text.tsx b/packages/themed/src/components/Tooltip/styled-components/Text.tsx
index 201bfc893d..3a4cf793ac 100644
--- a/packages/themed/src/components/Tooltip/styled-components/Text.tsx
+++ b/packages/themed/src/components/Tooltip/styled-components/Text.tsx
@@ -1,16 +1,7 @@
 import { Text } from '../../Text';
 import { styled } from '@gluestack-style/react';
 
-export default styled(
-  Text,
-  {
-    color: '$red400',
-    fontFamily: '$body',
-    //@ts-ignore
-    userSelect: 'none',
-  },
-  {
-    componentName: 'TooltipText',
-    ancestorStyle: ['_text'],
-  } as const
-);
+export default styled(Text, {}, {
+  componentName: 'TooltipText',
+  ancestorStyle: ['_text'],
+} as const);
diff --git a/packages/themed/src/components/VStack/styled-components/Root.tsx b/packages/themed/src/components/VStack/styled-components/Root.tsx
index 915565d32c..a0ec64475f 100644
--- a/packages/themed/src/components/VStack/styled-components/Root.tsx
+++ b/packages/themed/src/components/VStack/styled-components/Root.tsx
@@ -1,45 +1,6 @@
 import { styled } from '@gluestack-style/react';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    flexDirection: 'column',
-    variants: {
-      space: {
-        'xs': {
-          gap: `$1`,
-        },
-        'sm': {
-          gap: `$2`,
-        },
-        'md': {
-          gap: `$3`,
-        },
-        'lg': {
-          gap: `$4`,
-        },
-        'xl': {
-          gap: `$5`,
-        },
-        '2xl': {
-          gap: `$6`,
-        },
-        '3xl': {
-          gap: `$7`,
-        },
-        '4xl': {
-          gap: `$8`,
-        },
-      },
-      reversed: {
-        true: {
-          flexDirection: 'column-reverse',
-        },
-      },
-    },
-  },
-  {
-    componentName: 'VStack',
-  } as const
-);
+export default styled(View, {}, {
+  componentName: 'VStack',
+} as const);
diff --git a/packages/themed/src/components/VStack/styled-components/Spacer.tsx b/packages/themed/src/components/VStack/styled-components/Spacer.tsx
new file mode 100644
index 0000000000..ae354170dd
--- /dev/null
+++ b/packages/themed/src/components/VStack/styled-components/Spacer.tsx
@@ -0,0 +1,6 @@
+import { styled } from '@gluestack-style/react';
+import { View } from 'react-native';
+
+export default styled(View, {}, {
+  componentName: 'VStackSpacer',
+} as const);
diff --git a/packages/themed/src/components/gluestack-ui.config.ts b/packages/themed/src/components/gluestack-ui.config.ts
index 8472653adb..a498f12d3c 100644
--- a/packages/themed/src/components/gluestack-ui.config.ts
+++ b/packages/themed/src/components/gluestack-ui.config.ts
@@ -1,6 +1,10 @@
+import { AnimationResolver } from '@gluestack-style/animation-resolver';
+import { MotionAnimationDriver } from '@gluestack-style/legend-motion-animation-driver';
+import { createConfig } from '@gluestack-style/react';
+
 export const config = {
   componentPath: '/components',
-  theme: {
+  theme: createConfig({
     aliases: {
       bg: 'backgroundColor',
       bgColor: 'backgroundColor',
@@ -691,9 +695,11 @@ export const config = {
         },
       },
     },
-  },
+    plugins: [new AnimationResolver(MotionAnimationDriver)],
+  }),
 } as const;
-type Config = typeof config.theme;
+
+type Config = typeof config; // Assuming `config` is defined elsewhere
 
 export interface UIConfig {}
 
diff --git a/packages/themed/src/index.ts b/packages/themed/src/index.ts
index 5699f433c2..44a3da1038 100644
--- a/packages/themed/src/index.ts
+++ b/packages/themed/src/index.ts
@@ -1,5 +1,12 @@
 'use client';
-export * from './components';
-export { config, UIConfig } from './components/gluestack-ui.config';
 
+export interface UIConfig {}
+export interface UIComponents {}
+
+declare module '@gluestack-style/react' {
+  interface ICustomConfig extends UIConfig {}
+  interface ICustomComponents extends UIComponents {}
+}
+
+export * from './components';
 export * from '@gluestack-style/react';
diff --git a/packages/themed/tsconfig.json b/packages/themed/tsconfig.json
index bbfad1690e..4728950c79 100644
--- a/packages/themed/tsconfig.json
+++ b/packages/themed/tsconfig.json
@@ -6,6 +6,7 @@
     "ignoreDeprecations": "5.0",
     "noEmit": false,
     "declaration": true,
+    "allowJs": true,
     "allowUnreachableCode": false,
     "allowUnusedLabels": true,
     "esModuleInterop": true,
diff --git a/testcodeshift.js b/testcodeshift.js
new file mode 100644
index 0000000000..30c8eebd75
--- /dev/null
+++ b/testcodeshift.js
@@ -0,0 +1,300 @@
+function removeVariant(originalObject) {
+  const newObject = {};
+  for (const key in originalObject) {
+    if (key === 'variants') {
+      if (!newObject.variants) {
+        newObject.variants = {
+          variant: originalObject.variants,
+        };
+      } else {
+        newObject.variants.variant = originalObject.variants;
+      }
+
+      // newObject.variant = removeVariant(originalObject[key]);
+    } else if (key === 'sizes') {
+      if (!newObject.variants) {
+        newObject.variants = {
+          sizes: originalObject.sizes,
+        };
+      } else {
+        newObject.variants.size = originalObject.sizes;
+      }
+      // newObject.variant = removeVariant(originalObject[key]);
+    } else {
+      newObject[key] = originalObject[key];
+    }
+  }
+  return newObject;
+}
+
+function removeBaseStyle(originalObject) {
+  const newObject = {};
+  for (const key in originalObject) {
+    if (key === 'baseStyle') {
+      const style = { ...originalObject[key].style };
+      delete originalObject[key].style;
+      Object.assign(newObject, { ...style, ...originalObject[key] });
+    } else {
+      newObject[key] = originalObject[key];
+    }
+  }
+  return newObject;
+}
+
+function removeStyle(originalObject) {
+  const newObject = {};
+  for (const key in originalObject) {
+    if (originalObject.hasOwnProperty(key)) {
+      if (
+        key === 'style' ||
+        key === 'state' ||
+        key === 'descendants' ||
+        key === 'platform' ||
+        key === 'colorMode'
+      ) {
+        Object.assign(newObject, originalObject[key]);
+        Object.assign(newObject, removeStyle(newObject));
+        // newObject = removeStyle(newObject);
+      } else if (typeof originalObject[key] === 'object') {
+        newObject[key] = removeStyle(originalObject[key]);
+      } else {
+        newObject[key] = originalObject[key];
+      }
+    }
+  }
+  return newObject;
+}
+
+function renamePseudoClasses(obj) {
+  const renameMap = {
+    indeterminate: ':indeterminate',
+    checked: ':checked',
+    readOnly: ':readOnly',
+    required: ':required',
+    invalid: ':invalid',
+    focus: ':focus',
+    focusVisible: ':focusVisible',
+    hover: ':hover',
+    pressed: ':pressed',
+    active: ':active',
+    loading: ':loading',
+    disabled: ':disabled',
+    web: '_web',
+    android: '_android',
+    ios: '_ios',
+    light: '_light',
+    dark: '_dark',
+  };
+  for (const key in obj) {
+    if (renameMap[key]) {
+      obj[renameMap[key]] = obj[key];
+      delete obj[key];
+      Object.assign(obj, renamePseudoClasses(obj));
+    } else if (typeof obj[key] === 'object') {
+      renamePseudoClasses(obj[key]);
+    }
+  }
+  return obj;
+}
+
+var newObj = {
+  baseStyle: {
+    style: {
+      // @ts-ignore
+      fontSize: 'vvvv',
+      color: `$text50`,
+      borderColor: '$blue500',
+      bg: '$amber500',
+      w: 100,
+      h: 100,
+    },
+    state: {
+      hover: {
+        style: {
+          fontSize: 'sm',
+        },
+        state: {
+          active: {
+            style: {
+              fontSize: 'sm',
+            },
+            platform: {
+              web: {
+                style: {
+                  color: 'red',
+                },
+              },
+            },
+          },
+        },
+      },
+      active: {
+        style: {
+          fontSize: 'sm',
+        },
+      },
+    },
+  },
+  variants: {
+    solid: {
+      style: {
+        color: `$text50`,
+      },
+      descendants: {
+        _text: {
+          style: {
+            color: 'red',
+          },
+        },
+      },
+    },
+  },
+  sizes: {
+    solid: {
+      style: {
+        color: `$text50`,
+      },
+    },
+  },
+};
+
+// const output1 = renamePseudoClasses(newObj);
+const inputObj = newObj;
+
+const outputcc = removeVariant(inputObj);
+const output2 = removeBaseStyle(outputcc);
+const output3 = removeStyle(output2);
+const output1 = renamePseudoClasses(output3);
+
+// console.log(process.argv[2]);
+// console.log(JSON.stringify(output1, null, 2));
+
+// jscodeshift can take a parser, like "babel", "babylon", "flow", "ts", or "tsx"
+// Read more: https://github.com/facebook/jscodeshift#parser
+export const parser = 'tsx';
+
+const babel = require('@babel/parser');
+const generate = require('@babel/generator').default;
+const babelPresetTypeScript = require('@babel/preset-typescript');
+const traverse = require('@babel/traverse').default;
+const types = require('@babel/types');
+function addQuotesToObjectKeys(code) {
+  const ast = babel.parse(`var a = ${code}`, {
+    presets: [babelPresetTypeScript],
+    sourceType: 'module',
+  });
+
+  traverse(ast, {
+    ObjectProperty: (path) => {
+      if (types.isTemplateLiteral(path.node.value)) {
+        path.node.value = types.stringLiteral(
+          path.node.value.quasis[0].value.raw
+        );
+      }
+      if (types.isIdentifier(path.node.key)) {
+        path.node.key = types.stringLiteral(path.node.key.name);
+      }
+      if (types.isNumericLiteral(path.node.key)) {
+        path.node.key = types.stringLiteral(path.node.key.extra.raw);
+      }
+      if (types.isStringLiteral(path.node.value)) {
+        path.node.value = types.stringLiteral(path.node.value.value);
+      }
+    },
+  });
+
+  let initAst;
+
+  traverse(ast, {
+    VariableDeclarator: (path) => {
+      initAst = path.node.init;
+    },
+  });
+
+  const { code: output } = generate(initAst, {
+    sourceType: 'module',
+    presets: [babelPresetTypeScript],
+  });
+  return output;
+}
+function replaceSingleQuotes(str) {
+  let inDoubleQuotes = false;
+  let newStr = '';
+  for (let i = 0; i < str.length; i++) {
+    if (str[i] === '"') {
+      inDoubleQuotes = !inDoubleQuotes;
+    }
+    if (str[i] === "'" && !inDoubleQuotes) {
+      newStr += '"';
+    } else {
+      newStr += str[i];
+    }
+  }
+  return newStr;
+}
+function generateObjectAst(obj) {
+  let properties = Object.entries(obj).map(([key, value]) => {
+    if (typeof value === 'object' && !Array.isArray(value)) {
+      return types.objectProperty(
+        types.stringLiteral(key),
+        generateObjectAst(value)
+      );
+    } else if (typeof value === 'object' && Array.isArray(value)) {
+      let elements = value.map((obj) => {
+        if (typeof obj === 'string') {
+          return types.stringLiteral(obj);
+        } else {
+          return generateObjectAst(obj);
+        }
+      });
+      return types.objectProperty(
+        types.stringLiteral(key),
+        types.arrayExpression(elements)
+      );
+    } else {
+      return types.objectProperty(
+        types.stringLiteral(key),
+        typeof value === 'number'
+          ? types.numericLiteral(value)
+          : types.stringLiteral(value)
+      );
+    }
+  });
+  return types.objectExpression(properties);
+}
+// Press ctrl+space for code completion
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  function getObjectFromAstNode(node) {
+    let objectCode = generate(node).code;
+    objectCode = addQuotesToObjectKeys(
+      objectCode.replace(
+        /\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g,
+        (m, g) => (g ? '' : m)
+      )
+    );
+    // Checking for single quotes and replacing it with " while keeping in mind to not replace single quotes inside double quotes
+    objectCode = replaceSingleQuotes(objectCode);
+    // console.log(objectCode);
+    return JSON.parse(objectCode);
+  }
+  return j(file.source)
+    .find(j.CallExpression)
+    .forEach((path) => {
+      if (path.node.callee.name === 'styled') {
+        let argument = path.node.arguments;
+        let arg1 = argument[1];
+        let inputObj = getObjectFromAstNode(arg1);
+        const outputcc = removeVariant(inputObj);
+        const output2 = removeBaseStyle(outputcc);
+        const output3 = removeStyle(output2);
+        const output1 = renamePseudoClasses(output3);
+        let outputAst = generateObjectAst(output1);
+        // console.log(outputAst);
+        path.node.arguments[1] = outputAst;
+      }
+    })
+    .toSource();
+}
+
+// jscodeshift -t ./transformer.js ./testcodeshift.js
diff --git a/yarn.lock b/yarn.lock
index 3682163086..566d954482 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -99,7 +99,7 @@
     eslint-visitor-keys "^2.1.0"
     semver "^6.3.0"
 
-"@babel/generator@^7.12.11", "@babel/generator@^7.12.5", "@babel/generator@^7.14.0", "@babel/generator@^7.20.0", "@babel/generator@^7.20.5", "@babel/generator@^7.20.7", "@babel/generator@^7.22.5", "@babel/generator@^7.7.2":
+"@babel/generator@^7.12.11", "@babel/generator@^7.12.5", "@babel/generator@^7.20.0", "@babel/generator@^7.20.5", "@babel/generator@^7.20.7", "@babel/generator@^7.22.5", "@babel/generator@^7.7.2":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.22.5.tgz#1e7bf768688acfb05cf30b2369ef855e82d984f7"
   integrity sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==
@@ -401,7 +401,7 @@
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.13.16", "@babel/parser@^7.14.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.0", "@babel/parser@^7.20.5", "@babel/parser@^7.20.7", "@babel/parser@^7.22.5":
+"@babel/parser@^7.1.0", "@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.13.16", "@babel/parser@^7.14.7", "@babel/parser@^7.20.0", "@babel/parser@^7.20.5", "@babel/parser@^7.20.7", "@babel/parser@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.5.tgz#721fd042f3ce1896238cf1b341c77eb7dee7dbea"
   integrity sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==
@@ -442,7 +442,7 @@
     "@babel/helper-remap-async-to-generator" "^7.18.9"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
-"@babel/plugin-proposal-class-properties@^7.0.0", "@babel/plugin-proposal-class-properties@^7.12.1", "@babel/plugin-proposal-class-properties@^7.13.0", "@babel/plugin-proposal-class-properties@^7.17.12":
+"@babel/plugin-proposal-class-properties@^7.0.0", "@babel/plugin-proposal-class-properties@^7.12.1", "@babel/plugin-proposal-class-properties@^7.13.0", "@babel/plugin-proposal-class-properties@^7.17.12", "@babel/plugin-proposal-class-properties@^7.18.0":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
   integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
@@ -469,7 +469,7 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-export-default-from" "^7.22.5"
 
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.0.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.12.1", "@babel/plugin-proposal-nullish-coalescing-operator@^7.13.8":
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.0.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.12.1", "@babel/plugin-proposal-nullish-coalescing-operator@^7.13.8", "@babel/plugin-proposal-nullish-coalescing-operator@^7.18.0":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
   integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
@@ -477,6 +477,14 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
+"@babel/plugin-proposal-numeric-separator@^7.0.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz#899b14fbafe87f053d2c5ff05b36029c62e13c75"
+  integrity sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
 "@babel/plugin-proposal-object-rest-spread@7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz#def9bd03cea0f9b72283dac0ec22d289c7691069"
@@ -486,7 +494,7 @@
     "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
     "@babel/plugin-transform-parameters" "^7.12.1"
 
-"@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.12.1", "@babel/plugin-proposal-object-rest-spread@^7.12.13":
+"@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.12.1", "@babel/plugin-proposal-object-rest-spread@^7.12.13", "@babel/plugin-proposal-object-rest-spread@^7.20.0":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a"
   integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
@@ -505,7 +513,7 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-proposal-optional-chaining@^7.0.0", "@babel/plugin-proposal-optional-chaining@^7.12.7", "@babel/plugin-proposal-optional-chaining@^7.13.12":
+"@babel/plugin-proposal-optional-chaining@^7.0.0", "@babel/plugin-proposal-optional-chaining@^7.12.7", "@babel/plugin-proposal-optional-chaining@^7.13.12", "@babel/plugin-proposal-optional-chaining@^7.20.0":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea"
   integrity sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
@@ -580,7 +588,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-syntax-dynamic-import@^7.0.0", "@babel/plugin-syntax-dynamic-import@^7.8.3":
+"@babel/plugin-syntax-dynamic-import@^7.0.0", "@babel/plugin-syntax-dynamic-import@^7.8.0", "@babel/plugin-syntax-dynamic-import@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
   integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
@@ -601,7 +609,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-flow@^7.0.0", "@babel/plugin-syntax-flow@^7.18.0", "@babel/plugin-syntax-flow@^7.2.0", "@babel/plugin-syntax-flow@^7.22.5":
+"@babel/plugin-syntax-flow@^7.0.0", "@babel/plugin-syntax-flow@^7.12.1", "@babel/plugin-syntax-flow@^7.18.0", "@babel/plugin-syntax-flow@^7.2.0", "@babel/plugin-syntax-flow@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.22.5.tgz#163b820b9e7696ce134df3ee716d9c0c98035859"
   integrity sha512-9RdCl0i+q0QExayk2nOS7853w08yLucnnPML6EN9S8fgMPVtdLDCdx/cOQ/i44Lb9UeQX9A35yaqBBOMMZxPxQ==
@@ -748,7 +756,7 @@
     "@babel/helper-remap-async-to-generator" "^7.22.5"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
-"@babel/plugin-transform-async-to-generator@^7.0.0", "@babel/plugin-transform-async-to-generator@^7.22.5":
+"@babel/plugin-transform-async-to-generator@^7.0.0", "@babel/plugin-transform-async-to-generator@^7.20.0", "@babel/plugin-transform-async-to-generator@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.22.5.tgz#c7a85f44e46f8952f6d27fe57c2ed3cc084c3775"
   integrity sha512-b1A8D8ZzE/VhNDoV1MSJTnpKkCG5bJo+19R4o4oy03zM7ws8yEMK755j61Dc3EyvdysbqH5BOOTquJ7ZX9C6vQ==
@@ -840,6 +848,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
+"@babel/plugin-transform-destructuring@^7.20.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.23.0.tgz#6447aa686be48b32eaf65a73e0e2c0bd010a266c"
+  integrity sha512-vaMdgNXFkYrB+8lbgniSYWHsgqK5gjaMNcc84bMIOMRLH0L9AqYq3hwMdvnyqj1OPqea8UtjPEuS/DCenah1wg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
 "@babel/plugin-transform-destructuring@^7.22.10":
   version "7.22.10"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.22.10.tgz#38e2273814a58c810b6c34ea293be4973c4eb5e2"
@@ -886,7 +901,7 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-transform-flow-strip-types@^7.0.0", "@babel/plugin-transform-flow-strip-types@^7.22.5":
+"@babel/plugin-transform-flow-strip-types@^7.0.0", "@babel/plugin-transform-flow-strip-types@^7.20.0", "@babel/plugin-transform-flow-strip-types@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.22.5.tgz#0bb17110c7bf5b35a60754b2f00c58302381dee2"
   integrity sha512-tujNbZdxdG0/54g/oua8ISToaXTFBf8EnSb5PgQSciIXWOWKX3S4+JR7ZE9ol8FZwf9kxitzkGQ+QWeov/mCiA==
@@ -1249,7 +1264,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/preset-env@^7.12.11", "@babel/preset-env@^7.12.9", "@babel/preset-env@^7.18.2", "@babel/preset-env@^7.20.0":
+"@babel/preset-env@^7.12.11", "@babel/preset-env@^7.12.9", "@babel/preset-env@^7.18.2":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.22.5.tgz#3da66078b181f3d62512c51cf7014392c511504e"
   integrity sha512-fj06hw89dpiZzGZtxn+QybifF07nNiZjZ7sazs2aVDcysAZVGjW7+7iFYxg6GLNM47R/thYfLdrXc+2f11Vi9A==
@@ -1489,7 +1504,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.0", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.6", "@babel/runtime@^7.20.0", "@babel/runtime@^7.20.1", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.0", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.6", "@babel/runtime@^7.20.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec"
   integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==
@@ -1505,7 +1520,7 @@
     "@babel/parser" "^7.22.5"
     "@babel/types" "^7.22.5"
 
-"@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.14.0", "@babel/traverse@^7.20.0", "@babel/traverse@^7.20.13", "@babel/traverse@^7.20.5", "@babel/traverse@^7.22.5", "@babel/traverse@^7.7.2", "@babel/traverse@^7.7.4":
+"@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.20.0", "@babel/traverse@^7.20.13", "@babel/traverse@^7.20.5", "@babel/traverse@^7.22.5", "@babel/traverse@^7.7.2", "@babel/traverse@^7.7.4":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.5.tgz#44bd276690db6f4940fdb84e1cb4abd2f729ccd1"
   integrity sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==
@@ -2077,7 +2092,7 @@
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.5.1.tgz#cdd35dce4fa1a89a4fd42b1599eb35b3af408884"
   integrity sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==
 
-"@eslint/eslintrc@^2.0.2", "@eslint/eslintrc@^2.0.3":
+"@eslint/eslintrc@^2.0.3":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.0.3.tgz#4910db5505f4d503f27774bf356e3704818a0331"
   integrity sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==
@@ -2092,11 +2107,6 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@8.38.0":
-  version "8.38.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.38.0.tgz#73a8a0d8aa8a8e6fe270431c5e72ae91b5337892"
-  integrity sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g==
-
 "@eslint/js@8.43.0":
   version "8.43.0"
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.43.0.tgz#559ca3d9ddbd6bf907ad524320a0d14b85586af0"
@@ -2179,73 +2189,6 @@
     uuid "^3.4.0"
     wrap-ansi "^7.0.0"
 
-"@expo/cli@0.7.3":
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/@expo/cli/-/cli-0.7.3.tgz#8d61490f4961d40c38af72b7184e3c7cab70773e"
-  integrity sha512-uMGHbAhApqXR2sd1KPhgvpbOhBBnspad8msEqHleT2PHXwKIwTUDzBGO9+jdOAWwCx2MJfw3+asYjzoD3DN9Bg==
-  dependencies:
-    "@babel/runtime" "^7.20.0"
-    "@expo/code-signing-certificates" "0.0.5"
-    "@expo/config" "~8.0.0"
-    "@expo/config-plugins" "~6.0.0"
-    "@expo/dev-server" "0.3.0"
-    "@expo/devcert" "^1.0.0"
-    "@expo/json-file" "^8.2.37"
-    "@expo/metro-config" "~0.7.0"
-    "@expo/osascript" "^2.0.31"
-    "@expo/package-manager" "~1.0.0"
-    "@expo/plist" "^0.0.20"
-    "@expo/prebuild-config" "6.0.1"
-    "@expo/rudder-sdk-node" "1.1.1"
-    "@expo/spawn-async" "1.5.0"
-    "@expo/xcpretty" "^4.2.1"
-    "@urql/core" "2.3.6"
-    "@urql/exchange-retry" "0.3.0"
-    accepts "^1.3.8"
-    arg "4.1.0"
-    better-opn "~3.0.2"
-    bplist-parser "^0.3.1"
-    cacache "^15.3.0"
-    chalk "^4.0.0"
-    ci-info "^3.3.0"
-    debug "^4.3.4"
-    env-editor "^0.4.1"
-    form-data "^3.0.1"
-    freeport-async "2.0.0"
-    fs-extra "~8.1.0"
-    getenv "^1.0.0"
-    graphql "15.8.0"
-    graphql-tag "^2.10.1"
-    https-proxy-agent "^5.0.1"
-    internal-ip "4.3.0"
-    is-root "^2.1.0"
-    js-yaml "^3.13.1"
-    json-schema-deref-sync "^0.13.0"
-    md5-file "^3.2.3"
-    md5hex "^1.0.0"
-    minipass "3.1.6"
-    node-fetch "^2.6.7"
-    node-forge "^1.3.1"
-    npm-package-arg "^7.0.0"
-    ora "3.4.0"
-    pretty-bytes "5.6.0"
-    progress "2.0.3"
-    prompts "^2.3.2"
-    qrcode-terminal "0.11.0"
-    requireg "^0.2.2"
-    resolve-from "^5.0.0"
-    semver "^6.3.0"
-    send "^0.18.0"
-    slugify "^1.3.4"
-    structured-headers "^0.4.1"
-    tar "^6.0.5"
-    tempy "^0.7.1"
-    terminal-link "^2.1.1"
-    text-table "^0.2.0"
-    url-join "4.0.0"
-    wrap-ansi "^7.0.0"
-    ws "^8.12.1"
-
 "@expo/code-signing-certificates@0.0.5":
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/@expo/code-signing-certificates/-/code-signing-certificates-0.0.5.tgz#a693ff684fb20c4725dade4b88a6a9f96b02496c"
@@ -2275,37 +2218,11 @@
     xcode "^3.0.1"
     xml2js "0.4.23"
 
-"@expo/config-plugins@6.0.2", "@expo/config-plugins@~6.0.0":
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/@expo/config-plugins/-/config-plugins-6.0.2.tgz#cf07319515022ba94d9aa9fa30e0cff43a14256f"
-  integrity sha512-Cn01fXMHwjU042EgO9oO3Mna0o/UCrW91MQLMbJa4pXM41CYGjNgVy1EVXiuRRx/upegHhvltBw5D+JaUm8aZQ==
-  dependencies:
-    "@expo/config-types" "^48.0.0"
-    "@expo/json-file" "~8.2.37"
-    "@expo/plist" "^0.0.20"
-    "@expo/sdk-runtime-versions" "^1.0.0"
-    "@react-native/normalize-color" "^2.0.0"
-    chalk "^4.1.2"
-    debug "^4.3.1"
-    find-up "~5.0.0"
-    getenv "^1.0.0"
-    glob "7.1.6"
-    resolve-from "^5.0.0"
-    semver "^7.3.5"
-    slash "^3.0.0"
-    xcode "^3.0.1"
-    xml2js "0.4.23"
-
 "@expo/config-types@^47.0.0":
   version "47.0.0"
   resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-47.0.0.tgz#99eeabe0bba7a776e0f252b78beb0c574692c38d"
   integrity sha512-r0pWfuhkv7KIcXMUiNACJmJKKwlTBGMw9VZHNdppS8/0Nve8HZMTkNRFQzTHW1uH3pBj8jEXpyw/2vSWDHex9g==
 
-"@expo/config-types@^48.0.0":
-  version "48.0.0"
-  resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-48.0.0.tgz#15a46921565ffeda3c3ba010701398f05193d5b3"
-  integrity sha512-DwyV4jTy/+cLzXGAo1xftS6mVlSiLIWZjl9DjTCLPFVgNYQxnh7htPilRv4rBhiNs7KaznWqKU70+4zQoKVT9A==
-
 "@expo/config@7.0.3", "@expo/config@~7.0.2":
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/@expo/config/-/config-7.0.3.tgz#c9c634e76186de25e296485e51418f1e52966e6e"
@@ -2323,23 +2240,6 @@
     slugify "^1.3.4"
     sucrase "^3.20.0"
 
-"@expo/config@8.0.2", "@expo/config@~8.0.0":
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/@expo/config/-/config-8.0.2.tgz#53ecfa9bafc97b990ff9e34e210205b0e3f05751"
-  integrity sha512-WubrzTNNdAXy1FU8TdyQ7D9YtDj2tN3fWXDq+C8In+nB7Qc08zwH9cVdaGZ+rBVmjFZBh5ACfObKq/m9cm4QQA==
-  dependencies:
-    "@babel/code-frame" "~7.10.4"
-    "@expo/config-plugins" "~6.0.0"
-    "@expo/config-types" "^48.0.0"
-    "@expo/json-file" "^8.2.37"
-    getenv "^1.0.0"
-    glob "7.1.6"
-    require-from-string "^2.0.2"
-    resolve-from "^5.0.0"
-    semver "7.3.2"
-    slugify "^1.3.4"
-    sucrase "^3.20.0"
-
 "@expo/dev-server@0.1.124":
   version "0.1.124"
   resolved "https://registry.yarnpkg.com/@expo/dev-server/-/dev-server-0.1.124.tgz#81fca9eff42893a7cb9d51315f2c0dcf860c5eec"
@@ -2362,28 +2262,6 @@
     serialize-error "6.0.0"
     temp-dir "^2.0.0"
 
-"@expo/dev-server@0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@expo/dev-server/-/dev-server-0.3.0.tgz#c575c88b0ec28f127f328a80ea6a3a4c6f785800"
-  integrity sha512-2A6/8uZADSKAtzyR6YqhCBUFxb5DFmjxmFn0EHMqnPnsh13ZSiKEjrZPrRkM6Li2EHLYqHK2rmweJ7O/7q9pPQ==
-  dependencies:
-    "@expo/bunyan" "4.0.0"
-    "@expo/metro-config" "~0.7.0"
-    "@expo/osascript" "2.0.33"
-    "@expo/spawn-async" "^1.5.0"
-    body-parser "^1.20.1"
-    chalk "^4.0.0"
-    connect "^3.7.0"
-    fs-extra "9.0.0"
-    is-docker "^2.0.0"
-    is-wsl "^2.1.1"
-    node-fetch "^2.6.0"
-    open "^8.3.0"
-    resolve-from "^5.0.0"
-    semver "7.3.2"
-    serialize-error "6.0.0"
-    temp-dir "^2.0.0"
-
 "@expo/devcert@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@expo/devcert/-/devcert-1.1.0.tgz#d148eb9180db6753c438192e73a123fb13b662ac"
@@ -2439,7 +2317,7 @@
     json5 "^1.0.1"
     write-file-atomic "^2.3.0"
 
-"@expo/json-file@^8.2.35", "@expo/json-file@^8.2.37", "@expo/json-file@~8.2.37":
+"@expo/json-file@^8.2.35", "@expo/json-file@^8.2.37":
   version "8.2.37"
   resolved "https://registry.yarnpkg.com/@expo/json-file/-/json-file-8.2.37.tgz#9c02d3b42134907c69cc0a027b18671b69344049"
   integrity sha512-YaH6rVg11JoTS2P6LsW7ybS2CULjf40AbnAHw2F1eDPuheprNjARZMnyHFPkKv7GuxCy+B9GPcbOKgc4cgA80Q==
@@ -2462,19 +2340,6 @@
     resolve-from "^5.0.0"
     sucrase "^3.20.0"
 
-"@expo/metro-config@~0.7.0":
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/@expo/metro-config/-/metro-config-0.7.1.tgz#eaae792da23554c1abbc401df868566fab29951b"
-  integrity sha512-vGWU62Zp5pRGw5IEHDNdqvsy62/hu/Na7bswePYVjoaItOjJY7+qilFeF0AAK+3V8qAM8fpltH3ByylKfWaA7A==
-  dependencies:
-    "@expo/config" "~8.0.0"
-    chalk "^4.1.0"
-    debug "^4.3.2"
-    find-yarn-workspace-root "~2.0.0"
-    getenv "^1.0.0"
-    resolve-from "^5.0.0"
-    sucrase "^3.20.0"
-
 "@expo/osascript@2.0.33", "@expo/osascript@^2.0.31":
   version "2.0.33"
   resolved "https://registry.yarnpkg.com/@expo/osascript/-/osascript-2.0.33.tgz#e9dcc8da54466c11939074aa71a006024ea884b1"
@@ -2499,23 +2364,6 @@
     split "^1.0.1"
     sudo-prompt "9.1.1"
 
-"@expo/package-manager@~1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@expo/package-manager/-/package-manager-1.0.1.tgz#d0d6b0937df5016b0155b1d87bbaba9839bbeb9f"
-  integrity sha512-ue6NIIsNafa2bK7zUl7Y61YNtkPsg7sJcTOyQo/87Yqf6Q+2bOrvdw1xjviaFrMsTZcpOPVf+ZIEYtE0lw0k6A==
-  dependencies:
-    "@expo/json-file" "^8.2.37"
-    "@expo/spawn-async" "^1.5.0"
-    ansi-regex "^5.0.0"
-    chalk "^4.0.0"
-    find-up "^5.0.0"
-    find-yarn-workspace-root "~2.0.0"
-    js-yaml "^3.13.1"
-    micromatch "^4.0.2"
-    npm-package-arg "^7.0.0"
-    split "^1.0.1"
-    sudo-prompt "9.1.1"
-
 "@expo/plist@0.0.18", "@expo/plist@^0.0.18":
   version "0.0.18"
   resolved "https://registry.yarnpkg.com/@expo/plist/-/plist-0.0.18.tgz#9abcde78df703a88f6d9fa1a557ee2f045d178b0"
@@ -2525,15 +2373,6 @@
     base64-js "^1.2.3"
     xmlbuilder "^14.0.0"
 
-"@expo/plist@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@expo/plist/-/plist-0.0.20.tgz#a6b3124438031c02b762bad5a47b70584d3c0072"
-  integrity sha512-UXQ4LXCfTZ580LDHGJ5q62jSTwJFFJ1GqBu8duQMThiHKWbMJ+gajJh6rsB6EJ3aLUr9wcauxneL5LVRFxwBEA==
-  dependencies:
-    "@xmldom/xmldom" "~0.7.7"
-    base64-js "^1.2.3"
-    xmlbuilder "^14.0.0"
-
 "@expo/prebuild-config@5.0.7":
   version "5.0.7"
   resolved "https://registry.yarnpkg.com/@expo/prebuild-config/-/prebuild-config-5.0.7.tgz#4658b66126c4d32c7b6302571e458a71811b07aa"
@@ -2550,22 +2389,6 @@
     semver "7.3.2"
     xml2js "0.4.23"
 
-"@expo/prebuild-config@6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/@expo/prebuild-config/-/prebuild-config-6.0.1.tgz#e3a5bbf5892859e71ac6a2408b1cc8ba6ca3f58f"
-  integrity sha512-WK3FDht1tdXZGCvtG5s7HSwzhsc7Tyu2DdqV9jVUsLtGD42oqUepk13mEWlU9LOTBgLsoEueKjoSK4EXOXFctw==
-  dependencies:
-    "@expo/config" "~8.0.0"
-    "@expo/config-plugins" "~6.0.0"
-    "@expo/config-types" "^48.0.0"
-    "@expo/image-utils" "0.3.22"
-    "@expo/json-file" "^8.2.37"
-    debug "^4.3.1"
-    fs-extra "^9.0.0"
-    resolve-from "^5.0.0"
-    semver "7.3.2"
-    xml2js "0.4.23"
-
 "@expo/rudder-sdk-node@1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@expo/rudder-sdk-node/-/rudder-sdk-node-1.1.1.tgz#6aa575f346833eb6290282118766d4919c808c6a"
@@ -2671,27 +2494,18 @@
     react-is "^17.0.2"
     styled-components "5.2.1"
 
-"@gluestack-style/animation-plugin@^0.1.11":
-  version "0.1.11"
-  resolved "https://registry.yarnpkg.com/@gluestack-style/animation-plugin/-/animation-plugin-0.1.11.tgz#2908c2fedc5b982ae56ce36933938010c2a6002a"
-  integrity sha512-Cgz224l2X52iZrsjICV8M/8yMo0EHuWefdrWuwP9iXp5Z1BGxpSr7ahcHK5hhltg9FNhjxYYfPTMmvtEC0KmOQ==
-  dependencies:
-    "@legendapp/motion" "^2.2.0"
-
-"@gluestack-style/animation-plugin@^0.1.12":
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/@gluestack-style/animation-plugin/-/animation-plugin-0.1.12.tgz#887b57097397817c31fef25c8c53af381c11633e"
-  integrity sha512-lkj8iY5JBnhroUkP5gWE1zEpocb5GAK/G9SxL8DdWYQrsWOFpXr/mF/K67Dbxiv/n4B9BVff7sNTAddju+4UAw==
-  dependencies:
-    "@legendapp/motion" "^2.2.0"
-
-"@gluestack-style/animation-plugin@^0.1.7", "@gluestack-style/animation-plugin@latest":
+"@gluestack-style/animation-plugin@^0.1.7":
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/@gluestack-style/animation-plugin/-/animation-plugin-0.1.7.tgz#c9feae42684a48f2b5ece932681837d4b3ce7104"
   integrity sha512-m7ujr80KHL/QP9Z47NGPT6+KhSjVQPjTBtpnHb+9SH5gj3JNavPtWYbwG58yph/Yk1yAtYoZk8rgg2G9r/wo7w==
   dependencies:
     "@legendapp/motion" "^2.2.0"
 
+"@gluestack-style/animation-resolver@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@gluestack-style/animation-resolver/-/animation-resolver-1.0.0.tgz#e95a5d8c9086510ede321c578f2109a165d44acf"
+  integrity sha512-lrrRwJNa4yLmPzf4KSWKahbE3RpPtkkn1pnQvQ882Kdi1TclYaT123Uy70tRrrRfGi0WsU0Ze8kmpWqyCxdnTA==
+
 "@gluestack-style/babel-plugin-styled-resolver@^0.1.15-alpha.0":
   version "0.1.15-alpha.0"
   resolved "https://registry.yarnpkg.com/@gluestack-style/babel-plugin-styled-resolver/-/babel-plugin-styled-resolver-0.1.15-alpha.0.tgz#776e0ba60cbdaeefcd966b6708dd0408d4a57213"
@@ -2705,21 +2519,10 @@
     "@babel/traverse" "^7.20.5"
     lodash.merge "^4.6.2"
 
-"@gluestack-style/react@^0.2.50":
-  version "0.2.50"
-  resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-0.2.50.tgz#13273ea738f93f5f12b56763f5020a02df7d2674"
-  integrity sha512-UzCPnmjFBI6gBgrmtpC+rwBvLm3zA1t8XmFZ5SY4R+VJXbaou2emWnhd2XWplCCpHMhaGTB2YUx3rDQTjTcfCQ==
-  dependencies:
-    inline-style-prefixer "^6.0.1"
-    normalize-css-color "^1.0.2"
-
-"@gluestack-style/react@^0.2.51":
-  version "0.2.51"
-  resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-0.2.51.tgz#0cfcca4f97f908ed3a352bd7e2336d436cc22415"
-  integrity sha512-21TLr+e7KneP8N1d1iMKG6npMdYb/oPN/t5KZ/2kns2mg9NVCrfVmVuuMYKo+Xcej95BFOHuGuomskzLwdK1HQ==
-  dependencies:
-    inline-style-prefixer "^6.0.1"
-    normalize-css-color "^1.0.2"
+"@gluestack-style/legend-motion-animation-driver@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@gluestack-style/legend-motion-animation-driver/-/legend-motion-animation-driver-1.0.1.tgz#4bb99513e8ba8ecae6d959c526c7dfa9e9decfd4"
+  integrity sha512-y8rJtjaU851JQpp7ERQOX9yIeufmqxBDLtV98sdnLXDtxai0PVSURWohWGRnYPEhhiEEQt7S6/1c0A25X0b/PA==
 
 "@gluestack-style/react@^0.2.9":
   version "0.2.43"
@@ -2729,10 +2532,18 @@
     inline-style-prefixer "^6.0.1"
     normalize-css-color "^1.0.2"
 
-"@gluestack-ui/actionsheet@^0.2.26":
-  version "0.2.26"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/actionsheet/-/actionsheet-0.2.26.tgz#23f3e96f6659c55f8c905834ef3cf936436a9a22"
-  integrity sha512-iIG/+WDezBY3wHHcSy4e9PDrIVaZFyeTGAzlfX60xmLyof1S4uaRVgo2dDOoVFVN2Lyxzp8k+jhiss5p8dTmlw==
+"@gluestack-style/react@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-1.0.0.tgz#26ae4716e26b9bcacdcab211830a02de3cb09366"
+  integrity sha512-80tc0JL9xpDXKOqlZ8QZwnaO4lm/Z28c6Qxc1BE8Mtu4TGN+yvP8AcQtTZeI0ov2ZlmYWpVI4UWZstMurN5X8w==
+  dependencies:
+    inline-style-prefixer "^6.0.1"
+    normalize-css-color "^1.0.2"
+
+"@gluestack-ui/actionsheet@^0.2.25":
+  version "0.2.25"
+  resolved "https://registry.yarnpkg.com/@gluestack-ui/actionsheet/-/actionsheet-0.2.25.tgz#ac90d00d3eee68c23172994df3f9333f3d7bff83"
+  integrity sha512-/PxmZZx/bMShyZczI5pKg2w6vk5jte1uNjvGS+JCIpDhJqSBXxBlE2Y3xVuiaWyx+GOOAymzVcKmHZ26y0Is8A==
   dependencies:
     "@gluestack-ui/hooks" "^0.1.2"
     "@gluestack-ui/overlay" "^0.1.7"
@@ -2755,19 +2566,6 @@
     "@react-native-aria/focus" "^0.2.8"
     "@react-native-aria/interactions" "^0.2.10"
 
-"@gluestack-ui/actionsheet@latest":
-  version "0.2.8"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/actionsheet/-/actionsheet-0.2.8.tgz#b739f76afef972a725ff008119767fda15335232"
-  integrity sha512-Q45vARjxpJaZN4IzhGGDP1TvMpz3wAR3tGNeQLZ01Nn9gjlhE8u3D6cHn4yVICI+eHSJzprZ46/R3lz8vz5BDA==
-  dependencies:
-    "@gluestack-ui/hooks" "^0.1.0"
-    "@gluestack-ui/overlay" "^0.1.5"
-    "@gluestack-ui/transitions" "^0.1.6"
-    "@gluestack-ui/utils" "^0.1.3"
-    "@react-native-aria/dialog" "0.1.1"
-    "@react-native-aria/focus" "^0.2.8"
-    "@react-native-aria/interactions" "^0.2.10"
-
 "@gluestack-ui/alert-dialog@^0.1.19":
   version "0.1.19"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/alert-dialog/-/alert-dialog-0.1.19.tgz#87d538019707c47b66a7b4afb50d0dea9a6c6cbb"
@@ -2792,18 +2590,6 @@
     "@react-native-aria/focus" "^0.2.8"
     "@react-native-aria/interactions" "^0.2.10"
 
-"@gluestack-ui/alert-dialog@latest":
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/alert-dialog/-/alert-dialog-0.1.9.tgz#2c741df46adde26fcfd8d1613905546ebeb249b4"
-  integrity sha512-DDXjl0UFA3kqAjvzblT5D4Kx2P3PnTSe6SiWtkw6wNHSPN3qaGOLPNOWSVNvq/O1T2P1d3IBe7zZjrGkNEyKcw==
-  dependencies:
-    "@gluestack-ui/hooks" "^0.1.0"
-    "@gluestack-ui/overlay" "^0.1.5"
-    "@gluestack-ui/utils" "^0.1.0"
-    "@react-native-aria/dialog" "^0.1.1"
-    "@react-native-aria/focus" "^0.2.8"
-    "@react-native-aria/interactions" "^0.2.10"
-
 "@gluestack-ui/alert@^0.1.4":
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/alert/-/alert-0.1.8.tgz#f9d6b6c7a2fcdc03d02edb02c11cc4c4a18fa894"
@@ -2814,11 +2600,6 @@
   resolved "https://registry.yarnpkg.com/@gluestack-ui/alert/-/alert-0.1.9.tgz#059f513f35f0df474581639c4c1f005dcfefd19c"
   integrity sha512-HoiGAeY40b5P8fdRVQ3wQ8LvAhX2s8/oWMprIEH5a3yEQMt4rTInEaR/bumhA80JQcVTBcG1zUXjKZ6J2+l5wg==
 
-"@gluestack-ui/alert@latest":
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/alert/-/alert-0.1.5.tgz#a5eabfb4946ba894d2f9548aa2ee08202d71fd13"
-  integrity sha512-gidatXpB2b+pjozgbIn1QrbZ6ZpciWcHDwKCPQTcqMMEjL10Rt9K2KGOqAQVWOllCa4yY5wo/CpKiN/+IfbOIA==
-
 "@gluestack-ui/avatar@^0.1.11":
   version "0.1.11"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/avatar/-/avatar-0.1.11.tgz#971d732c046849307fe9942b4aa2d9c9fa9ee2f5"
@@ -2833,23 +2614,7 @@
   dependencies:
     "@gluestack-ui/utils" "^0.1.5"
 
-"@gluestack-ui/avatar@latest":
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/avatar/-/avatar-0.1.6.tgz#a37f10954dc706dfaba3e5cf98b971bc9ad38c8d"
-  integrity sha512-XcBz25iYjpnd0RZtSeEsViP9L8Jlppcex89zqpoehBPEWnEuaB6iqydOdw6Bn94Kj3Ra5a35h7sJEd5/8HJZdg==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.3"
-
-"@gluestack-ui/button@^0.1.15":
-  version "0.1.26"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/button/-/button-0.1.26.tgz#1f66707e18f75524d47581298896bc0a3d9f41dd"
-  integrity sha512-TIZkqpTJwEn87QqmrimGKXaGZvbDhJxxRBDYq3UZlLG2j95RZ0bLwO1bLEIcE8KXJc6sGUWEvLj/4efGhijyXw==
-  dependencies:
-    "@gluestack-ui/utils" "0.1.9"
-    "@react-native-aria/focus" "^0.2.8"
-    "@react-native-aria/interactions" "^0.2.10"
-
-"@gluestack-ui/button@^0.1.29":
+"@gluestack-ui/button@^0.1.15", "@gluestack-ui/button@^0.1.29":
   version "0.1.29"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/button/-/button-0.1.29.tgz#cd3b0522f32fa332e15d6203be566713eb8d930b"
   integrity sha512-CUMZajrveDT36obhb385xQb1Cf50T301Y0ExNNcSffvbYb9TwPgWfawlkPrsk9JhHqWxQaK1McyVx+y4fYEHeg==
@@ -2884,29 +2649,16 @@
     "@react-native-aria/interactions" "^0.2.10"
     "@react-stately/checkbox" "^3.4.2"
 
-"@gluestack-ui/checkbox@latest":
-  version "0.1.13"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/checkbox/-/checkbox-0.1.13.tgz#5a0df9547bd337df5f0a9c3f051a63f6de04b733"
-  integrity sha512-j5dMcGNv2Tlf1TZyh+UrSo8bYDaJt6L+gu4hvVC6o4P0jw4UVcYdkSgjr0F5laML+hglqgBMoM6IpzSRG4I1zw==
-  dependencies:
-    "@gluestack-ui/form-control" "^0.1.7"
-    "@gluestack-ui/utils" "^0.1.3"
-    "@react-aria/visually-hidden" "^3.8.1"
-    "@react-native-aria/checkbox" "^0.2.3"
-    "@react-native-aria/focus" "^0.2.8"
-    "@react-native-aria/interactions" "^0.2.10"
-    "@react-stately/checkbox" "3.0.3"
+"@gluestack-ui/config@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@gluestack-ui/config/-/config-1.0.0.tgz#58cabadc737d2f65f1cca890cd5f9a1bb6e71fb4"
+  integrity sha512-3R3ZMBWQHSqY8w0AnHDj3kGB+FQofVdU921QQLGhmASODOH/79v3v3pBxGkT17TPuXbBmbPQEqGbbKqZSFn0rw==
 
 "@gluestack-ui/divider@^0.1.3", "@gluestack-ui/divider@^0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/divider/-/divider-0.1.5.tgz#3b68375e5620b2641b07465f599b2ec2259bae83"
   integrity sha512-5x6soIXugWyMhhufpcw54hNoGoZWrEEOb8Y/5caAGNV2YVsLACenztdkmedi5sFDfRidd407fIxjQ9zElChoCQ==
 
-"@gluestack-ui/divider@latest":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/divider/-/divider-0.1.3.tgz#1250a5a45d9596ee2cd04009ed8036c8b73b072a"
-  integrity sha512-rm3BNLiej/wWiOs6Gsw4OTBIL0fmMnDYuPPxSM/b/5FmOJBn/YHg2BpNfXh+HjevSzahqviGZAH8NeLN2pcr7g==
-
 "@gluestack-ui/fab@^0.1.13":
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/fab/-/fab-0.1.13.tgz#a963f76521abbbc99a6e3661019bd6a6fd0b20b5"
@@ -2926,17 +2678,7 @@
     "@react-native-aria/interactions" "^0.2.10"
     react-native-svg "13.4.0"
 
-"@gluestack-ui/fab@latest":
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/fab/-/fab-0.1.8.tgz#6985fd9049240f136c00ba47e94c6cb7d163fbea"
-  integrity sha512-r8no2zypw7Q/CUpQyKL1Al7nhfX1N3Wflma6T4fkXwFq+fCl/naJ5+8HyGEEHydoCH/kAU1imrnl9BN+VTSP7Q==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.3"
-    "@react-native-aria/focus" "^0.2.8"
-    "@react-native-aria/interactions" "^0.2.10"
-    react-native-svg "13.4.0"
-
-"@gluestack-ui/form-control@^0.1.10", "@gluestack-ui/form-control@^0.1.6", "@gluestack-ui/form-control@^0.1.7", "@gluestack-ui/form-control@^0.1.8", "@gluestack-ui/form-control@^0.1.9":
+"@gluestack-ui/form-control@^0.1.10", "@gluestack-ui/form-control@^0.1.6", "@gluestack-ui/form-control@^0.1.8", "@gluestack-ui/form-control@^0.1.9":
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/form-control/-/form-control-0.1.10.tgz#5792c57c0e4ce47a60ba94af47259169242af62f"
   integrity sha512-jx5Dm7jzRhpFBIEpaVC+fP4UWxoS9N5kmwOcqSk3UDhePTfurin6CvAP2+VtVl9QskLpjc2UM+cF7L37ada/eg==
@@ -2952,15 +2694,7 @@
     "@gluestack-ui/utils" "^0.1.5"
     "@react-native-aria/focus" "^0.2.7"
 
-"@gluestack-ui/form-control@latest":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/form-control/-/form-control-0.1.7.tgz#b1ea7be622ac961174bfe71ac0c5fe6f7b8a92a6"
-  integrity sha512-Xd0RSn6HfN13d9d7gwYFeybpgCGYvpaRI9/mADi0cf28UdltdInj17IyD5Jwna8SBIPklwQ0fHkGyCJQ0R1dPQ==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.3"
-    "@react-native-aria/focus" "^0.2.7"
-
-"@gluestack-ui/hooks@^0.1.0", "@gluestack-ui/hooks@^0.1.1", "@gluestack-ui/hooks@^0.1.2":
+"@gluestack-ui/hooks@^0.1.0", "@gluestack-ui/hooks@^0.1.2":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/hooks/-/hooks-0.1.3.tgz#5bd9138e27635975820132bb667f61b296cf239d"
   integrity sha512-FatyMCSfZuW44WcipRWz6osJBlpuP/Jh3sC2d/3DWBgKERIKEABPQNK0Okx8bPlAybswFzzfRWYC5CnBZT0V/A==
@@ -2982,13 +2716,6 @@
   dependencies:
     "@gluestack-ui/utils" "^0.1.6"
 
-"@gluestack-ui/hstack@latest":
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/hstack/-/hstack-0.1.6.tgz#d4f8bdddc79f2c45072bbc46d33777df770338b0"
-  integrity sha512-+n0Lf3FM/OnH7lbW+g+9Jf3ETuIY82O3k8kHfe2BotijdWc3fUkI+IYaNjveZG81FhkbBKipP9kUPCEnq1Pppg==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.3"
-
 "@gluestack-ui/icon@^0.1.14":
   version "0.1.14"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/icon/-/icon-0.1.14.tgz#e8dfa142f2afd723fc384cd84154f57a8e1546ff"
@@ -3008,16 +2735,6 @@
     "@react-native-aria/focus" "^0.2.7"
     react-native-svg "13.4.0"
 
-"@gluestack-ui/icon@latest":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/icon/-/icon-0.1.4.tgz#30d9ef977e804f30b2c089cdbbf9c3fcf6d9c13a"
-  integrity sha512-N2qCkdp2ow5JPtGSvnve7H2AysHGUQUl+GIc16kTCRJyKP7roOHCFBaJhikeiv+LBVNDX6T/wV5w4z2vQOaRtA==
-  dependencies:
-    "@gluestack-ui/provider" "^0.1.4"
-    "@gluestack-ui/utils" "^0.1.3"
-    "@react-native-aria/focus" "^0.2.7"
-    react-native-svg "13.4.0"
-
 "@gluestack-ui/image@^0.1.2":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/image/-/image-0.1.2.tgz#cb729ec6bb79ed5cf61348106510b9f3734db652"
@@ -3027,15 +2744,6 @@
     "@react-native-aria/focus" "^0.2.8"
     "@react-native-aria/interactions" "^0.2.10"
 
-"@gluestack-ui/image@latest":
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/image/-/image-0.1.0.tgz#9b0f3f7931032ffe5f44151da7f178c07c9ad609"
-  integrity sha512-5DgviRxrCW+emZgwMvhJtR4yN+XEetJhv11V9+Nxp0dEe9JzXwnDhJ9XRk6GO8/3pQJhJROsgywlrv9NooYhFg==
-  dependencies:
-    "@gluestack-ui/utils" "0.1.9"
-    "@react-native-aria/focus" "^0.2.8"
-    "@react-native-aria/interactions" "^0.2.10"
-
 "@gluestack-ui/input@^0.1.17":
   version "0.1.17"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/input/-/input-0.1.17.tgz#0d3565a84f9d2f0a737d5693283416ae15c0b7f8"
@@ -3057,17 +2765,6 @@
     "@react-native-aria/interactions" "^0.2.8"
     react-native-svg "13.4.0"
 
-"@gluestack-ui/input@latest":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/input/-/input-0.1.7.tgz#12a70cdd002895e7fe8fe2be78bc54b3d1effe38"
-  integrity sha512-OLldRqlY8z0zSSS4WlhsLqIvnsL5g+MFsCz9UPchOfP4axEWhL9KMNMZf0RNRPuxfK4vJqTi51WashZtOkduDg==
-  dependencies:
-    "@gluestack-ui/form-control" "^0.1.7"
-    "@gluestack-ui/utils" "^0.1.3"
-    "@react-native-aria/focus" "^0.2.7"
-    "@react-native-aria/interactions" "^0.2.8"
-    react-native-svg "13.4.0"
-
 "@gluestack-ui/linear-gradient@^0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/linear-gradient/-/linear-gradient-0.1.1.tgz#6b32ac0ea0816fc8040861daaebc332edcc1baaf"
@@ -3078,16 +2775,6 @@
     "@react-native-aria/interactions" "^0.2.10"
     expo-linear-gradient "12.3.0"
 
-"@gluestack-ui/linear-gradient@latest":
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/linear-gradient/-/linear-gradient-0.1.0.tgz#35cd4997fd3f69f8c592dfd3ce89fa335041bd93"
-  integrity sha512-U28C7lxiBCczBwhk9n0F73leZ+n00/Wa+fmQ7snxunvbqaCUaMXPzslsZYEK9EsU9VRoC+jfRtWjwA0EaWYTmA==
-  dependencies:
-    "@gluestack-ui/utils" "0.1.9"
-    "@react-native-aria/focus" "^0.2.8"
-    "@react-native-aria/interactions" "^0.2.10"
-    expo-linear-gradient "12.3.0"
-
 "@gluestack-ui/link@^0.1.11":
   version "0.1.11"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/link/-/link-0.1.11.tgz#776ec642e3ab8cb91c98b1d0a5d0730b2312fa47"
@@ -3106,15 +2793,6 @@
     "@react-native-aria/focus" "^0.2.8"
     "@react-native-aria/interactions" "^0.2.10"
 
-"@gluestack-ui/link@latest":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/link/-/link-0.1.7.tgz#448cf6e03cc967806b83a30776c5266301e8e679"
-  integrity sha512-zVNCJb0s4pAfJLQgLBFCkkVJTFHSXZ0K/MmUWRZqp6hF/wrOLm358i7F/DVUlvFJjoFbiwqpiCaqu+9jUthSIg==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.3"
-    "@react-native-aria/focus" "^0.2.8"
-    "@react-native-aria/interactions" "^0.2.10"
-
 "@gluestack-ui/menu@^0.2.21":
   version "0.2.21"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/menu/-/menu-0.2.21.tgz#fe4a00bfe73473964a5a59499f7ed2a7ed45bb1f"
@@ -3145,21 +2823,6 @@
     "@react-stately/utils" "^3.6.0"
     react-stately "^3.21.0"
 
-"@gluestack-ui/menu@latest":
-  version "0.2.9"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/menu/-/menu-0.2.9.tgz#f7851c384a763650dba546316661718b52ee487e"
-  integrity sha512-ABBq1StTrMcym8GVyPxeHNnKozZBj72qQAHm8kWAv2UxjYWn7h82gmHwqG0Bg7hjNuOYcVw+qd8yA4yMknOlbA==
-  dependencies:
-    "@gluestack-ui/hooks" "^0.1.0"
-    "@gluestack-ui/overlay" "^0.1.6"
-    "@gluestack-ui/utils" "^0.1.3"
-    "@react-native-aria/focus" "^0.2.8"
-    "@react-native-aria/interactions" "^0.2.10"
-    "@react-native-aria/menu" "^0.2.7"
-    "@react-native-aria/overlays" "0.3.7"
-    "@react-stately/utils" "^3.6.0"
-    react-stately "^3.21.0"
-
 "@gluestack-ui/modal@^0.1.12":
   version "0.1.18"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/modal/-/modal-0.1.18.tgz#3df7210e7133bd405fc0d3f7791a9a4ce3f951b5"
@@ -3186,20 +2849,7 @@
     "@react-native-aria/interactions" "^0.2.10"
     "@react-native-aria/overlays" "0.3.7"
 
-"@gluestack-ui/modal@latest":
-  version "0.1.14"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/modal/-/modal-0.1.14.tgz#9febcddb507804704b2c83785f5a1989a84a3a02"
-  integrity sha512-s599I4NOUULL/hs5cDo7wnKH82fTc6YU/dn18aMFgqPPwO8VmNpdtF5zfVmFPTINrFUGK9K3w0VmStnTezbKcQ==
-  dependencies:
-    "@gluestack-ui/hooks" "^0.1.0"
-    "@gluestack-ui/overlay" "^0.1.6"
-    "@gluestack-ui/utils" "^0.1.3"
-    "@react-native-aria/dialog" "^0.1.1"
-    "@react-native-aria/focus" "^0.2.8"
-    "@react-native-aria/interactions" "^0.2.10"
-    "@react-native-aria/overlays" "0.3.7"
-
-"@gluestack-ui/overlay@^0.1.3", "@gluestack-ui/overlay@^0.1.5", "@gluestack-ui/overlay@^0.1.6", "@gluestack-ui/overlay@^0.1.7", "@gluestack-ui/overlay@^0.1.8":
+"@gluestack-ui/overlay@^0.1.3", "@gluestack-ui/overlay@^0.1.7", "@gluestack-ui/overlay@^0.1.8":
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/overlay/-/overlay-0.1.8.tgz#8ecd7cbedde70ec4befda242b8f10e440eee3441"
   integrity sha512-mqPiXrxbhL3N6N/TCTSbfJfNuLRqpPzPS6IWDX77+b90CfKM5zhj6y46Wr65t403H0t6iLwbyKU7ly2AfRMWHw==
@@ -3243,19 +2893,6 @@
     "@react-native-aria/interactions" "^0.2.10"
     "@react-native-aria/overlays" "0.3.7"
 
-"@gluestack-ui/popover@latest":
-  version "0.1.11"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/popover/-/popover-0.1.11.tgz#7798892b31f0c443cd17a59ad250f3e5f52d5471"
-  integrity sha512-RSL9UFolSEwixoCHf0KNvE2mZwPo1YKeTqQqYlo5Ojdp0HIxTncSEkHCmg2jjFWXP6GRxu7i5djmHFzCUsoHqw==
-  dependencies:
-    "@gluestack-ui/hooks" "^0.1.0"
-    "@gluestack-ui/overlay" "^0.1.6"
-    "@gluestack-ui/utils" "^0.1.3"
-    "@react-native-aria/dialog" "^0.1.1"
-    "@react-native-aria/focus" "^0.2.8"
-    "@react-native-aria/interactions" "^0.2.10"
-    "@react-native-aria/overlays" "0.3.7"
-
 "@gluestack-ui/pressable@^0.1.4", "@gluestack-ui/pressable@^0.1.9":
   version "0.1.9"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/pressable/-/pressable-0.1.9.tgz#f9333e51202543bcfde214bba5607ca9b233a26f"
@@ -3265,15 +2902,6 @@
     "@react-native-aria/focus" "^0.2.8"
     "@react-native-aria/interactions" "^0.2.10"
 
-"@gluestack-ui/pressable@latest":
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/pressable/-/pressable-0.1.5.tgz#a22bb93f85b30c001841de7f8affe6aab99bf514"
-  integrity sha512-9zRhzPU1nRirdomUxIcrI3ZD/zFnS4rRsNZXAEhqNReZzwd5DcS3f4L2CgTpc+vAYm963ooEeLhAT8eO9NYnFA==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.3"
-    "@react-native-aria/focus" "^0.2.8"
-    "@react-native-aria/interactions" "^0.2.10"
-
 "@gluestack-ui/progress@^0.1.3":
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/progress/-/progress-0.1.7.tgz#ef8ba9b436d055346ff773051a350a6a88ced912"
@@ -3288,13 +2916,6 @@
   dependencies:
     "@gluestack-ui/utils" "^0.1.5"
 
-"@gluestack-ui/progress@latest":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/progress/-/progress-0.1.4.tgz#5068fdbb0986addc2641e50a1b32a87338f4582c"
-  integrity sha512-Y0BGG+I1IOuYOybQoGAM2herb8evg9QDG2NkiQ/7ERQRO4i0Um5SFlNsgNgjdS5VLVKxi/zHe1R6NOruwpQCqw==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.3"
-
 "@gluestack-ui/provider@^0.1.10":
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/provider/-/provider-0.1.10.tgz#552c4da52f99cb300ef10cde5f830e27a52189b4"
@@ -3304,23 +2925,11 @@
     tsconfig "7"
     typescript "^4.9.4"
 
-"@gluestack-ui/provider@^0.1.3", "@gluestack-ui/provider@^0.1.4", "@gluestack-ui/provider@^0.1.6":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/provider/-/provider-0.1.7.tgz#d71783c70cbfbac9a5dd0b1006e8dae66818b6a3"
-  integrity sha512-IKIHzlNrXaw722OzbhfFUbhEG+xHIO3htd3+ujPx0lvw2zxaCKNANhXqGYk8NdeE/Tq87k7cxrqDA/VKmIv1dw==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.5"
-    "@react-native-aria/interactions" "^0.2.10"
-    tsconfig "7"
-    typescript "^4.9.4"
-
-"@gluestack-ui/provider@latest":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/provider/-/provider-0.1.4.tgz#bf8357068542dab1a50d39aa601d03c2d1d92283"
-  integrity sha512-cDD/IDVXuXVEZDQRJkdYIxgLf3lADKM2vb1DZyameZ1GCDfQBOCmMThIQ+S/txDwJEAnDHFXPVpBmaYktl8sSA==
+"@gluestack-ui/provider@^0.1.3", "@gluestack-ui/provider@^0.1.6":
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/@gluestack-ui/provider/-/provider-0.1.9.tgz#9956de72f462633671c57e3d16e575b6a8d19e0a"
+  integrity sha512-23H9YxiIo3Jt9vyygjHm985V2ByVjozA8M4Tw3rrXFu0wSHnlV86P4ZZVnM3zzDTA2AgBXsEkC9AIkHiyrKNMQ==
   dependencies:
-    "@gluestack-ui/overlay" "^0.1.5"
-    "@gluestack-ui/toast" "^0.1.8"
     "@react-native-aria/interactions" "^0.2.10"
     tsconfig "7"
     typescript "^4.9.4"
@@ -3351,18 +2960,6 @@
     "@react-native-aria/radio" "^0.2.5"
     "@react-stately/radio" "^3.8.1"
 
-"@gluestack-ui/radio@latest":
-  version "0.1.14"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/radio/-/radio-0.1.14.tgz#5492c7e0e31dc996b5216d9009b4c7e3bcc3f415"
-  integrity sha512-liQbr4bILxsgUmUIxBhEah39f8pQnL+4y8VJyd+HXa3EyOV1g18+H1wji5jXZ8xDZSAyhDuiAeg2zXPB3Ttckg==
-  dependencies:
-    "@gluestack-ui/form-control" "^0.1.7"
-    "@gluestack-ui/utils" "^0.1.3"
-    "@react-aria/visually-hidden" "^3.7.0"
-    "@react-native-aria/focus" "^0.2.8"
-    "@react-native-aria/interactions" "^0.2.10"
-    "@react-native-aria/radio" "^0.2.5"
-
 "@gluestack-ui/react-native-aria@^0.1.2", "@gluestack-ui/react-native-aria@^0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/react-native-aria/-/react-native-aria-0.1.4.tgz#2456489417931ce5c53052abcb5c0f90e68312f3"
@@ -3391,16 +2988,6 @@
     "@gluestack-ui/utils" "^0.1.5"
     "@react-native-aria/focus" "^0.2.7"
 
-"@gluestack-ui/select@latest":
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/select/-/select-0.1.9.tgz#41566d8f4a1703904b6a4f87aeeec68a7bcc7c77"
-  integrity sha512-4fNIbrTS6OwjqzwwGGuzSNKxnwuOP3rhrHhvMSsdM9dbj71ZW/5gOyrLbX9plJCk0FZFfA9I0BBbBs9HGKLAEA==
-  dependencies:
-    "@gluestack-ui/form-control" "^0.1.7"
-    "@gluestack-ui/hooks" "^0.1.0"
-    "@gluestack-ui/utils" "^0.1.3"
-    "@react-native-aria/focus" "^0.2.7"
-
 "@gluestack-ui/slider@^0.1.13":
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/slider/-/slider-0.1.13.tgz#c56c1791ee6d014e284d423f06fed873c8ba6420"
@@ -3427,19 +3014,6 @@
     "@react-native-aria/slider" "^0.2.5-alpha.2"
     "@react-stately/slider" "^3.2.4"
 
-"@gluestack-ui/slider@latest":
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/slider/-/slider-0.1.5.tgz#f7fd248d4a5c8bbb58fd8903be61e00518d7e063"
-  integrity sha512-frmTVOx9fiUjo4DQPgWxFJcwhWvVS6ygWQz2SJict0Lur57HlXLlW2Q5vLhMaZa3LnPObm85Dw7z2jy5cK8HMA==
-  dependencies:
-    "@gluestack-ui/form-control" "^0.1.7"
-    "@gluestack-ui/hooks" "^0.1.1"
-    "@gluestack-ui/utils" "^0.1.4"
-    "@react-aria/visually-hidden" "^3.8.1"
-    "@react-native-aria/interactions" "^0.2.8"
-    "@react-native-aria/slider" "^0.2.5-alpha.2"
-    "@react-stately/slider" "^3.2.4"
-
 "@gluestack-ui/spinner@^0.1.10":
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/spinner/-/spinner-0.1.10.tgz#9da7c9d4c85a493585adde769f56500ce16f5f96"
@@ -3450,11 +3024,6 @@
   resolved "https://registry.yarnpkg.com/@gluestack-ui/spinner/-/spinner-0.1.8.tgz#4f5f6ee9c3f0a6dea8cca83a1415488f8e42bc46"
   integrity sha512-wwyMLyxi20iZXHKKIQUQSXP1Ng5ds8eeFj47GvCIwjhGqtFVuQc7aM8IZbtQ0pkQRmJcpjzIPjRo6QIABct0ZA==
 
-"@gluestack-ui/spinner@latest":
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/spinner/-/spinner-0.1.6.tgz#535cedb5eaf329ad0b37a9dae7e12920490287ec"
-  integrity sha512-wupuH6ET7UJVFOmtxUIDThfTKZhn+Hk1kWvxaoKPxc0D+TnrqskMYT6ClMq61/Vmr0+4NtEYRI9SMvGLJV+5JQ==
-
 "@gluestack-ui/stack@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/stack/-/stack-0.1.1.tgz#9abded87a19847ce4ec901094384825fb0b4de09"
@@ -3486,17 +3055,6 @@
     "@react-native-aria/interactions" "^0.2.8"
     "@react-stately/toggle" "^3.4.4"
 
-"@gluestack-ui/switch@latest":
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/switch/-/switch-0.1.10.tgz#ddc97996234e757ee61055f23cddc7256ef00a04"
-  integrity sha512-uY+C1rL581X4rfXAEkNDmPN1boMqWpV2qYCjzWsSwQv32qImtgdM5IieT/601YU1P4tLE3Vkbuk25N96SpeZJg==
-  dependencies:
-    "@gluestack-ui/form-control" "^0.1.7"
-    "@gluestack-ui/utils" "^0.1.3"
-    "@react-native-aria/focus" "^0.2.7"
-    "@react-native-aria/interactions" "^0.2.8"
-    "@react-stately/toggle" "^3.4.4"
-
 "@gluestack-ui/tabs@^0.1.12":
   version "0.1.12"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/tabs/-/tabs-0.1.12.tgz#c9adf163442a7081e3595b014e8bb08d8a427362"
@@ -3515,15 +3073,6 @@
     "@react-native-aria/focus" "^0.2.8"
     "@react-native-aria/interactions" "^0.2.10"
 
-"@gluestack-ui/tabs@latest":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/tabs/-/tabs-0.1.7.tgz#a6275f1555d373f6e14dbc81ea8b1ede513f7026"
-  integrity sha512-Mj8PxSgH5h2GNb5Xy6fVL9D+lNBKJ0wqdzG50eXhs21fyPl9ayJyd5bRTPhYLWDkV4QLc6Y+R6sYK4w1N2RNwg==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.3"
-    "@react-native-aria/focus" "^0.2.8"
-    "@react-native-aria/interactions" "^0.2.10"
-
 "@gluestack-ui/textarea@^0.1.14":
   version "0.1.14"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/textarea/-/textarea-0.1.14.tgz#28ed44f145be616f49099068b248814debcdd299"
@@ -3543,16 +3092,6 @@
     "@react-native-aria/focus" "^0.2.7"
     react-native-svg "13.4.0"
 
-"@gluestack-ui/textarea@latest":
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/textarea/-/textarea-0.1.9.tgz#ec048313b39f8dab8977abbb368e83f94bbe620d"
-  integrity sha512-GOyAtQQgwEGauqVc7bqWsyzPYxOtwDWFtvP6ZFqe0ADbMW/kjC0Zw7+ifqYxEtA0KiPbmbGUmL2nC/hhfHOTNA==
-  dependencies:
-    "@gluestack-ui/form-control" "^0.1.7"
-    "@gluestack-ui/utils" "^0.1.3"
-    "@react-native-aria/focus" "^0.2.7"
-    react-native-svg "13.4.0"
-
 "@gluestack-ui/toast@^0.1.16":
   version "0.1.16"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/toast/-/toast-0.1.16.tgz#8e78a7e928b4a43237dd89324c427aaf9f7415e9"
@@ -3564,7 +3103,7 @@
     "@gluestack-ui/utils" "^0.1.5"
     "@react-native-aria/focus" "^0.2.7"
 
-"@gluestack-ui/toast@^0.1.7", "@gluestack-ui/toast@^0.1.8":
+"@gluestack-ui/toast@^0.1.7":
   version "0.1.14"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/toast/-/toast-0.1.14.tgz#e13501f4764017cb1036d0c4f394010982bb19d3"
   integrity sha512-rKEjrNPUeDwi6nND+yQ5A1XaIRHfghmi+b6lAhOJgJJC2eneAhzcj0rzK4S5IftayYh/8XPHJYK7RCGqzNuw/Q==
@@ -3575,17 +3114,6 @@
     "@gluestack-ui/utils" "^0.1.5"
     "@react-native-aria/focus" "^0.2.7"
 
-"@gluestack-ui/toast@latest":
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/toast/-/toast-0.1.9.tgz#fc7304d09e413e7a342e33ae806eaa5b43bd9d18"
-  integrity sha512-G0QZh5pC3XYzY7r9+p7rEcesZsfHNDxWi5uYdX7LKyS2eczFKPClmuwUoAg6jzKfv5FoDzliea7hPYxPglCOPw==
-  dependencies:
-    "@gluestack-ui/hooks" "^0.1.0"
-    "@gluestack-ui/overlay" "^0.1.5"
-    "@gluestack-ui/transitions" "^0.1.6"
-    "@gluestack-ui/utils" "^0.1.3"
-    "@react-native-aria/focus" "^0.2.7"
-
 "@gluestack-ui/tooltip@^0.1.20":
   version "0.1.20"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/tooltip/-/tooltip-0.1.20.tgz#0590b503f04502cfd2026aadfd921327b647699f"
@@ -3610,18 +3138,6 @@
     "@react-native-aria/interactions" "^0.2.10"
     "@react-native-aria/overlays" "0.3.7"
 
-"@gluestack-ui/tooltip@latest":
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/tooltip/-/tooltip-0.1.9.tgz#6de1a665ef3688192518d5fa346353bd68e7619e"
-  integrity sha512-HFndnEehwUpWAkK2+rU8G0oFrA/0UKbGb3RKVlsFLzLwnRYIZDMljO9DueVZQEdwDX0qbIzokHqMHVMPu/IsWg==
-  dependencies:
-    "@gluestack-ui/hooks" "^0.1.1"
-    "@gluestack-ui/overlay" "^0.1.6"
-    "@gluestack-ui/utils" "^0.1.4"
-    "@react-native-aria/focus" "^0.2.7"
-    "@react-native-aria/interactions" "^0.2.10"
-    "@react-native-aria/overlays" "0.3.7"
-
 "@gluestack-ui/transitions@^0.1.6", "@gluestack-ui/transitions@^0.1.8":
   version "0.1.9"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/transitions/-/transitions-0.1.9.tgz#9f8334017f006237539f28d3ee50c802fe3c0a03"
@@ -3640,7 +3156,7 @@
   dependencies:
     "@react-native-aria/focus" "^0.2.7"
 
-"@gluestack-ui/utils@^0.1.0", "@gluestack-ui/utils@^0.1.3", "@gluestack-ui/utils@^0.1.4", "@gluestack-ui/utils@^0.1.5", "@gluestack-ui/utils@^0.1.6":
+"@gluestack-ui/utils@^0.1.3", "@gluestack-ui/utils@^0.1.5", "@gluestack-ui/utils@^0.1.6":
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/utils/-/utils-0.1.8.tgz#f6567ca81d73f440e5ced5d6ed9648048fbd1f5c"
   integrity sha512-BGQiZLYZZX6UR1taR2KRM66UL8JTKhU/XkYub102n4jgPKZVcYa3U1k8uFMCnbmjH3E3qT0SvFOiYWSSRTB+sg==
@@ -3670,13 +3186,6 @@
   dependencies:
     "@gluestack-ui/utils" "^0.1.5"
 
-"@gluestack-ui/vstack@latest":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/vstack/-/vstack-0.1.7.tgz#f5dfcdd0c1f4d4d0cccb78e62764b56bd63c6592"
-  integrity sha512-r1Vlh0Wa/+wh64LYnd3yk28ux4bIzX0QXwg4WBrBCmOlKk+Xq7t7EXDlKflFL/+EpuJPuI3L7XldEtTbv1QNlA==
-  dependencies:
-    "@gluestack-ui/utils" "^0.1.3"
-
 "@gluestack/design-system@^0.4.70":
   version "0.4.70"
   resolved "https://registry.yarnpkg.com/@gluestack/design-system/-/design-system-0.4.70.tgz#149947c8582d82e1753ef1ff074e7becfbfa8fc0"
@@ -3728,17 +3237,6 @@
     react-live "^3.1.1"
     react-native-svg "13.4.0"
 
-"@gluestack/ui-next-adapter@latest":
-  version "2.1.3-alpha.4"
-  resolved "https://registry.yarnpkg.com/@gluestack/ui-next-adapter/-/ui-next-adapter-2.1.3-alpha.4.tgz#15e90cfd3686e39b2eab784babd7d95fd2b23105"
-  integrity sha512-Ymt68NBMExiY1HBja/mAuf50qHLhcnJrn4qfHyGyGx1r+zO5NspGM3/R4+fqKsur2jbY1zjMmVqSy6604t35iA==
-  dependencies:
-    find-yarn-workspace-root "^2.0.0"
-    fs-extra "^11.1.0"
-    next "^13.1.6"
-    next-compose-plugins "^2.2.1"
-    next-transpile-modules "^10.0.0"
-
 "@graphql-typed-document-node/core@^3.1.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
@@ -3756,7 +3254,7 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@humanwhocodes/config-array@^0.11.10", "@humanwhocodes/config-array@^0.11.8":
+"@humanwhocodes/config-array@^0.11.10":
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"
   integrity sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==
@@ -3871,13 +3369,6 @@
     slash "^3.0.0"
     strip-ansi "^6.0.0"
 
-"@jest/create-cache-key-function@^27.0.1":
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/@jest/create-cache-key-function/-/create-cache-key-function-27.5.1.tgz#7448fae15602ea95c828f5eceed35c202a820b31"
-  integrity sha512-dmH1yW+makpTSURTy8VzdUwFnfQh1G8R+DxO2Ho2FFmBbKFEVm+3jWdvFhE2VqB/LATCTokkP0dotjyQyw5/AQ==
-  dependencies:
-    "@jest/types" "^27.5.1"
-
 "@jest/create-cache-key-function@^29.2.1":
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/@jest/create-cache-key-function/-/create-cache-key-function-29.5.0.tgz#24e019d03e634be4affe8bcee787d75a36ae57a2"
@@ -3969,6 +3460,13 @@
   dependencies:
     "@sinclair/typebox" "^0.25.16"
 
+"@jest/schemas@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.6.3.tgz#430b5ce8a4e0044a7e3819663305a7b3091c8e03"
+  integrity sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==
+  dependencies:
+    "@sinclair/typebox" "^0.27.8"
+
 "@jest/source-map@^29.4.3":
   version "29.4.3"
   resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-29.4.3.tgz#ff8d05cbfff875d4a791ab679b4333df47951d20"
@@ -4074,6 +3572,18 @@
     "@types/yargs" "^17.0.8"
     chalk "^4.0.0"
 
+"@jest/types@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.6.3.tgz#1131f8cf634e7e84c5e77bab12f052af585fba59"
+  integrity sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==
+  dependencies:
+    "@jest/schemas" "^29.6.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
 "@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
@@ -4209,112 +3719,55 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
-"@next/env@13.3.0":
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.3.0.tgz#cc2e49f03060a4684ce7ec7fd617a21bc5b9edba"
-  integrity sha512-AjppRV4uG3No7L1plinoTQETH+j2F10TEnrMfzbTUYwze5sBUPveeeBAPZPm8OkJZ1epq9OyYKhZrvbD6/9HCQ==
-
-"@next/env@13.4.7":
-  version "13.4.7"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.7.tgz#ca12d341edb128ca70384635bd2794125ffb1c01"
-  integrity sha512-ZlbiFulnwiFsW9UV1ku1OvX/oyIPLtMk9p/nnvDSwI0s7vSoZdRtxXNsaO+ZXrLv/pMbXVGq4lL8TbY9iuGmVw==
-
-"@next/eslint-plugin-next@13.3.0":
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.3.0.tgz#3a4742b0817575cc0dd4d152cb10363584c215ac"
-  integrity sha512-wuGN5qSEjSgcq9fVkH0Y/qIPFjnZtW3ZPwfjJOn7l/rrf6y8J24h/lo61kwqunTyzZJm/ETGfGVU9PUs8cnzEA==
-  dependencies:
-    glob "7.1.7"
-
-"@next/swc-darwin-arm64@13.3.0":
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.3.0.tgz#38f18e0639cd4c7edc6a38d4b83fe00f38eea4f2"
-  integrity sha512-DmIQCNq6JtccLPPBzf0dgh2vzMWt5wjxbP71pCi5EWpWYE3MsP6FcRXi4MlAmFNDQOfcFXR2r7kBeG1LpZUh1w==
-
-"@next/swc-darwin-arm64@13.4.7":
-  version "13.4.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.7.tgz#5e36c26dda5b0bc0ea15d8555d0abd71a1ef4b5d"
-  integrity sha512-VZTxPv1b59KGiv/pZHTO5Gbsdeoxcj2rU2cqJu03btMhHpn3vwzEK0gUSVC/XW96aeGO67X+cMahhwHzef24/w==
-
-"@next/swc-darwin-x64@13.3.0":
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.3.0.tgz#b670ed1fd1d231aa21279173ec52e3ad56dc6aeb"
-  integrity sha512-oQoqFa88OGgwnYlnAGHVct618FRI/749se0N3S8t9Bzdv5CRbscnO0RcX901+YnNK4Q6yeiizfgO3b7kogtsZg==
-
-"@next/swc-darwin-x64@13.4.7":
-  version "13.4.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.7.tgz#4c14ec14b200373cd602589086cb1253a28cd803"
-  integrity sha512-gO2bw+2Ymmga+QYujjvDz9955xvYGrWofmxTq7m70b9pDPvl7aDFABJOZ2a8SRCuSNB5mXU8eTOmVVwyp/nAew==
-
-"@next/swc-linux-arm64-gnu@13.3.0":
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.3.0.tgz#b114935f6b4c94c123f6cac55a4823d483209ba5"
-  integrity sha512-Wzz2p/WqAJUqTVoLo6H18WMeAXo3i+9DkPDae4oQG8LMloJ3if4NEZTnOnTUlro6cq+S/W4pTGa97nWTrOjbGw==
-
-"@next/swc-linux-arm64-gnu@13.4.7":
-  version "13.4.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.7.tgz#e7819167ec876ddac5a959e4c7bce4d001f0e924"
-  integrity sha512-6cqp3vf1eHxjIDhEOc7Mh/s8z1cwc/l5B6ZNkOofmZVyu1zsbEM5Hmx64s12Rd9AYgGoiCz4OJ4M/oRnkE16/Q==
-
-"@next/swc-linux-arm64-musl@13.3.0":
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.3.0.tgz#67a57309f8761c7d00d629d6785d56ed0567a0d2"
-  integrity sha512-xPVrIQOQo9WXJYgmoTlMnAD/HlR/1e1ZIWGbwIzEirXBVBqMARUulBEIKdC19zuvoJ477qZJgBDCKtKEykCpyQ==
-
-"@next/swc-linux-arm64-musl@13.4.7":
-  version "13.4.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.7.tgz#0cac0f01d4e308b439e6c33182bed77835fe383b"
-  integrity sha512-T1kD2FWOEy5WPidOn1si0rYmWORNch4a/NR52Ghyp4q7KyxOCuiOfZzyhVC5tsLIBDH3+cNdB5DkD9afpNDaOw==
-
-"@next/swc-linux-x64-gnu@13.3.0":
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.3.0.tgz#11bd2bea7c00b40be111c0dd16e71171f3792086"
-  integrity sha512-jOFlpGuPD7W2tuXVJP4wt9a3cpNxWAPcloq5EfMJRiXsBBOjLVFZA7boXYxEBzSVgUiVVr1V9T0HFM7pULJ1qA==
-
-"@next/swc-linux-x64-gnu@13.4.7":
-  version "13.4.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.7.tgz#feb61e16a68c67f3ef230f30d9562a3783c7bd59"
-  integrity sha512-zaEC+iEiAHNdhl6fuwl0H0shnTzQoAoJiDYBUze8QTntE/GNPfTYpYboxF5LRYIjBwETUatvE0T64W6SKDipvg==
-
-"@next/swc-linux-x64-musl@13.3.0":
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.3.0.tgz#d57e99f85890799b78719c3ea32a4624de8d701b"
-  integrity sha512-2OwKlzaBgmuet9XYHc3KwsEilzb04F540rlRXkAcjMHL7eCxB7uZIGtsVvKOnQLvC/elrUegwSw1+5f7WmfyOw==
-
-"@next/swc-linux-x64-musl@13.4.7":
-  version "13.4.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.7.tgz#02179ecfa6d24a2956c2b54f7d27a050568bbf24"
-  integrity sha512-X6r12F8d8SKAtYJqLZBBMIwEqcTRvUdVm+xIq+l6pJqlgT2tNsLLf2i5Cl88xSsIytBICGsCNNHd+siD2fbWBA==
-
-"@next/swc-win32-arm64-msvc@13.3.0":
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.3.0.tgz#0c209aa35d1c88b01e78259a89cd68f4139b5093"
-  integrity sha512-OeHiA6YEvndxT46g+rzFK/MQTfftKxJmzslERMu9LDdC6Kez0bdrgEYed5eXFK2Z1viKZJCGRlhd06rBusyztA==
-
-"@next/swc-win32-arm64-msvc@13.4.7":
-  version "13.4.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.7.tgz#274b7f00a2ec5934af73db15da8459e8647bfaed"
-  integrity sha512-NPnmnV+vEIxnu6SUvjnuaWRglZzw4ox5n/MQTxeUhb5iwVWFedolPFebMNwgrWu4AELwvTdGtWjqof53AiWHcw==
-
-"@next/swc-win32-ia32-msvc@13.3.0":
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.3.0.tgz#52ae74da1dd6d840c3743923367d27ed013803dd"
-  integrity sha512-4aB7K9mcVK1lYEzpOpqWrXHEZympU3oK65fnNcY1Qc4HLJFLJj8AViuqQd4jjjPNuV4sl8jAwTz3gN5VNGWB7w==
-
-"@next/swc-win32-ia32-msvc@13.4.7":
-  version "13.4.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.7.tgz#4a95c106a6db2eee3a4c1352b77995e298d7446a"
-  integrity sha512-6Hxijm6/a8XqLQpOOf/XuwWRhcuc/g4rBB2oxjgCMuV9Xlr2bLs5+lXyh8w9YbAUMYR3iC9mgOlXbHa79elmXw==
-
-"@next/swc-win32-x64-msvc@13.3.0":
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.3.0.tgz#db7b55fee834dc8c2c484c696469e65bae2ee770"
-  integrity sha512-Reer6rkLLcoOvB0dd66+Y7WrWVFH7sEEkF/4bJCIfsSKnTStTYaHtwIJAwbqnt9I392Tqvku0KkoqZOryWV9LQ==
-
-"@next/swc-win32-x64-msvc@13.4.7":
-  version "13.4.7"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.7.tgz#5137780f58d7f0230adc293a0429821bfa7d8c21"
-  integrity sha512-sW9Yt36Db1nXJL+mTr2Wo0y+VkPWeYhygvcHj1FF0srVtV+VoDjxleKtny21QHaG05zdeZnw2fCtf2+dEqgwqA==
+"@next/env@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.5.3.tgz#402da9a0af87f93d853519f0c2a602b1ab637c2c"
+  integrity sha512-X4te86vsbjsB7iO4usY9jLPtZ827Mbx+WcwNBGUOIuswuTAKQtzsuoxc/6KLxCMvogKG795MhrR1LDhYgDvasg==
+
+"@next/swc-darwin-arm64@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.3.tgz#f72eac8c7b71d33e0768bd3c8baf68b00fea0160"
+  integrity sha512-6hiYNJxJmyYvvKGrVThzo4nTcqvqUTA/JvKim7Auaj33NexDqSNwN5YrrQu+QhZJCIpv2tULSHt+lf+rUflLSw==
+
+"@next/swc-darwin-x64@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.3.tgz#96eda3a1247a713579eb241d76d3f503291c8938"
+  integrity sha512-UpBKxu2ob9scbpJyEq/xPgpdrgBgN3aLYlxyGqlYX5/KnwpJpFuIHU2lx8upQQ7L+MEmz+fA1XSgesoK92ppwQ==
+
+"@next/swc-linux-arm64-gnu@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.3.tgz#132e155a029310fffcdfd3e3c4255f7ce9fd2714"
+  integrity sha512-5AzM7Yx1Ky+oLY6pHs7tjONTF22JirDPd5Jw/3/NazJ73uGB05NqhGhB4SbeCchg7SlVYVBeRMrMSZwJwq/xoA==
+
+"@next/swc-linux-arm64-musl@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.3.tgz#981d7d8fdcf040bd0c89588ef4139c28805f5cf1"
+  integrity sha512-A/C1shbyUhj7wRtokmn73eBksjTM7fFQoY2v/0rTM5wehpkjQRLOXI8WJsag2uLhnZ4ii5OzR1rFPwoD9cvOgA==
+
+"@next/swc-linux-x64-gnu@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.3.tgz#b8263663acda7b84bc2c4ffa39ca4b0172a78060"
+  integrity sha512-FubPuw/Boz8tKkk+5eOuDHOpk36F80rbgxlx4+xty/U71e3wZZxVYHfZXmf0IRToBn1Crb8WvLM9OYj/Ur815g==
+
+"@next/swc-linux-x64-musl@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.3.tgz#cd0bed8ee92032c25090bed9d95602ac698d925f"
+  integrity sha512-DPw8nFuM1uEpbX47tM3wiXIR0Qa+atSzs9Q3peY1urkhofx44o7E1svnq+a5Q0r8lAcssLrwiM+OyJJgV/oj7g==
+
+"@next/swc-win32-arm64-msvc@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.3.tgz#7f556674ca97e6936220d10c58252cc36522d80a"
+  integrity sha512-zBPSP8cHL51Gub/YV8UUePW7AVGukp2D8JU93IHbVDu2qmhFAn9LWXiOOLKplZQKxnIPUkJTQAJDCWBWU4UWUA==
+
+"@next/swc-win32-ia32-msvc@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.3.tgz#4912721fb8695f11daec4cde42e73dc57bcc479f"
+  integrity sha512-ONcL/lYyGUj4W37D4I2I450SZtSenmFAvapkJQNIJhrPMhzDU/AdfLkW98NvH1D2+7FXwe7yclf3+B7v28uzBQ==
+
+"@next/swc-win32-x64-msvc@13.5.3":
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.3.tgz#97340a709febb60ff73003566b99d127d4e5b881"
+  integrity sha512-2Vz2tYWaLqJvLcWbbTlJ5k9AN6JD7a5CN2pAeIzpbecK8ZF/yobA39cXtv6e+Z8c5UJuVOmaTldEAIxvsIux/Q==
 
 "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
   version "5.1.1-v1"
@@ -4476,18 +3929,6 @@
   dependencies:
     "@octokit/openapi-types" "^18.0.0"
 
-"@pkgr/utils@^2.3.1":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@pkgr/utils/-/utils-2.4.1.tgz#adf291d0357834c410ce80af16e711b56c7b1cd3"
-  integrity sha512-JOqwkgFEyi+OROIyq7l4Jy28h/WwhDnG/cPkXG2Z1iFbubB6jsHW1NDvmyOzTBxHr3yg68YGirmh1JUgMqa+9w==
-  dependencies:
-    cross-spawn "^7.0.3"
-    fast-glob "^3.2.12"
-    is-glob "^4.0.3"
-    open "^9.1.0"
-    picocolors "^1.0.0"
-    tslib "^2.5.0"
-
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
   version "0.5.10"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.10.tgz#2eba163b8e7dbabb4ce3609ab5e32ab63dda3ef8"
@@ -4898,270 +4339,129 @@
   dependencies:
     merge-options "^3.0.4"
 
-"@react-native-community/cli-clean@^10.1.1":
-  version "10.1.1"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-10.1.1.tgz#4c73ce93a63a24d70c0089d4025daac8184ff504"
-  integrity sha512-iNsrjzjIRv9yb5y309SWJ8NDHdwYtnCpmxZouQDyOljUdC9MwdZ4ChbtA4rwQyAwgOVfS9F/j56ML3Cslmvrxg==
-  dependencies:
-    "@react-native-community/cli-tools" "^10.1.1"
-    chalk "^4.1.2"
-    execa "^1.0.0"
-    prompts "^2.4.0"
-
-"@react-native-community/cli-clean@^9.2.1":
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-9.2.1.tgz#198c5dd39c432efb5374582073065ff75d67d018"
-  integrity sha512-dyNWFrqRe31UEvNO+OFWmQ4hmqA07bR9Ief/6NnGwx67IO9q83D5PEAf/o96ML6jhSbDwCmpPKhPwwBbsyM3mQ==
+"@react-native-community/cli-clean@11.3.7":
+  version "11.3.7"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-11.3.7.tgz#cb4c2f225f78593412c2d191b55b8570f409a48f"
+  integrity sha512-twtsv54ohcRyWVzPXL3F9VHGb4Qhn3slqqRs3wEuRzjR7cTmV2TIO2b1VhaqF4HlCgNd+cGuirvLtK2JJyaxMg==
   dependencies:
-    "@react-native-community/cli-tools" "^9.2.1"
+    "@react-native-community/cli-tools" "11.3.7"
     chalk "^4.1.2"
-    execa "^1.0.0"
+    execa "^5.0.0"
     prompts "^2.4.0"
 
-"@react-native-community/cli-config@^10.1.1":
-  version "10.1.1"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-config/-/cli-config-10.1.1.tgz#08dcc5d7ca1915647dc06507ed853fe0c1488395"
-  integrity sha512-p4mHrjC+s/ayiNVG6T35GdEGdP6TuyBUg5plVGRJfTl8WT6LBfLYLk+fz/iETrEZ/YkhQIsQcEUQC47MqLNHog==
+"@react-native-community/cli-config@11.3.7":
+  version "11.3.7"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-config/-/cli-config-11.3.7.tgz#4ce95548252ecb094b576369abebf9867c95d277"
+  integrity sha512-FDBLku9xskS+bx0YFJFLCmUJhEZ4/MMSC9qPYOGBollWYdgE7k/TWI0IeYFmMALAnbCdKQAYP5N29N55Tad8lg==
   dependencies:
-    "@react-native-community/cli-tools" "^10.1.1"
+    "@react-native-community/cli-tools" "11.3.7"
     chalk "^4.1.2"
     cosmiconfig "^5.1.0"
-    deepmerge "^3.2.0"
-    glob "^7.1.3"
-    joi "^17.2.1"
-
-"@react-native-community/cli-config@^9.2.1":
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-config/-/cli-config-9.2.1.tgz#54eb026d53621ccf3a9df8b189ac24f6e56b8750"
-  integrity sha512-gHJlBBXUgDN9vrr3aWkRqnYrPXZLztBDQoY97Mm5Yo6MidsEpYo2JIP6FH4N/N2p1TdjxJL4EFtdd/mBpiR2MQ==
-  dependencies:
-    "@react-native-community/cli-tools" "^9.2.1"
-    cosmiconfig "^5.1.0"
-    deepmerge "^3.2.0"
-    glob "^7.1.3"
-    joi "^17.2.1"
-
-"@react-native-community/cli-debugger-ui@^10.0.0":
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-10.0.0.tgz#4bb6d41c7e46449714dc7ba5d9f5b41ef0ea7c57"
-  integrity sha512-8UKLcvpSNxnUTRy8CkCl27GGLqZunQ9ncGYhSrWyKrU9SWBJJGeZwi2k2KaoJi5FvF2+cD0t8z8cU6lsq2ZZmA==
-  dependencies:
-    serve-static "^1.13.1"
-
-"@react-native-community/cli-debugger-ui@^9.0.0":
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-9.0.0.tgz#ea5c5dad6008bccd840d858e160d42bb2ced8793"
-  integrity sha512-7hH05ZwU9Tp0yS6xJW0bqcZPVt0YCK7gwj7gnRu1jDNN2kughf6Lg0Ys29rAvtZ7VO1PK5c1O+zs7yFnylQDUA==
-  dependencies:
-    serve-static "^1.13.1"
-
-"@react-native-community/cli-doctor@^10.2.4":
-  version "10.2.5"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-doctor/-/cli-doctor-10.2.5.tgz#e5e28c66c2373f05a94b296a8ec637f8df736707"
-  integrity sha512-1YbzXvsldBmSw1MmBsXB74bKiHXKNCjlb2ByLgkfTiarpSvETYam3g5vex0N+qc0Cdkzkq+8NznE744LFhnUpw==
-  dependencies:
-    "@react-native-community/cli-config" "^10.1.1"
-    "@react-native-community/cli-platform-ios" "^10.2.5"
-    "@react-native-community/cli-tools" "^10.1.1"
-    chalk "^4.1.2"
-    command-exists "^1.2.8"
-    envinfo "^7.7.2"
-    execa "^1.0.0"
-    hermes-profile-transformer "^0.0.6"
-    ip "^1.1.5"
-    node-stream-zip "^1.9.1"
-    ora "^5.4.1"
-    prompts "^2.4.0"
-    semver "^6.3.0"
-    strip-ansi "^5.2.0"
-    sudo-prompt "^9.0.0"
-    wcwidth "^1.0.1"
+    deepmerge "^4.3.0"
+    glob "^7.1.3"
+    joi "^17.2.1"
 
-"@react-native-community/cli-doctor@^9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-doctor/-/cli-doctor-9.3.0.tgz#8817a3fd564453467def5b5bc8aecdc4205eff50"
-  integrity sha512-/fiuG2eDGC2/OrXMOWI5ifq4X1gdYTQhvW2m0TT5Lk1LuFiZsbTCp1lR+XILKekuTvmYNjEGdVpeDpdIWlXdEA==
+"@react-native-community/cli-debugger-ui@11.3.7":
+  version "11.3.7"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-11.3.7.tgz#2147b73313af8de3c9b396406d5d344b904cf2bb"
+  integrity sha512-aVmKuPKHZENR8SrflkMurZqeyLwbKieHdOvaZCh1Nn/0UC5CxWcyST2DB2XQboZwsvr3/WXKJkSUO+SZ1J9qTQ==
+  dependencies:
+    serve-static "^1.13.1"
+
+"@react-native-community/cli-doctor@11.3.7":
+  version "11.3.7"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-doctor/-/cli-doctor-11.3.7.tgz#7d5f5b1aea78134bba713fa97795986345ff1344"
+  integrity sha512-YEHUqWISOHnsl5+NM14KHelKh68Sr5/HeEZvvNdIcvcKtZic3FU7Xd1WcbNdo3gCq5JvzGFfufx02Tabh5zmrg==
   dependencies:
-    "@react-native-community/cli-config" "^9.2.1"
-    "@react-native-community/cli-platform-ios" "^9.3.0"
-    "@react-native-community/cli-tools" "^9.2.1"
+    "@react-native-community/cli-config" "11.3.7"
+    "@react-native-community/cli-platform-android" "11.3.7"
+    "@react-native-community/cli-platform-ios" "11.3.7"
+    "@react-native-community/cli-tools" "11.3.7"
     chalk "^4.1.2"
     command-exists "^1.2.8"
     envinfo "^7.7.2"
-    execa "^1.0.0"
+    execa "^5.0.0"
     hermes-profile-transformer "^0.0.6"
     ip "^1.1.5"
     node-stream-zip "^1.9.1"
     ora "^5.4.1"
     prompts "^2.4.0"
-    semver "^6.3.0"
+    semver "^7.5.2"
     strip-ansi "^5.2.0"
     sudo-prompt "^9.0.0"
     wcwidth "^1.0.1"
+    yaml "^2.2.1"
 
-"@react-native-community/cli-hermes@^10.2.0":
-  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-hermes/-/cli-hermes-10.2.0.tgz#cc252f435b149f74260bc918ce22fdf58033a87e"
-  integrity sha512-urfmvNeR8IiO/Sd92UU3xPO+/qI2lwCWQnxOkWaU/i2EITFekE47MD6MZrfVulRVYRi5cuaFqKZO/ccOdOB/vQ==
-  dependencies:
-    "@react-native-community/cli-platform-android" "^10.2.0"
-    "@react-native-community/cli-tools" "^10.1.1"
-    chalk "^4.1.2"
-    hermes-profile-transformer "^0.0.6"
-    ip "^1.1.5"
-
-"@react-native-community/cli-hermes@^9.3.1":
-  version "9.3.1"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-hermes/-/cli-hermes-9.3.1.tgz#569d27c1effd684ba451ad4614e29a99228cec49"
-  integrity sha512-Mq4PK8m5YqIdaVq5IdRfp4qK09aVO+aiCtd6vjzjNUgk1+1X5cgUqV6L65h4N+TFJYJHcp2AnB+ik1FAYXvYPQ==
+"@react-native-community/cli-hermes@11.3.7":
+  version "11.3.7"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-hermes/-/cli-hermes-11.3.7.tgz#091e730a1f8bace6c3729e8744bad6141002e0e8"
+  integrity sha512-chkKd8n/xeZkinRvtH6QcYA8rjNOKU3S3Lw/3Psxgx+hAYV0Gyk95qJHTalx7iu+PwjOOqqvCkJo5jCkYLkoqw==
   dependencies:
-    "@react-native-community/cli-platform-android" "^9.3.1"
-    "@react-native-community/cli-tools" "^9.2.1"
+    "@react-native-community/cli-platform-android" "11.3.7"
+    "@react-native-community/cli-tools" "11.3.7"
     chalk "^4.1.2"
     hermes-profile-transformer "^0.0.6"
     ip "^1.1.5"
 
-"@react-native-community/cli-platform-android@10.2.0", "@react-native-community/cli-platform-android@^10.2.0":
-  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-android/-/cli-platform-android-10.2.0.tgz#0bc689270a5f1d9aaf9e723181d43ca4dbfffdef"
-  integrity sha512-CBenYwGxwFdObZTn1lgxWtMGA5ms2G/ALQhkS+XTAD7KHDrCxFF9yT/fnAjFZKM6vX/1TqGI1RflruXih3kAhw==
-  dependencies:
-    "@react-native-community/cli-tools" "^10.1.1"
-    chalk "^4.1.2"
-    execa "^1.0.0"
-    glob "^7.1.3"
-    logkitty "^0.7.1"
-
-"@react-native-community/cli-platform-android@9.3.1", "@react-native-community/cli-platform-android@^9.3.1":
-  version "9.3.1"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-android/-/cli-platform-android-9.3.1.tgz#378cd72249653cc74672094400657139f21bafb8"
-  integrity sha512-m0bQ6Twewl7OEZoVf79I2GZmsDqh+Gh0bxfxWgwxobsKDxLx8/RNItAo1lVtTCgzuCR75cX4EEO8idIF9jYhew==
+"@react-native-community/cli-platform-android@11.3.7":
+  version "11.3.7"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-android/-/cli-platform-android-11.3.7.tgz#7845bc48258b6bb55df208a23b3690647f113995"
+  integrity sha512-WGtXI/Rm178UQb8bu1TAeFC/RJvYGnbHpULXvE20GkmeJ1HIrMjkagyk6kkY3Ej25JAP2R878gv+TJ/XiRhaEg==
   dependencies:
-    "@react-native-community/cli-tools" "^9.2.1"
+    "@react-native-community/cli-tools" "11.3.7"
     chalk "^4.1.2"
-    execa "^1.0.0"
-    fs-extra "^8.1.0"
+    execa "^5.0.0"
     glob "^7.1.3"
     logkitty "^0.7.1"
-    slash "^3.0.0"
-
-"@react-native-community/cli-platform-ios@10.2.4":
-  version "10.2.4"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-ios/-/cli-platform-ios-10.2.4.tgz#6af05cd4258438422a3a50d1c0cc757acd6be375"
-  integrity sha512-/6K+jeRhcGojFIJMWMXV2eY5n/In+YUzBr/DKWQOeHBOHkESRNheG310xSAIjgB46YniSSUKhSyeuhalTbm9OQ==
-  dependencies:
-    "@react-native-community/cli-tools" "^10.1.1"
-    chalk "^4.1.2"
-    execa "^1.0.0"
-    fast-xml-parser "^4.0.12"
-    glob "^7.1.3"
-    ora "^5.4.1"
-
-"@react-native-community/cli-platform-ios@9.3.0", "@react-native-community/cli-platform-ios@^9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-ios/-/cli-platform-ios-9.3.0.tgz#45abde2a395fddd7cf71e8b746c1dc1ee2260f9a"
-  integrity sha512-nihTX53BhF2Q8p4B67oG3RGe1XwggoGBrMb6vXdcu2aN0WeXJOXdBLgR900DAA1O8g7oy1Sudu6we+JsVTKnjw==
-  dependencies:
-    "@react-native-community/cli-tools" "^9.2.1"
-    chalk "^4.1.2"
-    execa "^1.0.0"
-    glob "^7.1.3"
-    ora "^5.4.1"
 
-"@react-native-community/cli-platform-ios@^10.2.5":
-  version "10.2.5"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-ios/-/cli-platform-ios-10.2.5.tgz#7888c74b83099885bf9e6d52170c6e663ad971ee"
-  integrity sha512-hq+FZZuSBK9z82GLQfzdNDl8vbFx5UlwCLFCuTtNCROgBoapFtVZQKRP2QBftYNrQZ0dLAb01gkwxagHsQCFyg==
+"@react-native-community/cli-platform-ios@11.3.7":
+  version "11.3.7"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-ios/-/cli-platform-ios-11.3.7.tgz#87478f907634713b7236c77870446a5ca1f35ff1"
+  integrity sha512-Z/8rseBput49EldX7MogvN6zJlWzZ/4M97s2P+zjS09ZoBU7I0eOKLi0N9wx+95FNBvGQQ/0P62bB9UaFQH2jw==
   dependencies:
-    "@react-native-community/cli-tools" "^10.1.1"
+    "@react-native-community/cli-tools" "11.3.7"
     chalk "^4.1.2"
-    execa "^1.0.0"
+    execa "^5.0.0"
     fast-xml-parser "^4.0.12"
     glob "^7.1.3"
     ora "^5.4.1"
 
-"@react-native-community/cli-plugin-metro@^10.2.3":
-  version "10.2.3"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-plugin-metro/-/cli-plugin-metro-10.2.3.tgz#419e0155a50951c3329818fba51cb5021a7294f1"
-  integrity sha512-jHi2oDuTePmW4NEyVT8JEGNlIYcnFXCSV2ZMp4rnDrUk4TzzyvS3IMvDlESEmG8Kry8rvP0KSUx/hTpy37Sbkw==
+"@react-native-community/cli-plugin-metro@11.3.7":
+  version "11.3.7"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-plugin-metro/-/cli-plugin-metro-11.3.7.tgz#2e8a9deb30b40495c5c1347a1837a824400fa00f"
+  integrity sha512-0WhgoBVGF1f9jXcuagQmtxpwpfP+2LbLZH4qMyo6OtYLWLG13n2uRep+8tdGzfNzl1bIuUTeE9yZSAdnf9LfYQ==
   dependencies:
-    "@react-native-community/cli-server-api" "^10.1.1"
-    "@react-native-community/cli-tools" "^10.1.1"
+    "@react-native-community/cli-server-api" "11.3.7"
+    "@react-native-community/cli-tools" "11.3.7"
     chalk "^4.1.2"
-    execa "^1.0.0"
-    metro "0.73.10"
-    metro-config "0.73.10"
-    metro-core "0.73.10"
-    metro-react-native-babel-transformer "0.73.10"
-    metro-resolver "0.73.10"
-    metro-runtime "0.73.10"
-    readline "^1.3.0"
-
-"@react-native-community/cli-plugin-metro@^9.2.1":
-  version "9.3.3"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-plugin-metro/-/cli-plugin-metro-9.3.3.tgz#330d7b9476a3fdabdd5863f114fa962289e280dc"
-  integrity sha512-lPBw6XieNdj2AbWDN0Rc+jNOx8hBgSQyv0gUAm01qtJe4I9FjSMU6nOGTxMpWpICo6TYl/cmPGXOzbfpwxwtkQ==
-  dependencies:
-    "@react-native-community/cli-server-api" "^9.2.1"
-    "@react-native-community/cli-tools" "^9.2.1"
-    chalk "^4.1.2"
-    metro "0.72.4"
-    metro-config "0.72.4"
-    metro-core "0.72.4"
-    metro-react-native-babel-transformer "0.72.4"
-    metro-resolver "0.72.4"
-    metro-runtime "0.72.4"
+    execa "^5.0.0"
+    metro "0.76.8"
+    metro-config "0.76.8"
+    metro-core "0.76.8"
+    metro-react-native-babel-transformer "0.76.8"
+    metro-resolver "0.76.8"
+    metro-runtime "0.76.8"
     readline "^1.3.0"
 
-"@react-native-community/cli-server-api@^10.1.1":
-  version "10.1.1"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-server-api/-/cli-server-api-10.1.1.tgz#e382269de281bb380c2e685431364fbbb8c1cb3a"
-  integrity sha512-NZDo/wh4zlm8as31UEBno2bui8+ufzsZV+KN7QjEJWEM0levzBtxaD+4je0OpfhRIIkhaRm2gl/vVf7OYAzg4g==
-  dependencies:
-    "@react-native-community/cli-debugger-ui" "^10.0.0"
-    "@react-native-community/cli-tools" "^10.1.1"
-    compression "^1.7.1"
-    connect "^3.6.5"
-    errorhandler "^1.5.0"
-    nocache "^3.0.1"
-    pretty-format "^26.6.2"
-    serve-static "^1.13.1"
-    ws "^7.5.1"
-
-"@react-native-community/cli-server-api@^9.2.1":
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-server-api/-/cli-server-api-9.2.1.tgz#41ac5916b21d324bccef447f75600c03b2f54fbe"
-  integrity sha512-EI+9MUxEbWBQhWw2PkhejXfkcRqPl+58+whlXJvKHiiUd7oVbewFs0uLW0yZffUutt4FGx6Uh88JWEgwOzAdkw==
+"@react-native-community/cli-server-api@11.3.7":
+  version "11.3.7"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-server-api/-/cli-server-api-11.3.7.tgz#2cce54b3331c9c51b9067129c297ab2e9a142216"
+  integrity sha512-yoFyGdvR3HxCnU6i9vFqKmmSqFzCbnFSnJ29a+5dppgPRetN+d//O8ard/YHqHzToFnXutAFf2neONn23qcJAg==
   dependencies:
-    "@react-native-community/cli-debugger-ui" "^9.0.0"
-    "@react-native-community/cli-tools" "^9.2.1"
+    "@react-native-community/cli-debugger-ui" "11.3.7"
+    "@react-native-community/cli-tools" "11.3.7"
     compression "^1.7.1"
     connect "^3.6.5"
-    errorhandler "^1.5.0"
+    errorhandler "^1.5.1"
     nocache "^3.0.1"
     pretty-format "^26.6.2"
     serve-static "^1.13.1"
     ws "^7.5.1"
 
-"@react-native-community/cli-tools@^10.1.1":
-  version "10.1.1"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-tools/-/cli-tools-10.1.1.tgz#fa66e509c0d3faa31f7bb87ed7d42ad63f368ddd"
-  integrity sha512-+FlwOnZBV+ailEzXjcD8afY2ogFEBeHOw/8+XXzMgPaquU2Zly9B+8W089tnnohO3yfiQiZqkQlElP423MY74g==
-  dependencies:
-    appdirsjs "^1.2.4"
-    chalk "^4.1.2"
-    find-up "^5.0.0"
-    mime "^2.4.1"
-    node-fetch "^2.6.0"
-    open "^6.2.0"
-    ora "^5.4.1"
-    semver "^6.3.0"
-    shell-quote "^1.7.3"
-
-"@react-native-community/cli-tools@^9.2.1":
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-tools/-/cli-tools-9.2.1.tgz#c332324b1ea99f9efdc3643649bce968aa98191c"
-  integrity sha512-bHmL/wrKmBphz25eMtoJQgwwmeCylbPxqFJnFSbkqJPXQz3ManQ6q/gVVMqFyz7D3v+riaus/VXz3sEDa97uiQ==
+"@react-native-community/cli-tools@11.3.7":
+  version "11.3.7"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-tools/-/cli-tools-11.3.7.tgz#37aa7efc7b4a1b7077d541f1d7bb11a2ab7b6ff2"
+  integrity sha512-peyhP4TV6Ps1hk+MBHTFaIR1eI3u+OfGBvr5r0wPwo3FAJvldRinMgcB/TcCcOBXVORu7ba1XYjkubPeYcqAyA==
   dependencies:
     appdirsjs "^1.2.4"
     chalk "^4.1.2"
@@ -5170,68 +4470,38 @@
     node-fetch "^2.6.0"
     open "^6.2.0"
     ora "^5.4.1"
-    semver "^6.3.0"
+    semver "^7.5.2"
     shell-quote "^1.7.3"
 
-"@react-native-community/cli-types@^10.0.0":
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-types/-/cli-types-10.0.0.tgz#046470c75ec18f8b3bd906e54e43a6f678e01a45"
-  integrity sha512-31oUM6/rFBZQfSmDQsT1DX/5fjqfxg7sf2u8kTPJK7rXVya5SRpAMaCXsPAG0omsmJxXt+J9HxUi3Ic+5Ux5Iw==
-  dependencies:
-    joi "^17.2.1"
-
-"@react-native-community/cli-types@^9.1.0":
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-types/-/cli-types-9.1.0.tgz#dcd6a0022f62790fe1f67417f4690db938746aab"
-  integrity sha512-KDybF9XHvafLEILsbiKwz5Iobd+gxRaPyn4zSaAerBxedug4er5VUWa8Szy+2GeYKZzMh/gsb1o9lCToUwdT/g==
+"@react-native-community/cli-types@11.3.7":
+  version "11.3.7"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-types/-/cli-types-11.3.7.tgz#12fe7cff3da08bd27e11116531b2e001939854b9"
+  integrity sha512-OhSr/TiDQkXjL5YOs8+hvGSB+HltLn5ZI0+A3DCiMsjUgTTsYh+Z63OtyMpNjrdCEFcg0MpfdU2uxstCS6Dc5g==
   dependencies:
     joi "^17.2.1"
 
-"@react-native-community/cli@10.2.4":
-  version "10.2.4"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli/-/cli-10.2.4.tgz#c6afe723055d430061a32bd31644fc56eb9ba330"
-  integrity sha512-E9BUDHfLEsnjkjeJqECuCjl4E/1Ox9Nl6hkQBhEqjZm4AaQxgU7M6AyFfOgaXn5v3am16/R4ZOUTrJnGJWS3GA==
-  dependencies:
-    "@react-native-community/cli-clean" "^10.1.1"
-    "@react-native-community/cli-config" "^10.1.1"
-    "@react-native-community/cli-debugger-ui" "^10.0.0"
-    "@react-native-community/cli-doctor" "^10.2.4"
-    "@react-native-community/cli-hermes" "^10.2.0"
-    "@react-native-community/cli-plugin-metro" "^10.2.3"
-    "@react-native-community/cli-server-api" "^10.1.1"
-    "@react-native-community/cli-tools" "^10.1.1"
-    "@react-native-community/cli-types" "^10.0.0"
+"@react-native-community/cli@11.3.7":
+  version "11.3.7"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli/-/cli-11.3.7.tgz#564c0054269d8385fa9d301750b2e56dbb5c0cc9"
+  integrity sha512-Ou8eDlF+yh2rzXeCTpMPYJ2fuqsusNOhmpYPYNQJQ2h6PvaF30kPomflgRILems+EBBuggRtcT+I+1YH4o/q6w==
+  dependencies:
+    "@react-native-community/cli-clean" "11.3.7"
+    "@react-native-community/cli-config" "11.3.7"
+    "@react-native-community/cli-debugger-ui" "11.3.7"
+    "@react-native-community/cli-doctor" "11.3.7"
+    "@react-native-community/cli-hermes" "11.3.7"
+    "@react-native-community/cli-plugin-metro" "11.3.7"
+    "@react-native-community/cli-server-api" "11.3.7"
+    "@react-native-community/cli-tools" "11.3.7"
+    "@react-native-community/cli-types" "11.3.7"
     chalk "^4.1.2"
     commander "^9.4.1"
-    execa "^1.0.0"
-    find-up "^4.1.0"
-    fs-extra "^8.1.0"
-    graceful-fs "^4.1.3"
-    prompts "^2.4.0"
-    semver "^6.3.0"
-
-"@react-native-community/cli@9.3.2":
-  version "9.3.2"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli/-/cli-9.3.2.tgz#81761880af00c1894d85380d8c9a358659865204"
-  integrity sha512-IAW4X0vmX/xozNpp/JVZaX7MrC85KV0OP2DF4o7lNGOfpUhzJAEWqTfkxFYS+VsRjZHDve4wSTiGIuXwE7FG1w==
-  dependencies:
-    "@react-native-community/cli-clean" "^9.2.1"
-    "@react-native-community/cli-config" "^9.2.1"
-    "@react-native-community/cli-debugger-ui" "^9.0.0"
-    "@react-native-community/cli-doctor" "^9.3.0"
-    "@react-native-community/cli-hermes" "^9.3.1"
-    "@react-native-community/cli-plugin-metro" "^9.2.1"
-    "@react-native-community/cli-server-api" "^9.2.1"
-    "@react-native-community/cli-tools" "^9.2.1"
-    "@react-native-community/cli-types" "^9.1.0"
-    chalk "^4.1.2"
-    commander "^9.4.0"
-    execa "^1.0.0"
+    execa "^5.0.0"
     find-up "^4.1.0"
     fs-extra "^8.1.0"
     graceful-fs "^4.1.3"
     prompts "^2.4.0"
-    semver "^6.3.0"
+    semver "^7.5.2"
 
 "@react-native-community/datetimepicker@6.5.2":
   version "6.5.2"
@@ -5269,25 +4539,53 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-4.2.4.tgz#8d88adceeb32f7997a122feba48d7186fca80346"
   integrity sha512-uY51UoipQW4ELnFWMU6rTHRc4EUYaW+Z1O9Teijej6NYVYdUcUKq+t7WeBGjMAEc1ipyooMeBqRXToWO5zAU2Q==
 
-"@react-native/assets@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e"
-  integrity sha512-KrwSpS1tKI70wuKl68DwJZYEvXktDHdZMG0k2AXD/rJVSlB23/X2CB2cutVR0HwNMJIal9HOUOBB2rVfa6UGtQ==
+"@react-native/assets-registry@^0.72.0":
+  version "0.72.0"
+  resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.72.0.tgz#c82a76a1d86ec0c3907be76f7faf97a32bbed05d"
+  integrity sha512-Im93xRJuHHxb1wniGhBMsxLwcfzdYreSZVQGDoMJgkd6+Iky61LInGEHnQCTN0fKNYF1Dvcofb4uMmE1RQHXHQ==
+
+"@react-native/codegen@^0.72.7":
+  version "0.72.7"
+  resolved "https://registry.yarnpkg.com/@react-native/codegen/-/codegen-0.72.7.tgz#b6832ce631ac63143024ea094a6b5480a780e589"
+  integrity sha512-O7xNcGeXGbY+VoqBGNlZ3O05gxfATlwE1Q1qQf5E38dK+tXn5BY4u0jaQ9DPjfE8pBba8g/BYI1N44lynidMtg==
+  dependencies:
+    "@babel/parser" "^7.20.0"
+    flow-parser "^0.206.0"
+    jscodeshift "^0.14.0"
+    nullthrows "^1.1.1"
+
+"@react-native/gradle-plugin@^0.72.11":
+  version "0.72.11"
+  resolved "https://registry.yarnpkg.com/@react-native/gradle-plugin/-/gradle-plugin-0.72.11.tgz#c063ef12778706611de7a1e42b74b14d9405fb9f"
+  integrity sha512-P9iRnxiR2w7EHcZ0mJ+fmbPzMby77ZzV6y9sJI3lVLJzF7TLSdbwcQyD3lwMsiL+q5lKUHoZJS4sYmih+P2HXw==
+
+"@react-native/js-polyfills@^0.72.1":
+  version "0.72.1"
+  resolved "https://registry.yarnpkg.com/@react-native/js-polyfills/-/js-polyfills-0.72.1.tgz#905343ef0c51256f128256330fccbdb35b922291"
+  integrity sha512-cRPZh2rBswFnGt5X5EUEPs0r+pAsXxYsifv/fgy9ZLQokuT52bPH+9xjDR+7TafRua5CttGW83wP4TntRcWNDA==
 
-"@react-native/normalize-color@*", "@react-native/normalize-color@2.1.0", "@react-native/normalize-color@^2.0.0", "@react-native/normalize-color@^2.1.0":
+"@react-native/normalize-color@^2.0.0", "@react-native/normalize-color@^2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@react-native/normalize-color/-/normalize-color-2.1.0.tgz#939b87a9849e81687d3640c5efa2a486ac266f91"
   integrity sha512-Z1jQI2NpdFJCVgpY+8Dq/Bt3d+YUi1928Q+/CZm/oh66fzM0RUl54vvuXlPJKybH4pdCZey1eDTPaLHkMPNgWA==
 
-"@react-native/normalize-color@2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@react-native/normalize-color/-/normalize-color-2.0.0.tgz#da955909432474a9a0fe1cbffc66576a0447f567"
-  integrity sha512-Wip/xsc5lw8vsBlmY2MO/gFLp3MvuZ2baBZjDeTjjndMgM0h5sxz7AZR62RDPGgstp8Np7JzjvVqVT7tpFZqsw==
+"@react-native/normalize-colors@*":
+  version "0.73.1"
+  resolved "https://registry.yarnpkg.com/@react-native/normalize-colors/-/normalize-colors-0.73.1.tgz#5c1d28ec825b053142c435e0b52bf2e2f2a03d8d"
+  integrity sha512-PxbovgSN1lxBtS81D7sG96JBK+QcxUMXq4BKhESI0WjEi4dAVbhEHq39uDlhfdcVpeID6gMiBKBLFurD2F6RNQ==
 
-"@react-native/polyfills@2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-2.0.0.tgz#4c40b74655c83982c8cf47530ee7dc13d957b6aa"
-  integrity sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ==
+"@react-native/normalize-colors@^0.72.0":
+  version "0.72.0"
+  resolved "https://registry.yarnpkg.com/@react-native/normalize-colors/-/normalize-colors-0.72.0.tgz#14294b7ed3c1d92176d2a00df48456e8d7d62212"
+  integrity sha512-285lfdqSXaqKuBbbtP9qL2tDrfxdOFtIMvkKadtleRQkdOxx+uzGvFr82KHmc/sSiMtfXGp7JnFYWVh4sFl7Yw==
+
+"@react-native/virtualized-lists@^0.72.8":
+  version "0.72.8"
+  resolved "https://registry.yarnpkg.com/@react-native/virtualized-lists/-/virtualized-lists-0.72.8.tgz#a2c6a91ea0f1d40eb5a122fb063daedb92ed1dc3"
+  integrity sha512-J3Q4Bkuo99k7mu+jPS9gSUSgq+lLRSI/+ahXNwV92XgJ/8UgOTxu2LPwhJnBk/sQKxq7E8WkZBnBiozukQMqrw==
+  dependencies:
+    invariant "^2.2.4"
+    nullthrows "^1.1.1"
 
 "@react-stately/calendar@^3.2.1":
   version "3.2.1"
@@ -5301,16 +4599,6 @@
     "@react-types/shared" "^3.18.1"
     "@swc/helpers" "^0.4.14"
 
-"@react-stately/checkbox@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@react-stately/checkbox/-/checkbox-3.0.3.tgz#18ee6bd3b544334b6f853bb5c5f7017ac3bb9c37"
-  integrity sha512-amT889DTLdbjAVjZ9j9TytN73PszynGIspKi1QSUCvXeA2OVyCwShxhV0Pn7yYX8cMinvGXrjhWdhn0nhYeMdg==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    "@react-stately/toggle" "^3.2.3"
-    "@react-stately/utils" "^3.2.2"
-    "@react-types/checkbox" "^3.2.3"
-
 "@react-stately/checkbox@^3.4.2":
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/@react-stately/checkbox/-/checkbox-3.4.2.tgz#9ccd80ee94b5d4c796e81ce8f5e55230b8102e31"
@@ -5507,7 +4795,7 @@
     "@react-types/tabs" "^3.3.0"
     "@swc/helpers" "^0.4.14"
 
-"@react-stately/toggle@^3.2.1", "@react-stately/toggle@^3.2.3", "@react-stately/toggle@^3.4.4", "@react-stately/toggle@^3.5.2":
+"@react-stately/toggle@^3.2.1", "@react-stately/toggle@^3.4.4", "@react-stately/toggle@^3.5.2":
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/@react-stately/toggle/-/toggle-3.5.2.tgz#580f4254e3c7c2c4d230409a36042813d9c0ab70"
   integrity sha512-2fDecu06job9NKdSIryU4AE+BoTGZqfinUsAvYTaaQN95Apq8IShEDFkY+gSnU09wRX26Ux+JJi5pYwg+HX1tw==
@@ -5538,7 +4826,7 @@
     "@react-types/shared" "^3.18.1"
     "@swc/helpers" "^0.4.14"
 
-"@react-stately/utils@^3.2.2", "@react-stately/utils@^3.6.0":
+"@react-stately/utils@^3.6.0":
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.6.0.tgz#f273e7fcb348254347d2e88c8f0c45571060c207"
   integrity sha512-rptF7iUWDrquaYvBAS4QQhOBQyLBncDeHF03WnHXAxnuPJXNcr9cXJtjJPGCs036ZB8Q2hc9BGG5wNyMkF5v+Q==
@@ -5560,7 +4848,7 @@
     "@internationalized/date" "^3.2.0"
     "@react-types/shared" "^3.18.1"
 
-"@react-types/checkbox@^3.2.1", "@react-types/checkbox@^3.2.3", "@react-types/checkbox@^3.4.4":
+"@react-types/checkbox@^3.2.1", "@react-types/checkbox@^3.4.4":
   version "3.4.4"
   resolved "https://registry.yarnpkg.com/@react-types/checkbox/-/checkbox-3.4.4.tgz#cf55e9fd0cabef6e4408d03b308c754e1add3bc1"
   integrity sha512-rJNhbW4R9HTvdbF2oTZmqGiZ/WVP3/XsU4gae7tfdhSYjG+5T5h9zau1vRhz++zwKn57wfcyNn6a83GDhhgkVw==
@@ -5699,11 +4987,6 @@
     "@react-types/overlays" "^3.7.2"
     "@react-types/shared" "^3.18.1"
 
-"@rushstack/eslint-patch@^1.1.3":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.3.2.tgz#31b9c510d8cada9683549e1dbb4284cca5001faf"
-  integrity sha512-V+MvGwaHH03hYhY+k6Ef/xKd6RYlc4q8WBx+2ANmipHJcKuktNcI/NgEsJgdSUF6Lw32njT6OnrRsKYCdgHjYw==
-
 "@segment/loosely-validate-event@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz#87dfc979e5b4e7b82c5f1d8b722dfd5d77644681"
@@ -5734,6 +5017,11 @@
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"
   integrity sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==
 
+"@sinclair/typebox@^0.27.8":
+  version "0.27.8"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
+  integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
+
 "@sindresorhus/is@^5.2.0":
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-5.4.1.tgz#c4383ce702fb90531c3d310506bab89e70427c53"
@@ -6654,17 +5942,17 @@
     regenerator-runtime "^0.13.7"
     resolve-from "^5.0.0"
 
-"@swc/helpers@0.4.14", "@swc/helpers@^0.4.14":
-  version "0.4.14"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74"
-  integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==
+"@swc/helpers@0.5.2":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.2.tgz#85ea0c76450b61ad7d10a37050289eded783c27d"
+  integrity sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==
   dependencies:
     tslib "^2.4.0"
 
-"@swc/helpers@0.5.1":
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.1.tgz#e9031491aa3f26bfcc974a67f48bd456c8a5357a"
-  integrity sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==
+"@swc/helpers@^0.4.14":
+  version "0.4.14"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74"
+  integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==
   dependencies:
     tslib "^2.4.0"
 
@@ -6856,11 +6144,6 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"
   integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
 
-"@types/json5@^0.0.29":
-  version "0.0.29"
-  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
-  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
-
 "@types/lodash@^4.14.167":
   version "4.14.195"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
@@ -6896,11 +6179,6 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.3.1.tgz#e8a83f1aa8b649377bb1fb5d7bac5cb90e784dfe"
   integrity sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==
 
-"@types/node@18.15.11":
-  version "18.15.11"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.11.tgz#b3b790f09cb1696cffcec605de025b088fa4225f"
-  integrity sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==
-
 "@types/node@^12.7.1":
   version "12.20.55"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
@@ -6951,13 +6229,6 @@
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
   integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
 
-"@types/react-dom@18.0.11":
-  version "18.0.11"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.11.tgz#321351c1459bc9ca3d216aefc8a167beec334e33"
-  integrity sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-native@^0.71.6":
   version "0.71.8"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.71.8.tgz#e7e6ba3c2d9306d7733447a5dd4403b502477d5c"
@@ -6981,24 +6252,6 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@18.0.37":
-  version "18.0.37"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.37.tgz#7a784e2a8b8f83abb04dc6b9ed9c9b4c0aee9be7"
-  integrity sha512-4yaZZtkRN3ZIQD3KSEwkfcik8s0SWV+82dlJot1AbGYHCzJkWP3ENBY6wYeDRmKZ6HkrgoGAmR2HqdwYGp6OEw==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@~18.0.14":
-  version "18.0.38"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.38.tgz#02a23bef8848b360a0d1dceef4432c15c21c600c"
-  integrity sha512-ExsidLLSzYj4cvaQjGnQCk4HFfVT9+EZ9XZsQ8Hsrcn8QNgXtpZ3m9vSIC2MWtx7jHictK6wYhQgGh6ic58oOw==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
 "@types/scheduler@*":
   version "0.16.3"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
@@ -7129,7 +6382,7 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/parser@^5.30.5", "@typescript-eslint/parser@^5.42.0":
+"@typescript-eslint/parser@^5.30.5":
   version "5.60.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.60.0.tgz#08f4daf5fc6548784513524f4f2f359cebb4068a"
   integrity sha512-jBONcBsDJ9UoTWrARkRRCgDz6wUggmH5RpQVlt7BimSwaTkTjwypGzKORXbR4/2Hqjk9hgwlon2rVQAjWNpkyQ==
@@ -7502,7 +6755,7 @@
   resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.5.tgz#325db42395cd49fe6c14057f9a900e427df8810e"
   integrity sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==
 
-"@xmldom/xmldom@~0.7.0", "@xmldom/xmldom@~0.7.7":
+"@xmldom/xmldom@~0.7.0":
   version "0.7.11"
   resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.7.11.tgz#adecc134521274711d071d5b0200907cc83b38ee"
   integrity sha512-UDi3g6Jss/W5FnSzO9jCtQwEpfymt0M+sPPlmLhDH6h2TJ8j4ESE/LpmNPBij15J5NKkk4/cg/qoVMdWI3vnlQ==
@@ -7537,11 +6790,6 @@ abort-controller@^3.0.0:
   dependencies:
     event-target-shim "^5.0.0"
 
-absolute-path@^0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/absolute-path/-/absolute-path-0.0.0.tgz#a78762fbdadfb5297be99b15d35a785b2f095bf7"
-  integrity sha512-HQiug4c+/s3WOvEnDRxXVmNtSG5s2gJM9r19BTcqjp7BWcE48PB+Y2G6jE65kqI0LpsQeMZygt/b60Gi4KxGyA==
-
 accepts@^1.3.7, accepts@^1.3.8, accepts@~1.3.5, accepts@~1.3.7, accepts@~1.3.8:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
@@ -7836,11 +7084,6 @@ arg@^4.1.0:
   resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
   integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
 
-arg@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
-  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
-
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -7853,13 +7096,6 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-query@^5.1.3:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.2.1.tgz#bc285d9d654d1df121bcd0c134880d415ca67c15"
-  integrity sha512-7uFg4b+lETFgdaJyETnILsXgnnzVnkHcgRbwbPwevm5x/LmUlt3MjczMRe1zg824iBgXZNRPTBftNYyRSKLp2g==
-  dependencies:
-    dequal "^2.0.3"
-
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -7931,7 +7167,7 @@ array-unique@^0.3.2:
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
   integrity sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==
 
-array.prototype.flat@^1.2.1, array.prototype.flat@^1.2.3, array.prototype.flat@^1.3.1:
+array.prototype.flat@^1.2.1, array.prototype.flat@^1.2.3:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz#ffc6576a7ca3efc2f46a143b9d1dda9b4b3cf5e2"
   integrity sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==
@@ -8022,15 +7258,10 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==
 
-ast-types-flow@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
-  integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
-
-ast-types@0.14.2, ast-types@^0.14.2:
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.14.2.tgz#600b882df8583e3cd4f2df5fa20fa83759d4bdfd"
-  integrity sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==
+ast-types@0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.15.2.tgz#39ae4809393c4b16df751ee563411423e85fb49d"
+  integrity sha512-c27loCv9QkZinsa5ProX751khO9DJl/AcB5c2KNtA6NRvHKS0PgLfcftz72KVq504vB0Gku5s2kUZzDBvQWvHg==
   dependencies:
     tslib "^2.0.1"
 
@@ -8041,6 +7272,13 @@ ast-types@^0.13.2:
   dependencies:
     tslib "^2.0.1"
 
+ast-types@^0.14.2:
+  version "0.14.2"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.14.2.tgz#600b882df8583e3cd4f2df5fa20fa83759d4bdfd"
+  integrity sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==
+  dependencies:
+    tslib "^2.0.1"
+
 astral-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
@@ -8088,18 +7326,6 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-autoprefixer@10.4.14:
-  version "10.4.14"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.14.tgz#e28d49902f8e759dd25b153264e862df2705f79d"
-  integrity sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==
-  dependencies:
-    browserslist "^4.21.5"
-    caniuse-lite "^1.0.30001464"
-    fraction.js "^4.2.0"
-    normalize-range "^0.1.2"
-    picocolors "^1.0.0"
-    postcss-value-parser "^4.2.0"
-
 autoprefixer@^9.8.6:
   version "9.8.8"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.8.tgz#fd4bd4595385fa6f06599de749a4d5f7a474957a"
@@ -8118,11 +7344,6 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
-axe-core@^4.6.2:
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.2.tgz#040a7342b20765cb18bb50b628394c21bccc17a0"
-  integrity sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==
-
 axios@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
@@ -8132,13 +7353,6 @@ axios@^1.4.0:
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
-axobject-query@^3.1.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.2.1.tgz#39c378a6e3b06ca679f29138151e45b2b32da62a"
-  integrity sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==
-  dependencies:
-    dequal "^2.0.3"
-
 babel-core@^7.0.0-bridge.0:
   version "7.0.0-bridge.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
@@ -8325,7 +7539,7 @@ babel-plugin-react-docgen@^4.2.1:
     lodash "^4.17.15"
     react-docgen "^5.0.0"
 
-babel-plugin-react-native-web@^0.18.10, babel-plugin-react-native-web@~0.18.10, babel-plugin-react-native-web@~0.18.2:
+babel-plugin-react-native-web@^0.18.10, babel-plugin-react-native-web@~0.18.2:
   version "0.18.12"
   resolved "https://registry.yarnpkg.com/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.18.12.tgz#3e9764484492ea612a16b40135b07c2d05b7969d"
   integrity sha512-4djr9G6fMdwQoD6LQ7hOKAm39+y12flWgovAqS1k5O8f42YQ3A1FFMyV5kKfetZuGhZO5BmNmOdRRZQ1TixtDw==
@@ -8351,6 +7565,13 @@ babel-plugin-syntax-trailing-function-commas@^7.0.0-beta.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz#aa213c1435e2bffeb6fca842287ef534ad05d5cf"
   integrity sha512-Xj9XuRuz3nTSbaTXWv3itLOcxyF4oPD8douBBmj7U9BBC6nEBYfyOJYQMf/8PJAFotC62UY5dFfIGEPr7WswzQ==
 
+babel-plugin-transform-flow-enums@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-enums/-/babel-plugin-transform-flow-enums-0.0.2.tgz#d1d0cc9bdc799c850ca110d0ddc9f21b9ec3ef25"
+  integrity sha512-g4aaCrDDOsWjbm0PUUeVnkcVd6AKJsVc/MbnPhEotEpkeJQP6b8nzewohQi7+QS8UyPehOhGWn0nOwjvWpmMvQ==
+  dependencies:
+    "@babel/plugin-syntax-flow" "^7.12.1"
+
 babel-preset-current-node-syntax@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
@@ -8382,19 +7603,6 @@ babel-preset-expo@~9.2.2:
     babel-plugin-react-native-web "~0.18.2"
     metro-react-native-babel-preset "0.72.3"
 
-babel-preset-expo@~9.3.2:
-  version "9.3.2"
-  resolved "https://registry.yarnpkg.com/babel-preset-expo/-/babel-preset-expo-9.3.2.tgz#0fe408d8d816a3e10fde2e1d1f7aa51b112baf3a"
-  integrity sha512-BjyvjwjJG0MaaDBLP/esbXRrAItM76po9L9zfnLxeqgFsHCIPmD+6ir45coDLGAXwR8m9It3G1yqYM9JPyemsQ==
-  dependencies:
-    "@babel/plugin-proposal-decorators" "^7.12.9"
-    "@babel/plugin-proposal-object-rest-spread" "^7.12.13"
-    "@babel/plugin-transform-react-jsx" "^7.12.17"
-    "@babel/preset-env" "^7.20.0"
-    babel-plugin-module-resolver "^4.1.0"
-    babel-plugin-react-native-web "~0.18.10"
-    metro-react-native-babel-preset "0.73.9"
-
 babel-preset-fbjs@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/babel-preset-fbjs/-/babel-preset-fbjs-3.4.0.tgz#38a14e5a7a3b285a3f3a86552d650dca5cf6111c"
@@ -9037,7 +8245,7 @@ camel-case@^4.1.1:
     pascal-case "^3.1.2"
     tslib "^2.0.3"
 
-camelcase-css@2.0.1, camelcase-css@^2.0.1:
+camelcase-css@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
@@ -9069,7 +8277,7 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-camelcase@^6.0.0, camelcase@^6.2.0:
+camelcase@^6.2.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
@@ -9084,11 +8292,16 @@ camelize@^1.0.0:
   resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
   integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
 
-caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001464, caniuse-lite@^1.0.30001503:
+caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001503:
   version "1.0.30001507"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001507.tgz#fae53f6286e7564783eadea9b447819410a59534"
   integrity sha512-SFpUDoSLCaE5XYL2jfqe9ova/pbQHEmbheDf5r4diNwbAgR3qxM9NQtfsiSscjqoya5K7kFcHPUQ+VsUkIJR4A==
 
+caniuse-lite@^1.0.30001406:
+  version "1.0.30001540"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001540.tgz#a316ca4f2ae673ab02ff0ec533334016d56ff658"
+  integrity sha512-9JL38jscuTJBTcuETxm8QLsFr/F6v0CYYTEU6r5+qSM98P2Q0Hmu0eG1dTG5GBUmywU3UlcVOUSIJYY47rdFSw==
+
 caniuse-lite@^1.0.30001517:
   version "1.0.30001522"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001522.tgz#44b87a406c901269adcdb834713e23582dd71856"
@@ -9182,7 +8395,7 @@ chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
-chokidar@^3.4.1, chokidar@^3.4.2, chokidar@^3.5.1, chokidar@^3.5.3:
+chokidar@^3.4.1, chokidar@^3.4.2, chokidar@^3.5.1:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -9421,7 +8634,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@^1.1.4, color-name@~1.1.4:
+color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -9488,7 +8701,7 @@ commander@^8.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
 
-commander@^9.4.0, commander@^9.4.1:
+commander@^9.4.1:
   version "9.5.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
   integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
@@ -10084,11 +9297,6 @@ dag-map@~1.0.0:
   resolved "https://registry.yarnpkg.com/dag-map/-/dag-map-1.0.2.tgz#e8379f041000ed561fc515475c1ed2c85eece8d7"
   integrity sha512-+LSAiGFwQ9dRnRdOeaj7g47ZFJcOUPukAP8J3A3fuZ1g9Y44BG+P1sgApjLXTQPOzC4+7S9Wr8kXsfpINM4jpw==
 
-damerau-levenshtein@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
-  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
-
 dargs@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/dargs/-/dargs-7.0.0.tgz#04015c41de0bcb69ec84050f3d9be0caf8d6d5cc"
@@ -10132,7 +9340,7 @@ debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   dependencies:
     ms "2.1.2"
 
-debug@^3.0.0, debug@^3.1.0, debug@^3.2.7:
+debug@^3.0.0, debug@^3.1.0:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
   integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
@@ -10196,11 +9404,6 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^3.2.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.3.0.tgz#d3c47fd6f3a93d517b14426b0628a17b0125f5f7"
-  integrity sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==
-
 deepmerge@^4.2.2, deepmerge@^4.3.0:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
@@ -10337,12 +9540,12 @@ depd@2.0.0:
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
   integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
 
-deprecated-react-native-prop-types@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-3.0.1.tgz#a275f84cd8519cd1665e8df3c99e9067d57a23ec"
-  integrity sha512-J0jCJcsk4hMlIb7xwOZKLfMpuJn6l8UtrPEzzQV5ewz5gvKNYakhBuq9h2rWX7YwHHJZFhU5W8ye7dB9oN8VcQ==
+deprecated-react-native-prop-types@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-4.1.0.tgz#8ed03a64c21b7fbdd2d000957b6838d4f38d2c66"
+  integrity sha512-WfepZHmRbbdTvhcolb8aOKEvQdcmTMn5tKLbqbXmkBvjFjRVWAYqsXk/DBsV8TZxws8SdGHLuHaJrHSQUPRdfw==
   dependencies:
-    "@react-native/normalize-color" "*"
+    "@react-native/normalize-colors" "*"
     invariant "*"
     prop-types "*"
 
@@ -10351,11 +9554,6 @@ deprecation@^2.0.0:
   resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
   integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
 
-dequal@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
-  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
-
 des.js@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.1.0.tgz#1d37f5766f3bbff4ee9638e871a8768c173b81da"
@@ -10401,11 +9599,6 @@ detect-port@^1.3.0:
     address "^1.0.1"
     debug "4"
 
-didyoumean@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
-  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
-
 diff-sequences@^29.4.3:
   version "29.4.3"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.4.3.tgz#9314bc1fabe09267ffeca9cbafc457d8499a13f2"
@@ -10439,11 +9632,6 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
-dlv@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
-  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
-
 doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
@@ -10679,7 +9867,7 @@ enhanced-resolve@^4.5.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-enhanced-resolve@^5.0.0, enhanced-resolve@^5.10.0, enhanced-resolve@^5.12.0, enhanced-resolve@^5.15.0:
+enhanced-resolve@^5.0.0, enhanced-resolve@^5.15.0:
   version "5.15.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz#1af946c7d93603eb88e9896cee4904dc012e9c35"
   integrity sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==
@@ -10745,7 +9933,7 @@ error-stack-parser@^2.0.6:
   dependencies:
     stackframe "^1.3.4"
 
-errorhandler@^1.5.0:
+errorhandler@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/errorhandler/-/errorhandler-1.5.1.tgz#b9ba5d17cf90744cd1e851357a6e75bf806a9a91"
   integrity sha512-rcOwbfvP1WTViVoUjcfZicVzjhjTuhSMntHh6mW3IrEiyE6mJyXvsToJUJGlGlw/2xU9P5whlWNGlIDVeCiT4A==
@@ -10912,56 +10100,11 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-next@13.3.0:
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-13.3.0.tgz#c302fbecfe2b976ea306f7622af637ef9d9e3802"
-  integrity sha512-6YEwmFBX0VjBd3ODGW9df0Is0FLaRFdMN8eAahQG9CN6LjQ28J8AFr19ngxqMSg7Qv6Uca/3VeeBosJh1bzu0w==
-  dependencies:
-    "@next/eslint-plugin-next" "13.3.0"
-    "@rushstack/eslint-patch" "^1.1.3"
-    "@typescript-eslint/parser" "^5.42.0"
-    eslint-import-resolver-node "^0.3.6"
-    eslint-import-resolver-typescript "^3.5.2"
-    eslint-plugin-import "^2.26.0"
-    eslint-plugin-jsx-a11y "^6.5.1"
-    eslint-plugin-react "^7.31.7"
-    eslint-plugin-react-hooks "^4.5.0"
-
 eslint-config-prettier@^8.5.0:
   version "8.8.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz#bfda738d412adc917fd7b038857110efe98c9348"
   integrity sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==
 
-eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.7:
-  version "0.3.7"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz#83b375187d412324a1963d84fa664377a23eb4d7"
-  integrity sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==
-  dependencies:
-    debug "^3.2.7"
-    is-core-module "^2.11.0"
-    resolve "^1.22.1"
-
-eslint-import-resolver-typescript@^3.5.2:
-  version "3.5.5"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.5.5.tgz#0a9034ae7ed94b254a360fbea89187b60ea7456d"
-  integrity sha512-TdJqPHs2lW5J9Zpe17DZNQuDnox4xo2o+0tE7Pggain9Rbc19ik8kFtXdxZ250FVx2kF4vlt2RSf4qlUpG7bhw==
-  dependencies:
-    debug "^4.3.4"
-    enhanced-resolve "^5.12.0"
-    eslint-module-utils "^2.7.4"
-    get-tsconfig "^4.5.0"
-    globby "^13.1.3"
-    is-core-module "^2.11.0"
-    is-glob "^4.0.3"
-    synckit "^0.8.5"
-
-eslint-module-utils@^2.7.4:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz#e439fee65fc33f6bba630ff621efc38ec0375c49"
-  integrity sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==
-  dependencies:
-    debug "^3.2.7"
-
 eslint-plugin-eslint-comments@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-eslint-comments/-/eslint-plugin-eslint-comments-3.2.0.tgz#9e1cd7b4413526abb313933071d7aba05ca12ffa"
@@ -10978,27 +10121,6 @@ eslint-plugin-ft-flow@^2.0.1, eslint-plugin-ft-flow@^2.0.3:
     lodash "^4.17.21"
     string-natural-compare "^3.0.1"
 
-eslint-plugin-import@^2.26.0:
-  version "2.27.5"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz#876a6d03f52608a3e5bb439c2550588e51dd6c65"
-  integrity sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==
-  dependencies:
-    array-includes "^3.1.6"
-    array.prototype.flat "^1.3.1"
-    array.prototype.flatmap "^1.3.1"
-    debug "^3.2.7"
-    doctrine "^2.1.0"
-    eslint-import-resolver-node "^0.3.7"
-    eslint-module-utils "^2.7.4"
-    has "^1.0.3"
-    is-core-module "^2.11.0"
-    is-glob "^4.0.3"
-    minimatch "^3.1.2"
-    object.values "^1.1.6"
-    resolve "^1.22.1"
-    semver "^6.3.0"
-    tsconfig-paths "^3.14.1"
-
 eslint-plugin-jest@^26.5.3:
   version "26.9.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-26.9.0.tgz#7931c31000b1c19e57dbfb71bbf71b817d1bf949"
@@ -11006,28 +10128,6 @@ eslint-plugin-jest@^26.5.3:
   dependencies:
     "@typescript-eslint/utils" "^5.10.0"
 
-eslint-plugin-jsx-a11y@^6.5.1:
-  version "6.7.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz#fca5e02d115f48c9a597a6894d5bcec2f7a76976"
-  integrity sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==
-  dependencies:
-    "@babel/runtime" "^7.20.7"
-    aria-query "^5.1.3"
-    array-includes "^3.1.6"
-    array.prototype.flatmap "^1.3.1"
-    ast-types-flow "^0.0.7"
-    axe-core "^4.6.2"
-    axobject-query "^3.1.1"
-    damerau-levenshtein "^1.0.8"
-    emoji-regex "^9.2.2"
-    has "^1.0.3"
-    jsx-ast-utils "^3.3.3"
-    language-tags "=1.0.5"
-    minimatch "^3.1.2"
-    object.entries "^1.1.6"
-    object.fromentries "^2.0.6"
-    semver "^6.3.0"
-
 eslint-plugin-prettier@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
@@ -11035,7 +10135,7 @@ eslint-plugin-prettier@^4.2.1:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-eslint-plugin-react-hooks@^4.5.0, eslint-plugin-react-hooks@^4.6.0:
+eslint-plugin-react-hooks@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
   integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
@@ -11053,7 +10153,7 @@ eslint-plugin-react-native@^4.0.0:
     "@babel/traverse" "^7.7.4"
     eslint-plugin-react-native-globals "^0.1.1"
 
-eslint-plugin-react@^7.30.1, eslint-plugin-react@^7.31.7:
+eslint-plugin-react@^7.30.1:
   version "7.32.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz#e71f21c7c265ebce01bcbc9d0955170c55571f10"
   integrity sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==
@@ -11090,7 +10190,7 @@ eslint-scope@^4.0.3:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-scope@^7.1.1, eslint-scope@^7.2.0:
+eslint-scope@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.0.tgz#f21ebdafda02352f103634b96dd47d9f81ca117b"
   integrity sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==
@@ -11098,62 +10198,16 @@ eslint-scope@^7.1.1, eslint-scope@^7.2.0:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
-eslint-visitor-keys@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
-  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
-
-eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.0, eslint-visitor-keys@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz#c22c48f48942d08ca824cc526211ae400478a994"
-  integrity sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==
-
-eslint@8.38.0:
-  version "8.38.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.38.0.tgz#a62c6f36e548a5574dd35728ac3c6209bd1e2f1a"
-  integrity sha512-pIdsD2jwlUGf/U38Jv97t8lq6HpaU/G9NKbYmpWpZGw3LdTNhZLbJePqxOXGB5+JEKfOPU/XLxYxFh03nr1KTg==
-  dependencies:
-    "@eslint-community/eslint-utils" "^4.2.0"
-    "@eslint-community/regexpp" "^4.4.0"
-    "@eslint/eslintrc" "^2.0.2"
-    "@eslint/js" "8.38.0"
-    "@humanwhocodes/config-array" "^0.11.8"
-    "@humanwhocodes/module-importer" "^1.0.1"
-    "@nodelib/fs.walk" "^1.2.8"
-    ajv "^6.10.0"
-    chalk "^4.0.0"
-    cross-spawn "^7.0.2"
-    debug "^4.3.2"
-    doctrine "^3.0.0"
-    escape-string-regexp "^4.0.0"
-    eslint-scope "^7.1.1"
-    eslint-visitor-keys "^3.4.0"
-    espree "^9.5.1"
-    esquery "^1.4.2"
-    esutils "^2.0.2"
-    fast-deep-equal "^3.1.3"
-    file-entry-cache "^6.0.1"
-    find-up "^5.0.0"
-    glob-parent "^6.0.2"
-    globals "^13.19.0"
-    grapheme-splitter "^1.0.4"
-    ignore "^5.2.0"
-    import-fresh "^3.0.0"
-    imurmurhash "^0.1.4"
-    is-glob "^4.0.0"
-    is-path-inside "^3.0.3"
-    js-sdsl "^4.1.4"
-    js-yaml "^4.1.0"
-    json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.4.1"
-    lodash.merge "^4.6.2"
-    minimatch "^3.1.2"
-    natural-compare "^1.4.0"
-    optionator "^0.9.1"
-    strip-ansi "^6.0.1"
-    strip-json-comments "^3.1.0"
-    text-table "^0.2.0"
-
+eslint-visitor-keys@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
+  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
+
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz#c22c48f48942d08ca824cc526211ae400478a994"
+  integrity sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==
+
 eslint@^8.29.0:
   version "8.43.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.43.0.tgz#3e8c6066a57097adfd9d390b8fc93075f257a094"
@@ -11199,7 +10253,7 @@ eslint@^8.29.0:
     strip-json-comments "^3.1.0"
     text-table "^0.2.0"
 
-espree@^9.5.1, espree@^9.5.2:
+espree@^9.5.2:
   version "9.5.2"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.5.2.tgz#e994e7dc33a082a7a82dceaf12883a829353215b"
   integrity sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==
@@ -11376,11 +10430,6 @@ expo-application@~5.0.1:
   resolved "https://registry.yarnpkg.com/expo-application/-/expo-application-5.0.1.tgz#628aeee74697d7aa39d0c0173dbf9383e06e53e9"
   integrity sha512-bThxK5zH/Lc2tkCvEXGjfM7ayvOVmPWYcWzXsMIU1RtG73TyXo4cq+73FvfDNIWn6gKS0WyMcmoPB3WXEV/jsw==
 
-expo-application@~5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/expo-application/-/expo-application-5.1.1.tgz#5206bf0cf89cb0e32d1f5037a0481e5c86b951ab"
-  integrity sha512-aDatTcTTCdTbHw8h4/Tq2ilc6InM5ntF9xWCJdOcnUEcglxxGphVI/lzJKBaBF6mJECA8mEOjpVg2EGxOctTwg==
-
 expo-asset@~8.7.0:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/expo-asset/-/expo-asset-8.7.0.tgz#325804e0bb21dac1e83b1e8d937d9a9257dae4a0"
@@ -11394,19 +10443,6 @@ expo-asset@~8.7.0:
     path-browserify "^1.0.0"
     url-parse "^1.5.9"
 
-expo-asset@~8.9.1:
-  version "8.9.1"
-  resolved "https://registry.yarnpkg.com/expo-asset/-/expo-asset-8.9.1.tgz#ecd43d7e8ee879e5023e7ce9fbbd6d011dcaf988"
-  integrity sha512-ugavxA7Scn96TBdeTYQA6xtHktnk0o/0xk7nFkxJKoH/t2cZDFSB05X0BI2/LDZY4iE6xTPOYw4C4mmourWfuA==
-  dependencies:
-    blueimp-md5 "^2.10.0"
-    expo-constants "~14.2.0"
-    expo-file-system "~15.2.0"
-    invariant "^2.2.4"
-    md5-file "^3.2.3"
-    path-browserify "^1.0.0"
-    url-parse "^1.5.9"
-
 expo-constants@~14.0.0, expo-constants@~14.0.2:
   version "14.0.2"
   resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-14.0.2.tgz#2cb1dec8f41a64c2fc5b4eecaf77d7661cad01cc"
@@ -11415,14 +10451,6 @@ expo-constants@~14.0.0, expo-constants@~14.0.2:
     "@expo/config" "~7.0.2"
     uuid "^3.3.2"
 
-expo-constants@~14.2.0, expo-constants@~14.2.1:
-  version "14.2.1"
-  resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-14.2.1.tgz#b5b6b8079d2082c31ccf2cbc7cf97a0e83c229c3"
-  integrity sha512-DD5u4QmBds2U7uYo409apV7nX+XjudARcgqe7S9aRFJ/6kyftmuxvk1DpaU4X42Av8z/tfKwEpuxl+vl7HHx/Q==
-  dependencies:
-    "@expo/config" "~8.0.0"
-    uuid "^3.3.2"
-
 expo-error-recovery@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/expo-error-recovery/-/expo-error-recovery-4.0.1.tgz#3e3333e134c992c234539d3773fe78915c883755"
@@ -11435,13 +10463,6 @@ expo-file-system@~15.1.0, expo-file-system@~15.1.1:
   dependencies:
     uuid "^3.4.0"
 
-expo-file-system@~15.2.0, expo-file-system@~15.2.2:
-  version "15.2.2"
-  resolved "https://registry.yarnpkg.com/expo-file-system/-/expo-file-system-15.2.2.tgz#a1ddf8aabf794f93888a146c4f5187e2004683a3"
-  integrity sha512-LFkOLcWwlmnjkURxZ3/0ukS35OswX8iuQknLHRHeyk8mUA8fpRPPelD/a1lS+yclqfqavMJmTXVKM1Nsq5XVMA==
-  dependencies:
-    uuid "^3.4.0"
-
 expo-font@~11.0.1:
   version "11.0.1"
   resolved "https://registry.yarnpkg.com/expo-font/-/expo-font-11.0.1.tgz#0758ce4e505995d0193a33e3c4325b35bf1fb7f7"
@@ -11449,23 +10470,11 @@ expo-font@~11.0.1:
   dependencies:
     fontfaceobserver "^2.1.0"
 
-expo-font@~11.1.1:
-  version "11.1.1"
-  resolved "https://registry.yarnpkg.com/expo-font/-/expo-font-11.1.1.tgz#268eed407e94f6e88083c01b68c357d010748d23"
-  integrity sha512-X+aICqYY69hiiDDtcNrjq8KutHrH2TrHuMqk0Rfq0P7hF6hMd+YefwLBNkvIrqrgmTAuqiLjMUwj2rHLqmgluw==
-  dependencies:
-    fontfaceobserver "^2.1.0"
-
 expo-keep-awake@~11.0.1:
   version "11.0.1"
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-11.0.1.tgz#ee354465892a94040ffe09901b85b469e7d54fb3"
   integrity sha512-44ZjgLE4lnce2d40Pv8xsjMVc6R5GvgHOwZfkLYtGmgYG9TYrEJeEj5UfSeweXPL3pBFhXKfFU8xpGYMaHdP0A==
 
-expo-keep-awake@~12.0.1:
-  version "12.0.1"
-  resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-12.0.1.tgz#19c5ab55391394ded3f6c262b0707c7140658a11"
-  integrity sha512-hqeCnb4033TyuZaXs93zTK7rjVJ3bywXATyMmKmKkLEsH2PKBAl/VmjlCOPQL/2Ncqz6aj7Wo//tjeJTARBD4g==
-
 expo-linear-gradient@12.3.0, expo-linear-gradient@^12.3.0:
   version "12.3.0"
   resolved "https://registry.yarnpkg.com/expo-linear-gradient/-/expo-linear-gradient-12.3.0.tgz#7abd8fedbf0138c86805aebbdfbbf5e5fa865f19"
@@ -11482,17 +10491,6 @@ expo-modules-autolinking@1.0.2:
     find-up "^5.0.0"
     fs-extra "^9.1.0"
 
-expo-modules-autolinking@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/expo-modules-autolinking/-/expo-modules-autolinking-1.2.0.tgz#3ead115510a43fe196fc0498586b6133bd573209"
-  integrity sha512-QOPh/iXykNDCAzUual1imSrn2aDakzCGUp2QmxVREr0llajXygroUWlT9sQXh1zKzbNp+a+i/xK375ZeBFiNJA==
-  dependencies:
-    chalk "^4.1.0"
-    commander "^7.2.0"
-    fast-glob "^3.2.5"
-    find-up "^5.0.0"
-    fs-extra "^9.1.0"
-
 expo-modules-core@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/expo-modules-core/-/expo-modules-core-1.1.1.tgz#06502379274bdcb356fcbe225c3c6bc4926e462c"
@@ -11501,15 +10499,7 @@ expo-modules-core@1.1.1:
     compare-versions "^3.4.0"
     invariant "^2.2.4"
 
-expo-modules-core@1.2.7:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/expo-modules-core/-/expo-modules-core-1.2.7.tgz#c80627b13a8f1c94ae9da8eea41e1ef1df5788c8"
-  integrity sha512-sulqn2M8+tIdxi6QFkKppDEzbePAscgE2LEHocYoQOgHxJpeT7axE0Hkzc+81EeviQilZzGeFZMtNMGh3c9yJg==
-  dependencies:
-    compare-versions "^3.4.0"
-    invariant "^2.2.4"
-
-expo-status-bar@~1.4.2, expo-status-bar@~1.4.4:
+expo-status-bar@~1.4.2:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/expo-status-bar/-/expo-status-bar-1.4.4.tgz#6874ccfda5a270d66f123a9f220735a76692d114"
   integrity sha512-5DV0hIEWgatSC3UgQuAZBoQeaS9CqeWRZ3vzBR9R/+IUD87Adbi4FGhU10nymRqFXOizGsureButGZIXPs7zEA==
@@ -11544,34 +10534,6 @@ expo@^47.0.0:
   optionalDependencies:
     expo-error-recovery "~4.0.1"
 
-expo@~48.0.6:
-  version "48.0.19"
-  resolved "https://registry.yarnpkg.com/expo/-/expo-48.0.19.tgz#0f13be65d3cac99922666e5939388fc22b147e6a"
-  integrity sha512-Pmz2HEwcDdjWPq5fM3vF++je0hjZIBX9aTZEkm6sBv09Vfhe4+CuiuKDq3iE+N6G9l2+eFYoRCApDwLqcRMiPA==
-  dependencies:
-    "@babel/runtime" "^7.20.0"
-    "@expo/cli" "0.7.3"
-    "@expo/config" "8.0.2"
-    "@expo/config-plugins" "6.0.2"
-    "@expo/vector-icons" "^13.0.0"
-    babel-preset-expo "~9.3.2"
-    cross-spawn "^6.0.5"
-    expo-application "~5.1.1"
-    expo-asset "~8.9.1"
-    expo-constants "~14.2.1"
-    expo-file-system "~15.2.2"
-    expo-font "~11.1.1"
-    expo-keep-awake "~12.0.1"
-    expo-modules-autolinking "1.2.0"
-    expo-modules-core "1.2.7"
-    fbemitter "^3.0.0"
-    getenv "^1.0.0"
-    invariant "^2.2.4"
-    md5-file "^3.2.3"
-    node-fetch "^2.6.7"
-    pretty-format "^26.5.2"
-    uuid "^3.4.0"
-
 express@^4.17.1:
   version "4.18.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe08296e930c796c19e3c516979386ba9fd59"
@@ -11684,7 +10646,7 @@ fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
-fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.5, fast-glob@^3.2.9:
+fast-glob@^3.2.11, fast-glob@^3.2.5, fast-glob@^3.2.9:
   version "3.2.12"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
   integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
@@ -11958,20 +10920,20 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
+flow-enums-runtime@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/flow-enums-runtime/-/flow-enums-runtime-0.0.5.tgz#95884bfcc82edaf27eef7e1dd09732331cfbafbc"
+  integrity sha512-PSZF9ZuaZD03sT9YaIs0FrGJ7lSUw7rHZIex+73UYVXg46eL/wxN5PaVcPJFudE2cJu5f0fezitV5aBkLHPUOQ==
+
 flow-parser@0.*:
   version "0.209.1"
   resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.209.1.tgz#b3ea7566469113abc660b4833a38ae8c599f0719"
   integrity sha512-7YdhWfCsLRn31or7oK9M7Svd4WFk1qfj6VIFY/9S6HRyzBBiLlobNbUbitZHfdi0nhkik5S498UmF3phdzM6ug==
 
-flow-parser@^0.121.0:
-  version "0.121.0"
-  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.121.0.tgz#9f9898eaec91a9f7c323e9e992d81ab5c58e618f"
-  integrity sha512-1gIBiWJNR0tKUNv8gZuk7l9rVX06OuLzY9AoGio7y/JT4V1IZErEMEq2TJS+PFcw/y0RshZ1J/27VfK1UQzYVg==
-
-flow-parser@^0.185.0:
-  version "0.185.2"
-  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.185.2.tgz#cb7ee57f77377d6c5d69a469e980f6332a15e492"
-  integrity sha512-2hJ5ACYeJCzNtiVULov6pljKOLygy0zddoqSI1fFetM+XRPpRshFdGEijtqlamA1XwyZ+7rhryI6FQFzvtLWUQ==
+flow-parser@^0.206.0:
+  version "0.206.0"
+  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.206.0.tgz#f4f794f8026535278393308e01ea72f31000bfef"
+  integrity sha512-HVzoK3r6Vsg+lKvlIZzaWNBVai+FXTX1wdYhz/wVlH13tb/gOdLXmlTqy6odmTBhT5UoWUbq0k8263Qhr9d88w==
 
 flush-write-stream@^1.0.0:
   version "1.1.1"
@@ -12078,11 +11040,6 @@ forwarded@0.2.0:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
-fraction.js@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
-  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
-
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -12118,15 +11075,6 @@ fs-extra@9.0.0:
     jsonfile "^6.0.1"
     universalify "^1.0.0"
 
-fs-extra@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-1.0.0.tgz#cd3ce5f7e7cb6145883fcae3191e9877f8587950"
-  integrity sha512-VerQV6vEKuhDWD2HGOybV6v5I73syoc/cXAbKlgTC7M/oFVEtklWlp9QH2Ijw3IaWDOQcMkldSPa7zXy79Z/UQ==
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^2.1.0"
-    klaw "^1.0.0"
-
 fs-extra@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
@@ -12315,13 +11263,6 @@ get-symbol-description@^1.0.0:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
-get-tsconfig@^4.5.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.6.0.tgz#e977690993a42f3e320e932427502a40f7af6d05"
-  integrity sha512-lgbo68hHTQnFddybKbbs/RDRJnJT5YyGy2kQzVwbq+g67X73i+5MVTval34QxGkOe9X5Ujf1UYpCaphLyltjEg==
-  dependencies:
-    resolve-pkg-maps "^1.0.0"
-
 get-uri@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/get-uri/-/get-uri-6.0.1.tgz#cff2ba8d456c3513a04b70c45de4dbcca5b1527c"
@@ -12424,18 +11365,6 @@ glob@7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@7.1.7:
-  version "7.1.7"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
-  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 glob@^6.0.1:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
@@ -12534,17 +11463,6 @@ globby@^11.0.0, globby@^11.0.1, globby@^11.0.2, globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
-globby@^13.1.3:
-  version "13.2.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-13.2.0.tgz#7dd5678d765c4680c2e6d106230d86cb727cb1af"
-  integrity sha512-jWsQfayf13NvqKUIL3Ta+CIqMnvlaIDFveWE/dpOZ9+3AMEJozsxDvKA02zync9UuvOM8rOXzsD5GqKP4OnWPQ==
-  dependencies:
-    dir-glob "^3.0.1"
-    fast-glob "^3.2.11"
-    ignore "^5.2.0"
-    merge2 "^1.4.1"
-    slash "^4.0.0"
-
 globby@^9.2.0:
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-9.2.0.tgz#fd029a706c703d29bdd170f4b6db3a3f7a7cb63d"
@@ -12588,7 +11506,7 @@ graceful-fs@4.2.10:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.5, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.5, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -12816,17 +11734,17 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hermes-estree@0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.8.0.tgz#530be27243ca49f008381c1f3e8b18fb26bf9ec0"
-  integrity sha512-W6JDAOLZ5pMPMjEiQGLCXSSV7pIBEgRR5zGkxgmzGSXHOxqV5dC/M1Zevqpbm9TZDE5tu358qZf8Vkzmsc+u7Q==
+hermes-estree@0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.12.0.tgz#8a289f9aee854854422345e6995a48613bac2ca8"
+  integrity sha512-+e8xR6SCen0wyAKrMT3UD0ZCCLymKhRgjEB5sS28rKiFir/fXgLoeRilRUssFCILmGHb+OvHDUlhxs0+IEyvQw==
 
-hermes-parser@0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.8.0.tgz#116dceaba32e45b16d6aefb5c4c830eaeba2d257"
-  integrity sha512-yZKalg1fTYG5eOiToLUaw69rQfZq/fi+/NtEXRU7N87K/XobNRhRWorh80oSge2lWUiZfTgUvRJH+XgZWrhoqA==
+hermes-parser@0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.12.0.tgz#114dc26697cfb41a6302c215b859b74224383773"
+  integrity sha512-d4PHnwq6SnDLhYl3LHNHvOg7nQ6rcI7QVil418REYksv0Mh3cEkHDcuhGxNQ3vgnLSLl4QSvDrFCwQNYdpWlzw==
   dependencies:
-    hermes-estree "0.8.0"
+    hermes-estree "0.12.0"
 
 hermes-profile-transformer@^0.0.6:
   version "0.0.6"
@@ -13068,10 +11986,12 @@ ignore@^5.0.5, ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
-image-size@^0.6.0:
-  version "0.6.3"
-  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.3.tgz#e7e5c65bb534bd7cdcedd6cb5166272a85f75fb2"
-  integrity sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA==
+image-size@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-1.0.2.tgz#d778b6d0ab75b2737c1556dd631652eb963bc486"
+  integrity sha512-xfOoWjceHntRb3qFCrh5ZFORYH8XCdYpASltMhZ/Q0KZiOwjdE/Yl2QCiWdwD+lygV5bMCvauzgu5PxBX/Yerg==
+  dependencies:
+    queue "6.0.2"
 
 import-fresh@^2.0.0:
   version "2.0.0"
@@ -14079,16 +12999,16 @@ jest-environment-node@^29.2.1, jest-environment-node@^29.5.0:
     jest-mock "^29.5.0"
     jest-util "^29.5.0"
 
-jest-get-type@^26.3.0:
-  version "26.3.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
-  integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
-
 jest-get-type@^29.4.3:
   version "29.4.3"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.4.3.tgz#1ab7a5207c995161100b5187159ca82dd48b3dd5"
   integrity sha512-J5Xez4nRRMjk8emnTpWrlkyb9pfRQQanDrvWHhsR1+VUfbwxi30eVcZFlcdGInRibU4G5LwHXpI7IRHU0CY+gg==
 
+jest-get-type@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.6.3.tgz#36f499fdcea197c1045a127319c0481723908fd1"
+  integrity sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==
+
 jest-haste-map@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"
@@ -14287,14 +13207,6 @@ jest-serializer@^26.6.2:
     "@types/node" "*"
     graceful-fs "^4.2.4"
 
-jest-serializer@^27.0.6:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-27.5.1.tgz#81438410a30ea66fd57ff730835123dea1fb1f64"
-  integrity sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==
-  dependencies:
-    "@types/node" "*"
-    graceful-fs "^4.2.9"
-
 jest-snapshot@^29.5.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-29.5.0.tgz#c9c1ce0331e5b63cd444e2f95a55a73b84b1e8ce"
@@ -14360,17 +13272,17 @@ jest-util@^29.0.0, jest-util@^29.5.0:
     graceful-fs "^4.2.9"
     picomatch "^2.2.3"
 
-jest-validate@^26.5.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-26.6.2.tgz#23d380971587150467342911c3d7b4ac57ab20ec"
-  integrity sha512-NEYZ9Aeyj0i5rQqbq+tpIOom0YS1u2MVu6+euBsvpgIme+FOfRmoC4R5p0JiAUpaFvFy24xgrpMknarR/93XjQ==
+jest-validate@^29.2.1:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-29.7.0.tgz#7bf705511c64da591d46b15fce41400d52147d9c"
+  integrity sha512-ZB7wHqaRGVw/9hST/OuFUReG7M8vKeq0/J2egIGLdvjHCmYqGARhzXmtgi+gVeZ5uXFF219aOc3Ls2yLg27tkw==
   dependencies:
-    "@jest/types" "^26.6.2"
-    camelcase "^6.0.0"
+    "@jest/types" "^29.6.3"
+    camelcase "^6.2.0"
     chalk "^4.0.0"
-    jest-get-type "^26.3.0"
+    jest-get-type "^29.6.3"
     leven "^3.1.0"
-    pretty-format "^26.6.2"
+    pretty-format "^29.7.0"
 
 jest-validate@^29.5.0:
   version "29.5.0"
@@ -14446,11 +13358,6 @@ jimp-compact@0.16.1:
   resolved "https://registry.yarnpkg.com/jimp-compact/-/jimp-compact-0.16.1.tgz#9582aea06548a2c1e04dd148d7c3ab92075aefa3"
   integrity sha512-dZ6Ra7u1G8c4Letq/B5EzAxj4tLFHL+cGtdpR+PVm4yzPDj+lCk+AbivWt1eOM+ikzkowtyV7qSqX6qr3t71Ww==
 
-jiti@^1.17.2:
-  version "1.18.2"
-  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.18.2.tgz#80c3ef3d486ebf2450d9335122b32d121f2a83cd"
-  integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==
-
 joi@^17.2.1:
   version "17.9.2"
   resolved "https://registry.yarnpkg.com/joi/-/joi-17.9.2.tgz#8b2e4724188369f55451aebd1d0b1d9482470690"
@@ -14472,11 +13379,6 @@ jotai@^2.0.2:
   resolved "https://registry.yarnpkg.com/jotai/-/jotai-2.2.1.tgz#0a95b88c5f3ea4fd656b5f79af6f84e895f84f5a"
   integrity sha512-Gz4tpbRQy9OiFgBwF9F7TieDn0UTE3C0IFSDuxHjOIvgn2tACH30UKz6p/wIlfoZROXSTCIxEvYEa7Y25WM+8g==
 
-js-sdsl@^4.1.4:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.4.1.tgz#9e3c7b566d8d9a7e1fe8fc26d00b5ab0f8918ab3"
-  integrity sha512-6Gsx8R0RucyePbWqPssR8DyfuXmLBooYN5cZFZKjHGnQuaf7pEzhtpceagJxVu4LqhYY5EYA7nko3FmeHZ1KbA==
-
 js-string-escape@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
@@ -14502,11 +13404,6 @@ js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
-jsc-android@^250230.2.1:
-  version "250230.2.1"
-  resolved "https://registry.yarnpkg.com/jsc-android/-/jsc-android-250230.2.1.tgz#3790313a970586a03ab0ad47defbc84df54f1b83"
-  integrity sha512-KmxeBlRjwoqCnBBKGsihFtvsBHyUFlBxJPK4FzeYcIuBfdjv6jFys44JITAgSTbQD+vIdwMEfyZklsuQX0yI1Q==
-
 jsc-android@^250231.0.0:
   version "250231.0.0"
   resolved "https://registry.yarnpkg.com/jsc-android/-/jsc-android-250231.0.0.tgz#91720f8df382a108872fa4b3f558f33ba5e95262"
@@ -14517,10 +13414,10 @@ jsc-safe-url@^0.2.2:
   resolved "https://registry.yarnpkg.com/jsc-safe-url/-/jsc-safe-url-0.2.4.tgz#141c14fbb43791e88d5dc64e85a374575a83477a"
   integrity sha512-0wM3YBWtYePOjfyXQH5MWQ8H7sdk5EXSwZvmSLKk2RboVQ2Bu239jycHDz5J/8Blf3K0Qnoy2b6xD+z10MFB+Q==
 
-jscodeshift@^0.13.1:
-  version "0.13.1"
-  resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.13.1.tgz#69bfe51e54c831296380585c6d9e733512aecdef"
-  integrity sha512-lGyiEbGOvmMRKgWk4vf+lUrCWO/8YR8sUR3FKF1Cq5fovjZDlIcw3Hu5ppLHAnEXshVffvaM0eyuY/AbOeYpnQ==
+jscodeshift@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.14.0.tgz#7542e6715d6d2e8bde0b4e883f0ccea358b46881"
+  integrity sha512-7eCC1knD7bLUPuSCwXsMZUH51O8jIcoVyKtI6P0XM0IVzlGjckPy3FIwQlorzbN0Sg79oK+RlohN32Mqf/lrYA==
   dependencies:
     "@babel/core" "^7.13.16"
     "@babel/parser" "^7.13.16"
@@ -14535,10 +13432,10 @@ jscodeshift@^0.13.1:
     chalk "^4.1.2"
     flow-parser "0.*"
     graceful-fs "^4.2.4"
-    micromatch "^3.1.10"
+    micromatch "^4.0.4"
     neo-async "^2.5.0"
     node-dir "^0.1.17"
-    recast "^0.20.4"
+    recast "^0.21.0"
     temp "^0.8.4"
     write-file-atomic "^2.3.0"
 
@@ -14633,7 +13530,7 @@ json5@^0.5.1:
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
   integrity sha512-4xrs1aW+6N5DalkqSVA8fxh458CXvR99WU8WLKmq4v8eWAL86Xo3BVqyd3SkA9wEVjCMqyvvRRkshAdOnBp5rw==
 
-json5@^1.0.1, json5@^1.0.2:
+json5@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
   integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
@@ -14645,13 +13542,6 @@ json5@^2.1.2, json5@^2.2.1, json5@^2.2.2, json5@^2.2.3:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
-jsonfile@^2.1.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
-  integrity sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw==
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
@@ -14673,7 +13563,7 @@ jsonparse@^1.2.0:
   resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
   integrity sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==
 
-"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.3:
+"jsx-ast-utils@^2.4.1 || ^3.0.0":
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea"
   integrity sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==
@@ -14717,13 +13607,6 @@ kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
-klaw@^1.0.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
-  integrity sha512-TED5xi9gGQjGpNnvRWknrwAB1eL5GciPfVFOt3Vk1OJCVDQbzuSfrF3hkUQKlsgKrG1F+0t5W0m+Fje1jIt8rw==
-  optionalDependencies:
-    graceful-fs "^4.1.9"
-
 kleur@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
@@ -14739,18 +13622,6 @@ klona@^2.0.4:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.6.tgz#85bffbf819c03b2f53270412420a4555ef882e22"
   integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
 
-language-subtag-registry@~0.3.2:
-  version "0.3.22"
-  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
-  integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
-
-language-tags@=1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
-  integrity sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==
-  dependencies:
-    language-subtag-registry "~0.3.2"
-
 latest-version@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-7.0.0.tgz#843201591ea81a4d404932eeb61240fe04e9e5da"
@@ -14790,7 +13661,7 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-lilconfig@2.1.0, lilconfig@^2.0.5, lilconfig@^2.0.6:
+lilconfig@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
   integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
@@ -15368,290 +14239,100 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
 
-metro-babel-transformer@0.72.3:
-  version "0.72.3"
-  resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.72.3.tgz#2c60493a4eb7a8d20cc059f05e0e505dc1684d01"
-  integrity sha512-PTOR2zww0vJbWeeM3qN90WKENxCLzv9xrwWaNtwVlhcV8/diNdNe82sE1xIxLFI6OQuAVwNMv1Y7VsO2I7Ejrw==
-  dependencies:
-    "@babel/core" "^7.14.0"
-    hermes-parser "0.8.0"
-    metro-source-map "0.72.3"
-    nullthrows "^1.1.1"
-
-metro-babel-transformer@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.72.4.tgz#5149424896797980aa1758c8ef7c9a80f9d0f587"
-  integrity sha512-cg1TQUKDkKqrIClrqqIGE8ZDa9kRKSjhBtqPtNYt/ZSywXU41SrldfcI5uzPrzcIrYpH5hnN6OCLRACPgy2vsw==
-  dependencies:
-    "@babel/core" "^7.14.0"
-    hermes-parser "0.8.0"
-    metro-source-map "0.72.4"
-    nullthrows "^1.1.1"
-
-metro-babel-transformer@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.73.10.tgz#b27732fa3869f397246ee8ecf03b64622ab738c1"
-  integrity sha512-Yv2myTSnpzt/lTyurLvqYbBkytvUJcLHN8XD3t7W6rGiLTQPzmf1zypHQLphvcAXtCWBOXFtH7KLOSi2/qMg+A==
+metro-babel-transformer@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.76.8.tgz#5efd1027353b36b73706164ef09c290dceac096a"
+  integrity sha512-Hh6PW34Ug/nShlBGxkwQJSgPGAzSJ9FwQXhUImkzdsDgVu6zj5bx258J8cJVSandjNoQ8nbaHK6CaHlnbZKbyA==
   dependencies:
     "@babel/core" "^7.20.0"
-    hermes-parser "0.8.0"
-    metro-source-map "0.73.10"
+    hermes-parser "0.12.0"
     nullthrows "^1.1.1"
 
-metro-cache-key@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro-cache-key/-/metro-cache-key-0.72.4.tgz#f03d49214554b25968f04dc5e19dfe018cf9312b"
-  integrity sha512-DH3cgN4L7IKNCVBy8LBOXQ4tHDdvh7Vl7jWNkQKMOfHWu1EwsTtXD/+zdV7/be4ls/kHxrD0HbGzpK8XhUAHSw==
-
-metro-cache-key@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-cache-key/-/metro-cache-key-0.73.10.tgz#8d63591187d295b62a80aed64a87864b1e9d67a2"
-  integrity sha512-JMVDl/EREDiUW//cIcUzRjKSwE2AFxVWk47cFBer+KA4ohXIG2CQPEquT56hOw1Y1s6gKNxxs1OlAOEsubrFjw==
-
-metro-cache@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro-cache/-/metro-cache-0.72.4.tgz#e0ffb33dd044a7cf5897a09489088a413bfe7468"
-  integrity sha512-76fi9OVytiFVSuGQcNoquVOT7AENd0q3n1WmyBeJ7jvl/UrE3/NN3HTWzu2ezG5IxF3cmo5q1ehi0NEpgwaFGg==
-  dependencies:
-    metro-core "0.72.4"
-    rimraf "^2.5.4"
+metro-cache-key@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro-cache-key/-/metro-cache-key-0.76.8.tgz#8a0a5e991c06f56fcc584acadacb313c312bdc16"
+  integrity sha512-buKQ5xentPig9G6T37Ww/R/bC+/V1MA5xU/D8zjnhlelsrPG6w6LtHUS61ID3zZcMZqYaELWk5UIadIdDsaaLw==
 
-metro-cache@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-cache/-/metro-cache-0.73.10.tgz#02e9cb7c1e42aab5268d2ecce35ad8f2c08891de"
-  integrity sha512-wPGlQZpdVlM404m7MxJqJ+hTReDr5epvfPbt2LerUAHY9RN99w61FeeAe25BMZBwgUgDtAsfGlJ51MBHg8MAqw==
+metro-cache@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro-cache/-/metro-cache-0.76.8.tgz#296c1c189db2053b89735a8f33dbe82575f53661"
+  integrity sha512-QBJSJIVNH7Hc/Yo6br/U/qQDUpiUdRgZ2ZBJmvAbmAKp2XDzsapnMwK/3BGj8JNWJF7OLrqrYHsRsukSbUBpvQ==
   dependencies:
-    metro-core "0.73.10"
+    metro-core "0.76.8"
     rimraf "^3.0.2"
 
-metro-config@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro-config/-/metro-config-0.72.4.tgz#3ad42b3ca0037125d5615f4cb7e1c7ed9442bedd"
-  integrity sha512-USv+H14D5RrSpfA5t4t5cbF1CnizgYGz6xJ3HB0r/bDYdJdZTVqB3/mMPft7Z5zHslS00JCG7oE51G1CK/FlKw==
-  dependencies:
-    cosmiconfig "^5.0.5"
-    jest-validate "^26.5.2"
-    metro "0.72.4"
-    metro-cache "0.72.4"
-    metro-core "0.72.4"
-    metro-runtime "0.72.4"
-
-metro-config@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-config/-/metro-config-0.73.10.tgz#a9ec3d0a1290369e3f46c467a4c4f6dd43acc223"
-  integrity sha512-wIlybd1Z9I8K2KcStTiJxTB7OK529dxFgogNpKCTU/3DxkgAASqSkgXnZP6kVyqjh5EOWAKFe5U6IPic7kXDdQ==
+metro-config@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro-config/-/metro-config-0.76.8.tgz#20bd5397fcc6096f98d2a813a7cecb38b8af062d"
+  integrity sha512-SL1lfKB0qGHALcAk2zBqVgQZpazDYvYFGwCK1ikz0S6Y/CM2i2/HwuZN31kpX6z3mqjv/6KvlzaKoTb1otuSAA==
   dependencies:
+    connect "^3.6.5"
     cosmiconfig "^5.0.5"
-    jest-validate "^26.5.2"
-    metro "0.73.10"
-    metro-cache "0.73.10"
-    metro-core "0.73.10"
-    metro-runtime "0.73.10"
-
-metro-core@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro-core/-/metro-core-0.72.4.tgz#e4939aef4c50d953c44eee99a3c971d5162f1287"
-  integrity sha512-2JNT1nG0UV1uMrQHQOKUSII0sdS6MhVT3mBt2kwfjCvD+jvi1iYhKJ4kYCRlUQw9XNLGZ/B+C0VDQzlf2M3zVw==
-  dependencies:
-    lodash.throttle "^4.1.1"
-    metro-resolver "0.72.4"
+    jest-validate "^29.2.1"
+    metro "0.76.8"
+    metro-cache "0.76.8"
+    metro-core "0.76.8"
+    metro-runtime "0.76.8"
 
-metro-core@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-core/-/metro-core-0.73.10.tgz#feb3c228aa8c0dde71d8e4cef614cc3a1dc3bbd7"
-  integrity sha512-5uYkajIxKyL6W45iz/ftNnYPe1l92CvF2QJeon1CHsMXkEiOJxEjo41l+iSnO/YodBGrmMCyupSO4wOQGUc0lw==
+metro-core@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro-core/-/metro-core-0.76.8.tgz#917c8157c63406cb223522835abb8e7c6291dcad"
+  integrity sha512-sl2QLFI3d1b1XUUGxwzw/KbaXXU/bvFYrSKz6Sg19AdYGWFyzsgZ1VISRIDf+HWm4R/TJXluhWMEkEtZuqi3qA==
   dependencies:
     lodash.throttle "^4.1.1"
-    metro-resolver "0.73.10"
-
-metro-file-map@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro-file-map/-/metro-file-map-0.72.4.tgz#8a0c8a0e44d665af90dded2ac6e01baebff8552e"
-  integrity sha512-Mv5WgTsYs5svTR/df6jhq2aD4IkAuwV5TutHW0BfEg1YccQt8/v7q5ZypmUOkjdSS9bFR4r3677jalr/ceFypQ==
-  dependencies:
-    abort-controller "^3.0.0"
-    anymatch "^3.0.3"
-    debug "^2.2.0"
-    fb-watchman "^2.0.0"
-    graceful-fs "^4.2.4"
-    invariant "^2.2.4"
-    jest-regex-util "^27.0.6"
-    jest-serializer "^27.0.6"
-    jest-util "^27.2.0"
-    jest-worker "^27.2.0"
-    micromatch "^4.0.4"
-    walker "^1.0.7"
-  optionalDependencies:
-    fsevents "^2.1.2"
+    metro-resolver "0.76.8"
 
-metro-file-map@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-file-map/-/metro-file-map-0.73.10.tgz#55bd906fb7c1bef8e1a31df4b29a3ef4b49f0b5a"
-  integrity sha512-XOMWAybeaXyD6zmVZPnoCCL2oO3rp4ta76oUlqWP0skBzhFxVtkE/UtDwApEMUY361JeBBago647gnKiARs+1g==
+metro-file-map@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro-file-map/-/metro-file-map-0.76.8.tgz#a1db1185b6c316904ba6b53d628e5d1323991d79"
+  integrity sha512-A/xP1YNEVwO1SUV9/YYo6/Y1MmzhL4ZnVgcJC3VmHp/BYVOXVStzgVbWv2wILe56IIMkfXU+jpXrGKKYhFyHVw==
   dependencies:
-    abort-controller "^3.0.0"
     anymatch "^3.0.3"
     debug "^2.2.0"
     fb-watchman "^2.0.0"
     graceful-fs "^4.2.4"
     invariant "^2.2.4"
     jest-regex-util "^27.0.6"
-    jest-serializer "^27.0.6"
     jest-util "^27.2.0"
     jest-worker "^27.2.0"
     micromatch "^4.0.4"
+    node-abort-controller "^3.1.1"
     nullthrows "^1.1.1"
     walker "^1.0.7"
   optionalDependencies:
     fsevents "^2.3.2"
 
-metro-hermes-compiler@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro-hermes-compiler/-/metro-hermes-compiler-0.72.4.tgz#06c946d74720d5132fa1690df0610ba367d3436c"
-  integrity sha512-AY1mAT5FKfDRYCthuKo2XHbuhG5TUV4ZpZlJ8peIgkiWICzfy0tau3yu+3jUD456N90CjMCOmdknji4uKiZ8ww==
-
-metro-hermes-compiler@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-hermes-compiler/-/metro-hermes-compiler-0.73.10.tgz#4525a7835c803a5d0b3b05c6619202e2273d630f"
-  integrity sha512-rTRWEzkVrwtQLiYkOXhSdsKkIObnL+Jqo+IXHI7VEK2aSLWRAbtGNqECBs44kbOUypDYTFFE+WLtoqvUWqYkWg==
-
-metro-inspector-proxy@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro-inspector-proxy/-/metro-inspector-proxy-0.72.4.tgz#347e9634b6204c38117292edfb11eb2df71c09ad"
-  integrity sha512-pr+PsbNCZaStWuJRH8oclT170B7NxfgH+UUyTf9/aR+7PjX0gdDabJhPyzA633QgR+EFBaQKZuetHA+f5/cnEQ==
-  dependencies:
-    connect "^3.6.5"
-    debug "^2.2.0"
-    ws "^7.5.1"
-    yargs "^15.3.1"
-
-metro-inspector-proxy@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-inspector-proxy/-/metro-inspector-proxy-0.73.10.tgz#752fed2ab88199c9dcc3369c3d59da6c5b954a51"
-  integrity sha512-CEEvocYc5xCCZBtGSIggMCiRiXTrnBbh8pmjKQqm9TtJZALeOGyt5pXUaEkKGnhrXETrexsg6yIbsQHhEvVfvQ==
+metro-inspector-proxy@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro-inspector-proxy/-/metro-inspector-proxy-0.76.8.tgz#6b8678a7461b0b42f913a7881cc9319b4d3cddff"
+  integrity sha512-Us5o5UEd4Smgn1+TfHX4LvVPoWVo9VsVMn4Ldbk0g5CQx3Gu0ygc/ei2AKPGTwsOZmKxJeACj7yMH2kgxQP/iw==
   dependencies:
     connect "^3.6.5"
     debug "^2.2.0"
+    node-fetch "^2.2.0"
     ws "^7.5.1"
-    yargs "^17.5.1"
-
-metro-minify-terser@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-minify-terser/-/metro-minify-terser-0.73.10.tgz#557eab3a512b90b7779350ff5d25a215c4dbe61f"
-  integrity sha512-uG7TSKQ/i0p9kM1qXrwbmY3v+6BrMItsOcEXcSP8Z+68bb+t9HeVK0T/hIfUu1v1PEnonhkhfzVsaP8QyTd5lQ==
-  dependencies:
-    terser "^5.15.0"
-
-metro-minify-uglify@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro-minify-uglify/-/metro-minify-uglify-0.72.4.tgz#b4504adc17f093173c0e5d44df32ac9e13f50a88"
-  integrity sha512-84Rrgie3O7Dqkak9ep/eIpMZkEFzpKD4bngPUNimYqAMCExKL7/aymydB27gKcqwus/BVkAV+aOnFsuOhlgnQg==
-  dependencies:
-    uglify-es "^3.1.9"
-
-metro-minify-uglify@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-minify-uglify/-/metro-minify-uglify-0.73.10.tgz#4de79056d502479733854c90f2075374353ea154"
-  integrity sha512-eocnSeJKnLz/UoYntVFhCJffED7SLSgbCHgNvI6ju6hFb6EFHGJT9OLbkJWeXaWBWD3Zw5mYLS8GGqGn/CHZPA==
-  dependencies:
-    uglify-es "^3.1.9"
-
-metro-react-native-babel-preset@0.72.3:
-  version "0.72.3"
-  resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.72.3.tgz#e549199fa310fef34364fdf19bd210afd0c89432"
-  integrity sha512-uJx9y/1NIqoYTp6ZW1osJ7U5ZrXGAJbOQ/Qzl05BdGYvN1S7Qmbzid6xOirgK0EIT0pJKEEh1s8qbassYZe4cw==
-  dependencies:
-    "@babel/core" "^7.14.0"
-    "@babel/plugin-proposal-async-generator-functions" "^7.0.0"
-    "@babel/plugin-proposal-class-properties" "^7.0.0"
-    "@babel/plugin-proposal-export-default-from" "^7.0.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
-    "@babel/plugin-proposal-optional-chaining" "^7.0.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.0.0"
-    "@babel/plugin-syntax-export-default-from" "^7.0.0"
-    "@babel/plugin-syntax-flow" "^7.2.0"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.0.0"
-    "@babel/plugin-syntax-optional-chaining" "^7.0.0"
-    "@babel/plugin-transform-arrow-functions" "^7.0.0"
-    "@babel/plugin-transform-async-to-generator" "^7.0.0"
-    "@babel/plugin-transform-block-scoping" "^7.0.0"
-    "@babel/plugin-transform-classes" "^7.0.0"
-    "@babel/plugin-transform-computed-properties" "^7.0.0"
-    "@babel/plugin-transform-destructuring" "^7.0.0"
-    "@babel/plugin-transform-exponentiation-operator" "^7.0.0"
-    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
-    "@babel/plugin-transform-function-name" "^7.0.0"
-    "@babel/plugin-transform-literals" "^7.0.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.0.0"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.0.0"
-    "@babel/plugin-transform-parameters" "^7.0.0"
-    "@babel/plugin-transform-react-display-name" "^7.0.0"
-    "@babel/plugin-transform-react-jsx" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-self" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
-    "@babel/plugin-transform-runtime" "^7.0.0"
-    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
-    "@babel/plugin-transform-spread" "^7.0.0"
-    "@babel/plugin-transform-sticky-regex" "^7.0.0"
-    "@babel/plugin-transform-template-literals" "^7.0.0"
-    "@babel/plugin-transform-typescript" "^7.5.0"
-    "@babel/plugin-transform-unicode-regex" "^7.0.0"
-    "@babel/template" "^7.0.0"
-    react-refresh "^0.4.0"
+    yargs "^17.6.2"
 
-metro-react-native-babel-preset@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.72.4.tgz#2b320772d2489d1fb3a6413fc58dad13a56eea0e"
-  integrity sha512-YGCVaYe1H5fOFktdDdL9IwAyiXjPh1t2eZZFp3KFJak6fxKpN+q5PPhe1kzMa77dbCAqgImv43zkfGa6i27eyA==
-  dependencies:
-    "@babel/core" "^7.14.0"
-    "@babel/plugin-proposal-async-generator-functions" "^7.0.0"
-    "@babel/plugin-proposal-class-properties" "^7.0.0"
-    "@babel/plugin-proposal-export-default-from" "^7.0.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
-    "@babel/plugin-proposal-optional-chaining" "^7.0.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.0.0"
-    "@babel/plugin-syntax-export-default-from" "^7.0.0"
-    "@babel/plugin-syntax-flow" "^7.2.0"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.0.0"
-    "@babel/plugin-syntax-optional-chaining" "^7.0.0"
-    "@babel/plugin-transform-arrow-functions" "^7.0.0"
-    "@babel/plugin-transform-async-to-generator" "^7.0.0"
-    "@babel/plugin-transform-block-scoping" "^7.0.0"
-    "@babel/plugin-transform-classes" "^7.0.0"
-    "@babel/plugin-transform-computed-properties" "^7.0.0"
-    "@babel/plugin-transform-destructuring" "^7.0.0"
-    "@babel/plugin-transform-exponentiation-operator" "^7.0.0"
-    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
-    "@babel/plugin-transform-function-name" "^7.0.0"
-    "@babel/plugin-transform-literals" "^7.0.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.0.0"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.0.0"
-    "@babel/plugin-transform-parameters" "^7.0.0"
-    "@babel/plugin-transform-react-display-name" "^7.0.0"
-    "@babel/plugin-transform-react-jsx" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-self" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
-    "@babel/plugin-transform-runtime" "^7.0.0"
-    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
-    "@babel/plugin-transform-spread" "^7.0.0"
-    "@babel/plugin-transform-sticky-regex" "^7.0.0"
-    "@babel/plugin-transform-template-literals" "^7.0.0"
-    "@babel/plugin-transform-typescript" "^7.5.0"
-    "@babel/plugin-transform-unicode-regex" "^7.0.0"
-    "@babel/template" "^7.0.0"
-    react-refresh "^0.4.0"
+metro-minify-terser@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro-minify-terser/-/metro-minify-terser-0.76.8.tgz#915ab4d1419257fc6a0b9fa15827b83fe69814bf"
+  integrity sha512-Orbvg18qXHCrSj1KbaeSDVYRy/gkro2PC7Fy2tDSH1c9RB4aH8tuMOIXnKJE+1SXxBtjWmQ5Yirwkth2DyyEZA==
+  dependencies:
+    terser "^5.15.0"
 
-metro-react-native-babel-preset@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.73.10.tgz#304b24bb391537d2c987732cc0a9774be227d3f6"
-  integrity sha512-1/dnH4EHwFb2RKEKx34vVDpUS3urt2WEeR8FYim+ogqALg4sTpG7yeQPxWpbgKATezt4rNfqAANpIyH19MS4BQ==
+metro-minify-uglify@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro-minify-uglify/-/metro-minify-uglify-0.76.8.tgz#74745045ea2dd29f8783db483b2fce58385ba695"
+  integrity sha512-6l8/bEvtVaTSuhG1FqS0+Mc8lZ3Bl4RI8SeRIifVLC21eeSDp4CEBUWSGjpFyUDfi6R5dXzYaFnSgMNyfxADiQ==
   dependencies:
-    "@babel/core" "^7.20.0"
+    uglify-es "^3.1.9"
+
+metro-react-native-babel-preset@0.72.3:
+  version "0.72.3"
+  resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.72.3.tgz#e549199fa310fef34364fdf19bd210afd0c89432"
+  integrity sha512-uJx9y/1NIqoYTp6ZW1osJ7U5ZrXGAJbOQ/Qzl05BdGYvN1S7Qmbzid6xOirgK0EIT0pJKEEh1s8qbassYZe4cw==
+  dependencies:
+    "@babel/core" "^7.14.0"
     "@babel/plugin-proposal-async-generator-functions" "^7.0.0"
     "@babel/plugin-proposal-class-properties" "^7.0.0"
     "@babel/plugin-proposal-export-default-from" "^7.0.0"
@@ -15661,7 +14342,7 @@ metro-react-native-babel-preset@0.73.10:
     "@babel/plugin-proposal-optional-chaining" "^7.0.0"
     "@babel/plugin-syntax-dynamic-import" "^7.0.0"
     "@babel/plugin-syntax-export-default-from" "^7.0.0"
-    "@babel/plugin-syntax-flow" "^7.18.0"
+    "@babel/plugin-syntax-flow" "^7.2.0"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.0.0"
     "@babel/plugin-syntax-optional-chaining" "^7.0.0"
     "@babel/plugin-transform-arrow-functions" "^7.0.0"
@@ -15670,6 +14351,7 @@ metro-react-native-babel-preset@0.73.10:
     "@babel/plugin-transform-classes" "^7.0.0"
     "@babel/plugin-transform-computed-properties" "^7.0.0"
     "@babel/plugin-transform-destructuring" "^7.0.0"
+    "@babel/plugin-transform-exponentiation-operator" "^7.0.0"
     "@babel/plugin-transform-flow-strip-types" "^7.0.0"
     "@babel/plugin-transform-function-name" "^7.0.0"
     "@babel/plugin-transform-literals" "^7.0.0"
@@ -15690,31 +14372,32 @@ metro-react-native-babel-preset@0.73.10:
     "@babel/template" "^7.0.0"
     react-refresh "^0.4.0"
 
-metro-react-native-babel-preset@0.73.9:
-  version "0.73.9"
-  resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.73.9.tgz#ef54637dd20f025197beb49e71309a9c539e73e2"
-  integrity sha512-AoD7v132iYDV4K78yN2OLgTPwtAKn0XlD2pOhzyBxiI8PeXzozhbKyPV7zUOJUPETj+pcEVfuYj5ZN/8+bhbCw==
+metro-react-native-babel-preset@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.76.8.tgz#7476efae14363cbdfeeec403b4f01d7348e6c048"
+  integrity sha512-Ptza08GgqzxEdK8apYsjTx2S8WDUlS2ilBlu9DR1CUcHmg4g3kOkFylZroogVAUKtpYQNYwAvdsjmrSdDNtiAg==
   dependencies:
     "@babel/core" "^7.20.0"
     "@babel/plugin-proposal-async-generator-functions" "^7.0.0"
-    "@babel/plugin-proposal-class-properties" "^7.0.0"
+    "@babel/plugin-proposal-class-properties" "^7.18.0"
     "@babel/plugin-proposal-export-default-from" "^7.0.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.0"
+    "@babel/plugin-proposal-numeric-separator" "^7.0.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.20.0"
     "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
-    "@babel/plugin-proposal-optional-chaining" "^7.0.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.0.0"
+    "@babel/plugin-proposal-optional-chaining" "^7.20.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
     "@babel/plugin-syntax-export-default-from" "^7.0.0"
     "@babel/plugin-syntax-flow" "^7.18.0"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.0.0"
     "@babel/plugin-syntax-optional-chaining" "^7.0.0"
     "@babel/plugin-transform-arrow-functions" "^7.0.0"
-    "@babel/plugin-transform-async-to-generator" "^7.0.0"
+    "@babel/plugin-transform-async-to-generator" "^7.20.0"
     "@babel/plugin-transform-block-scoping" "^7.0.0"
     "@babel/plugin-transform-classes" "^7.0.0"
     "@babel/plugin-transform-computed-properties" "^7.0.0"
-    "@babel/plugin-transform-destructuring" "^7.0.0"
-    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
+    "@babel/plugin-transform-destructuring" "^7.20.0"
+    "@babel/plugin-transform-flow-strip-types" "^7.20.0"
     "@babel/plugin-transform-function-name" "^7.0.0"
     "@babel/plugin-transform-literals" "^7.0.0"
     "@babel/plugin-transform-modules-commonjs" "^7.0.0"
@@ -15728,182 +14411,66 @@ metro-react-native-babel-preset@0.73.9:
     "@babel/plugin-transform-shorthand-properties" "^7.0.0"
     "@babel/plugin-transform-spread" "^7.0.0"
     "@babel/plugin-transform-sticky-regex" "^7.0.0"
-    "@babel/plugin-transform-template-literals" "^7.0.0"
     "@babel/plugin-transform-typescript" "^7.5.0"
     "@babel/plugin-transform-unicode-regex" "^7.0.0"
     "@babel/template" "^7.0.0"
+    babel-plugin-transform-flow-enums "^0.0.2"
     react-refresh "^0.4.0"
 
-metro-react-native-babel-transformer@0.72.3:
-  version "0.72.3"
-  resolved "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.72.3.tgz#f8eda8c07c0082cbdbef47a3293edc41587c6b5a"
-  integrity sha512-Ogst/M6ujYrl/+9mpEWqE3zF7l2mTuftDTy3L8wZYwX1pWUQWQpfU1aJBeWiLxt1XlIq+uriRjKzKoRoIK57EA==
-  dependencies:
-    "@babel/core" "^7.14.0"
-    babel-preset-fbjs "^3.4.0"
-    hermes-parser "0.8.0"
-    metro-babel-transformer "0.72.3"
-    metro-react-native-babel-preset "0.72.3"
-    metro-source-map "0.72.3"
-    nullthrows "^1.1.1"
-
-metro-react-native-babel-transformer@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.72.4.tgz#c1a38bf28513374dbb0fce45b4017d8abfe4a071"
-  integrity sha512-VxM8Cki+/tPAyQRPHEy1bsxAihpxz8cGLdteFo9t0eAJI7/vEegqICxQm4A+RiGQc4f8t2jiwI6YpnDWomI5Gw==
-  dependencies:
-    "@babel/core" "^7.14.0"
-    babel-preset-fbjs "^3.4.0"
-    hermes-parser "0.8.0"
-    metro-babel-transformer "0.72.4"
-    metro-react-native-babel-preset "0.72.4"
-    metro-source-map "0.72.4"
-    nullthrows "^1.1.1"
-
-metro-react-native-babel-transformer@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.73.10.tgz#4e20a9ce131b873cda0b5a44d3eb4002134a64b8"
-  integrity sha512-4G/upwqKdmKEjmsNa92/NEgsOxUWOygBVs+FXWfXWKgybrmcjh3NoqdRYrROo9ZRA/sB9Y/ZXKVkWOGKHtGzgg==
+metro-react-native-babel-transformer@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.76.8.tgz#c3a98e1f4cd5faf1e21eba8e004b94a90c4db69b"
+  integrity sha512-3h+LfS1WG1PAzhq8QF0kfXjxuXetbY/lgz8vYMQhgrMMp17WM1DNJD0gjx8tOGYbpbBC1qesJ45KMS4o5TA73A==
   dependencies:
     "@babel/core" "^7.20.0"
     babel-preset-fbjs "^3.4.0"
-    hermes-parser "0.8.0"
-    metro-babel-transformer "0.73.10"
-    metro-react-native-babel-preset "0.73.10"
-    metro-source-map "0.73.10"
+    hermes-parser "0.12.0"
+    metro-react-native-babel-preset "0.76.8"
     nullthrows "^1.1.1"
 
-metro-resolver@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro-resolver/-/metro-resolver-0.72.4.tgz#37893ff72273a2b7ea529564caa15fe2e2337267"
-  integrity sha512-aHxq/jypzGyi9Ic9woe//RymfxpzWliAkyTmBWPHE9ypGoiobstK0me2j5XuSfzASzCU8wcVt20qy870rxTWLw==
-  dependencies:
-    absolute-path "^0.0.0"
-
-metro-resolver@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-resolver/-/metro-resolver-0.73.10.tgz#c39a3bd8d33e5d78cb256110d29707d8d49ed0be"
-  integrity sha512-HeXbs+0wjakaaVQ5BI7eT7uqxlZTc9rnyw6cdBWWMgUWB++KpoI0Ge7Hi6eQAOoVAzXC3m26mPFYLejpzTWjng==
-  dependencies:
-    absolute-path "^0.0.0"
-
-metro-runtime@0.72.3:
-  version "0.72.3"
-  resolved "https://registry.yarnpkg.com/metro-runtime/-/metro-runtime-0.72.3.tgz#1485ed7b5f06d09ebb40c83efcf8accc8d30b8b9"
-  integrity sha512-3MhvDKfxMg2u7dmTdpFOfdR71NgNNo4tzAyJumDVQKwnHYHN44f2QFZQqpPBEmqhWlojNeOxsqFsjYgeyMx6VA==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    react-refresh "^0.4.0"
-
-metro-runtime@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro-runtime/-/metro-runtime-0.72.4.tgz#b3469fd040a9526bfd897c0517c5f052a059ddeb"
-  integrity sha512-EA0ltqyYFpjOdpoRqE2U9FJleqTOIK+ZLRlLaDrx4yz3zTqUZ16W6w71dq+qrwD8BPg7bPKQu7RluU3K6tI79A==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    react-refresh "^0.4.0"
+metro-resolver@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro-resolver/-/metro-resolver-0.76.8.tgz#0862755b9b84e26853978322464fb37c6fdad76d"
+  integrity sha512-KccOqc10vrzS7ZhG2NSnL2dh3uVydarB7nOhjreQ7C4zyWuiW9XpLC4h47KtGQv3Rnv/NDLJYeDqaJ4/+140HQ==
 
-metro-runtime@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-runtime/-/metro-runtime-0.73.10.tgz#c3de19d17e75ffe1a145778d99422e7ffc208768"
-  integrity sha512-EpVKm4eN0Fgx2PEWpJ5NiMArV8zVoOin866jIIvzFLpmkZz1UEqgjf2JAfUJnjgv3fjSV3JqeGG2vZCaGQBTow==
+metro-runtime@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro-runtime/-/metro-runtime-0.76.8.tgz#74b2d301a2be5f3bbde91b8f1312106f8ffe50c3"
+  integrity sha512-XKahvB+iuYJSCr3QqCpROli4B4zASAYpkK+j3a0CJmokxCDNbgyI4Fp88uIL6rNaZfN0Mv35S0b99SdFXIfHjg==
   dependencies:
     "@babel/runtime" "^7.0.0"
     react-refresh "^0.4.0"
 
-metro-source-map@0.72.3:
-  version "0.72.3"
-  resolved "https://registry.yarnpkg.com/metro-source-map/-/metro-source-map-0.72.3.tgz#5efcf354413804a62ff97864e797f60ef3cc689e"
-  integrity sha512-eNtpjbjxSheXu/jYCIDrbNEKzMGOvYW6/ePYpRM7gDdEagUOqKOCsi3St8NJIQJzZCsxD2JZ2pYOiomUSkT1yQ==
-  dependencies:
-    "@babel/traverse" "^7.14.0"
-    "@babel/types" "^7.0.0"
-    invariant "^2.2.4"
-    metro-symbolicate "0.72.3"
-    nullthrows "^1.1.1"
-    ob1 "0.72.3"
-    source-map "^0.5.6"
-    vlq "^1.0.0"
-
-metro-source-map@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro-source-map/-/metro-source-map-0.72.4.tgz#3c6444bba22b84d7d7e383f784a1d59e724192de"
-  integrity sha512-P09aMDEPkLo6BM8VYYoTsH/2B1w6t+mrCwNcNJV1zE+57FPiU4fSBlSeM8G9YeYaezDTHimS2JlMozP+2r+trA==
-  dependencies:
-    "@babel/traverse" "^7.14.0"
-    "@babel/types" "^7.0.0"
-    invariant "^2.2.4"
-    metro-symbolicate "0.72.4"
-    nullthrows "^1.1.1"
-    ob1 "0.72.4"
-    source-map "^0.5.6"
-    vlq "^1.0.0"
-
-metro-source-map@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-source-map/-/metro-source-map-0.73.10.tgz#28e09a28f1a2f7a4f8d0845b845cbed74e2f48f9"
-  integrity sha512-NAGv14701p/YaFZ76KzyPkacBw/QlEJF1f8elfs23N1tC33YyKLDKvPAzFJiYqjdcFvuuuDCA8JCXd2TgLxNPw==
+metro-source-map@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro-source-map/-/metro-source-map-0.76.8.tgz#f085800152a6ba0b41ca26833874d31ec36c5a53"
+  integrity sha512-Hh0ncPsHPVf6wXQSqJqB3K9Zbudht4aUtNpNXYXSxH+pteWqGAXnjtPsRAnCsCWl38wL0jYF0rJDdMajUI3BDw==
   dependencies:
     "@babel/traverse" "^7.20.0"
     "@babel/types" "^7.20.0"
     invariant "^2.2.4"
-    metro-symbolicate "0.73.10"
-    nullthrows "^1.1.1"
-    ob1 "0.73.10"
-    source-map "^0.5.6"
-    vlq "^1.0.0"
-
-metro-symbolicate@0.72.3:
-  version "0.72.3"
-  resolved "https://registry.yarnpkg.com/metro-symbolicate/-/metro-symbolicate-0.72.3.tgz#093d4f8c7957bcad9ca2ab2047caa90b1ee1b0c1"
-  integrity sha512-eXG0NX2PJzJ/jTG4q5yyYeN2dr1cUqUaY7worBB0SP5bRWRc3besfb+rXwfh49wTFiL5qR0oOawkU4ZiD4eHXw==
-  dependencies:
-    invariant "^2.2.4"
-    metro-source-map "0.72.3"
-    nullthrows "^1.1.1"
-    source-map "^0.5.6"
-    through2 "^2.0.1"
-    vlq "^1.0.0"
-
-metro-symbolicate@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro-symbolicate/-/metro-symbolicate-0.72.4.tgz#3be7c9d1f382fc58198efcb515f2de0ec3fc4181"
-  integrity sha512-6ZRo66Q4iKiwaQuHjmogkSCCqaSpJ4QzbHsVHRUe57mFIL34lOLYp7aPfmX7NHCmy061HhDox/kGuYZQRmHB3A==
-  dependencies:
-    invariant "^2.2.4"
-    metro-source-map "0.72.4"
+    metro-symbolicate "0.76.8"
     nullthrows "^1.1.1"
+    ob1 "0.76.8"
     source-map "^0.5.6"
-    through2 "^2.0.1"
     vlq "^1.0.0"
 
-metro-symbolicate@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-symbolicate/-/metro-symbolicate-0.73.10.tgz#7853a9a8fbfd615a5c9db698fffc685441ac880f"
-  integrity sha512-PmCe3TOe1c/NVwMlB+B17me951kfkB3Wve5RqJn+ErPAj93od1nxicp6OJe7JT4QBRnpUP8p9tw2sHKqceIzkA==
+metro-symbolicate@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro-symbolicate/-/metro-symbolicate-0.76.8.tgz#f102ac1a306d51597ecc8fdf961c0a88bddbca03"
+  integrity sha512-LrRL3uy2VkzrIXVlxoPtqb40J6Bf1mlPNmUQewipc3qfKKFgtPHBackqDy1YL0njDsWopCKcfGtFYLn0PTUn3w==
   dependencies:
     invariant "^2.2.4"
-    metro-source-map "0.73.10"
+    metro-source-map "0.76.8"
     nullthrows "^1.1.1"
     source-map "^0.5.6"
     through2 "^2.0.1"
     vlq "^1.0.0"
 
-metro-transform-plugins@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro-transform-plugins/-/metro-transform-plugins-0.72.4.tgz#01e95aa277216fb0887610067125fac9271d399e"
-  integrity sha512-yxB4v/LxQkmN1rjyyeLiV4x+jwCmId4FTTxNrmTYoi0tFPtOBOeSwuqY08LjxZQMJdZOKXqj2bgIewqFXJEkGw==
-  dependencies:
-    "@babel/core" "^7.14.0"
-    "@babel/generator" "^7.14.0"
-    "@babel/template" "^7.0.0"
-    "@babel/traverse" "^7.14.0"
-    nullthrows "^1.1.1"
-
-metro-transform-plugins@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-transform-plugins/-/metro-transform-plugins-0.73.10.tgz#1b762330cbbedb6c18438edc3d76b063c88882af"
-  integrity sha512-D4AgD3Vsrac+4YksaPmxs/0ocT67bvwTkFSIgWWeDvWwIG0U1iHzTS9f8Bvb4PITnXryDoFtjI6OWF7uOpGxpA==
+metro-transform-plugins@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro-transform-plugins/-/metro-transform-plugins-0.76.8.tgz#d77c28a6547a8e3b72250f740fcfbd7f5408f8ba"
+  integrity sha512-PlkGTQNqS51Bx4vuufSQCdSn2R2rt7korzngo+b5GCkeX5pjinPjnO2kNhQ8l+5bO0iUD/WZ9nsM2PGGKIkWFA==
   dependencies:
     "@babel/core" "^7.20.0"
     "@babel/generator" "^7.20.0"
@@ -15911,105 +14478,28 @@ metro-transform-plugins@0.73.10:
     "@babel/traverse" "^7.20.0"
     nullthrows "^1.1.1"
 
-metro-transform-worker@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro-transform-worker/-/metro-transform-worker-0.72.4.tgz#356903c343dc62373b928b4325ad09a103398cc5"
-  integrity sha512-mIvzy6nRQKMALEdF5g8LXPgCOUi/tGESE5dlb7OSMCj2FAFBm3mTLRrpW5phzK/J6Wg+4Vb9PMS+wGbXR261rA==
-  dependencies:
-    "@babel/core" "^7.14.0"
-    "@babel/generator" "^7.14.0"
-    "@babel/parser" "^7.14.0"
-    "@babel/types" "^7.0.0"
-    babel-preset-fbjs "^3.4.0"
-    metro "0.72.4"
-    metro-babel-transformer "0.72.4"
-    metro-cache "0.72.4"
-    metro-cache-key "0.72.4"
-    metro-hermes-compiler "0.72.4"
-    metro-source-map "0.72.4"
-    metro-transform-plugins "0.72.4"
-    nullthrows "^1.1.1"
-
-metro-transform-worker@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro-transform-worker/-/metro-transform-worker-0.73.10.tgz#bb401dbd7b10a6fe443a5f7970cba38425efece0"
-  integrity sha512-IySvVubudFxahxOljWtP0QIMMpgUrCP0bW16cz2Enof0PdumwmR7uU3dTbNq6S+XTzuMHR+076aIe4VhPAWsIQ==
+metro-transform-worker@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro-transform-worker/-/metro-transform-worker-0.76.8.tgz#b9012a196cee205170d0c899b8b175b9305acdea"
+  integrity sha512-mE1fxVAnJKmwwJyDtThildxxos9+DGs9+vTrx2ktSFMEVTtXS/bIv2W6hux1pqivqAfyJpTeACXHk5u2DgGvIQ==
   dependencies:
     "@babel/core" "^7.20.0"
     "@babel/generator" "^7.20.0"
     "@babel/parser" "^7.20.0"
     "@babel/types" "^7.20.0"
     babel-preset-fbjs "^3.4.0"
-    metro "0.73.10"
-    metro-babel-transformer "0.73.10"
-    metro-cache "0.73.10"
-    metro-cache-key "0.73.10"
-    metro-hermes-compiler "0.73.10"
-    metro-source-map "0.73.10"
-    metro-transform-plugins "0.73.10"
-    nullthrows "^1.1.1"
-
-metro@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/metro/-/metro-0.72.4.tgz#fdfc43b3329388b5a3e8856727403f93a8c05250"
-  integrity sha512-UBqL2fswJjsq2LlfMPV4ArqzLzjyN0nReKRijP3DdSxZiaJDG4NC9sQoVJHbH1HP5qXQMAK/SftyAx1c1kuy+w==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/core" "^7.14.0"
-    "@babel/generator" "^7.14.0"
-    "@babel/parser" "^7.14.0"
-    "@babel/template" "^7.0.0"
-    "@babel/traverse" "^7.14.0"
-    "@babel/types" "^7.0.0"
-    absolute-path "^0.0.0"
-    accepts "^1.3.7"
-    async "^3.2.2"
-    chalk "^4.0.0"
-    ci-info "^2.0.0"
-    connect "^3.6.5"
-    debug "^2.2.0"
-    denodeify "^1.2.1"
-    error-stack-parser "^2.0.6"
-    fs-extra "^1.0.0"
-    graceful-fs "^4.2.4"
-    hermes-parser "0.8.0"
-    image-size "^0.6.0"
-    invariant "^2.2.4"
-    jest-worker "^27.2.0"
-    jsc-safe-url "^0.2.2"
-    lodash.throttle "^4.1.1"
-    metro-babel-transformer "0.72.4"
-    metro-cache "0.72.4"
-    metro-cache-key "0.72.4"
-    metro-config "0.72.4"
-    metro-core "0.72.4"
-    metro-file-map "0.72.4"
-    metro-hermes-compiler "0.72.4"
-    metro-inspector-proxy "0.72.4"
-    metro-minify-uglify "0.72.4"
-    metro-react-native-babel-preset "0.72.4"
-    metro-resolver "0.72.4"
-    metro-runtime "0.72.4"
-    metro-source-map "0.72.4"
-    metro-symbolicate "0.72.4"
-    metro-transform-plugins "0.72.4"
-    metro-transform-worker "0.72.4"
-    mime-types "^2.1.27"
-    node-fetch "^2.2.0"
+    metro "0.76.8"
+    metro-babel-transformer "0.76.8"
+    metro-cache "0.76.8"
+    metro-cache-key "0.76.8"
+    metro-source-map "0.76.8"
+    metro-transform-plugins "0.76.8"
     nullthrows "^1.1.1"
-    rimraf "^2.5.4"
-    serialize-error "^2.1.0"
-    source-map "^0.5.6"
-    strip-ansi "^6.0.0"
-    temp "0.8.3"
-    throat "^5.0.0"
-    ws "^7.5.1"
-    yargs "^15.3.1"
 
-metro@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/metro/-/metro-0.73.10.tgz#d9a0efb1e403e3aee5cf5140e0a96a7220c23901"
-  integrity sha512-J2gBhNHFtc/Z48ysF0B/bfTwUwaRDLjNv7egfhQCc+934dpXcjJG2KZFeuybF+CvA9vo4QUi56G2U+RSAJ5tsA==
+metro@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/metro/-/metro-0.76.8.tgz#ba526808b99977ca3f9ac5a7432fd02a340d13a6"
+  integrity sha512-oQA3gLzrrYv3qKtuWArMgHPbHu8odZOD9AoavrqSFllkPgOtmkBvNNDLCELqv5SjBfqjISNffypg+5UGG3y0pg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     "@babel/core" "^7.20.0"
@@ -16018,7 +14508,6 @@ metro@0.73.10:
     "@babel/template" "^7.0.0"
     "@babel/traverse" "^7.20.0"
     "@babel/types" "^7.20.0"
-    absolute-path "^0.0.0"
     accepts "^1.3.7"
     async "^3.2.2"
     chalk "^4.0.0"
@@ -16028,29 +14517,28 @@ metro@0.73.10:
     denodeify "^1.2.1"
     error-stack-parser "^2.0.6"
     graceful-fs "^4.2.4"
-    hermes-parser "0.8.0"
-    image-size "^0.6.0"
+    hermes-parser "0.12.0"
+    image-size "^1.0.2"
     invariant "^2.2.4"
     jest-worker "^27.2.0"
     jsc-safe-url "^0.2.2"
     lodash.throttle "^4.1.1"
-    metro-babel-transformer "0.73.10"
-    metro-cache "0.73.10"
-    metro-cache-key "0.73.10"
-    metro-config "0.73.10"
-    metro-core "0.73.10"
-    metro-file-map "0.73.10"
-    metro-hermes-compiler "0.73.10"
-    metro-inspector-proxy "0.73.10"
-    metro-minify-terser "0.73.10"
-    metro-minify-uglify "0.73.10"
-    metro-react-native-babel-preset "0.73.10"
-    metro-resolver "0.73.10"
-    metro-runtime "0.73.10"
-    metro-source-map "0.73.10"
-    metro-symbolicate "0.73.10"
-    metro-transform-plugins "0.73.10"
-    metro-transform-worker "0.73.10"
+    metro-babel-transformer "0.76.8"
+    metro-cache "0.76.8"
+    metro-cache-key "0.76.8"
+    metro-config "0.76.8"
+    metro-core "0.76.8"
+    metro-file-map "0.76.8"
+    metro-inspector-proxy "0.76.8"
+    metro-minify-terser "0.76.8"
+    metro-minify-uglify "0.76.8"
+    metro-react-native-babel-preset "0.76.8"
+    metro-resolver "0.76.8"
+    metro-runtime "0.76.8"
+    metro-source-map "0.76.8"
+    metro-symbolicate "0.76.8"
+    metro-transform-plugins "0.76.8"
+    metro-transform-worker "0.76.8"
     mime-types "^2.1.27"
     node-fetch "^2.2.0"
     nullthrows "^1.1.1"
@@ -16058,10 +14546,9 @@ metro@0.73.10:
     serialize-error "^2.1.0"
     source-map "^0.5.6"
     strip-ansi "^6.0.0"
-    temp "0.8.3"
     throat "^5.0.0"
     ws "^7.5.1"
-    yargs "^17.5.1"
+    yargs "^17.6.2"
 
 microevent.ts@~0.1.1:
   version "0.1.1"
@@ -16354,7 +14841,7 @@ nanoid@^2.1.0:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
   integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
 
-nanoid@^3.3.1, nanoid@^3.3.4, nanoid@^3.3.6:
+nanoid@^3.3.1, nanoid@^3.3.4:
   version "3.3.6"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
   integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
@@ -16423,47 +14910,13 @@ new-github-release-url@2.0.0:
   dependencies:
     type-fest "^2.5.1"
 
-next-compose-plugins@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/next-compose-plugins/-/next-compose-plugins-2.2.1.tgz#020fc53f275a7e719d62521bef4300fbb6fde5ab"
-  integrity sha512-OjJ+fV15FXO2uQXQagLD4C0abYErBjyjE0I0FHpOEIB8upw0hg1ldFP6cqHTJBH1cZqy96OeR3u1dJ+Ez2D4Bg==
-
-next-transpile-modules@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/next-transpile-modules/-/next-transpile-modules-10.0.0.tgz#7152880048835acb64d05fc7aa34910cbe7994da"
-  integrity sha512-FyeJ++Lm2Fq31gbThiRCrJlYpIY9QaI7A3TjuhQLzOix8ChQrvn5ny4MhfIthS5cy6+uK1AhDRvxVdW17y3Xdw==
-  dependencies:
-    enhanced-resolve "^5.10.0"
-
-next@13.3.0:
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/next/-/next-13.3.0.tgz#40632d303d74fc8521faa0a5bf4a033a392749b1"
-  integrity sha512-OVTw8MpIPa12+DCUkPqRGPS3thlJPcwae2ZL4xti3iBff27goH024xy4q2lhlsdoYiKOi8Kz6uJoLW/GXwgfOA==
+next@^13.5.3:
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/next/-/next-13.5.3.tgz#631efcbcc9d756c610855d9b94f3d8c4e73ee131"
+  integrity sha512-4Nt4HRLYDW/yRpJ/QR2t1v63UOMS55A38dnWv3UDOWGezuY0ZyFO1ABNbD7mulVzs9qVhgy2+ppjdsANpKP1mg==
   dependencies:
-    "@next/env" "13.3.0"
-    "@swc/helpers" "0.4.14"
-    busboy "1.6.0"
-    caniuse-lite "^1.0.30001406"
-    postcss "8.4.14"
-    styled-jsx "5.1.1"
-  optionalDependencies:
-    "@next/swc-darwin-arm64" "13.3.0"
-    "@next/swc-darwin-x64" "13.3.0"
-    "@next/swc-linux-arm64-gnu" "13.3.0"
-    "@next/swc-linux-arm64-musl" "13.3.0"
-    "@next/swc-linux-x64-gnu" "13.3.0"
-    "@next/swc-linux-x64-musl" "13.3.0"
-    "@next/swc-win32-arm64-msvc" "13.3.0"
-    "@next/swc-win32-ia32-msvc" "13.3.0"
-    "@next/swc-win32-x64-msvc" "13.3.0"
-
-next@^13.1.6:
-  version "13.4.7"
-  resolved "https://registry.yarnpkg.com/next/-/next-13.4.7.tgz#2ab20e6fada2e25cb81bd17f68956705ffd9824e"
-  integrity sha512-M8z3k9VmG51SRT6v5uDKdJXcAqLzP3C+vaKfLIAM0Mhx1um1G7MDnO63+m52qPdZfrTFzMZNzfsgvm3ghuVHIQ==
-  dependencies:
-    "@next/env" "13.4.7"
-    "@swc/helpers" "0.5.1"
+    "@next/env" "13.5.3"
+    "@swc/helpers" "0.5.2"
     busboy "1.6.0"
     caniuse-lite "^1.0.30001406"
     postcss "8.4.14"
@@ -16471,15 +14924,15 @@ next@^13.1.6:
     watchpack "2.4.0"
     zod "3.21.4"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "13.4.7"
-    "@next/swc-darwin-x64" "13.4.7"
-    "@next/swc-linux-arm64-gnu" "13.4.7"
-    "@next/swc-linux-arm64-musl" "13.4.7"
-    "@next/swc-linux-x64-gnu" "13.4.7"
-    "@next/swc-linux-x64-musl" "13.4.7"
-    "@next/swc-win32-arm64-msvc" "13.4.7"
-    "@next/swc-win32-ia32-msvc" "13.4.7"
-    "@next/swc-win32-x64-msvc" "13.4.7"
+    "@next/swc-darwin-arm64" "13.5.3"
+    "@next/swc-darwin-x64" "13.5.3"
+    "@next/swc-linux-arm64-gnu" "13.5.3"
+    "@next/swc-linux-arm64-musl" "13.5.3"
+    "@next/swc-linux-x64-gnu" "13.5.3"
+    "@next/swc-linux-x64-musl" "13.5.3"
+    "@next/swc-win32-arm64-msvc" "13.5.3"
+    "@next/swc-win32-ia32-msvc" "13.5.3"
+    "@next/swc-win32-x64-msvc" "13.5.3"
 
 nice-try@^1.0.4:
   version "1.0.5"
@@ -16499,6 +14952,11 @@ nocache@^3.0.1:
   resolved "https://registry.yarnpkg.com/nocache/-/nocache-3.0.4.tgz#5b37a56ec6e09fc7d401dceaed2eab40c8bfdf79"
   integrity sha512-WDD0bdg9mbq6F4mRxEYcPWwfA1vxd0mrvKOyxI7Xj/atfRHVeutzuWByG//jfm4uPzp0y4Kj051EORCBSQMycw==
 
+node-abort-controller@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/node-abort-controller/-/node-abort-controller-3.1.1.tgz#a94377e964a9a37ac3976d848cb5c765833b8548"
+  integrity sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==
+
 node-dir@^0.1.10, node-dir@^0.1.17:
   version "0.1.17"
   resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.17.tgz#5f5665d93351335caabef8f1c554516cf5f1e4e5"
@@ -16691,20 +15149,10 @@ nwsapi@^2.2.2:
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.5.tgz#a52744c61b3889dd44b0a158687add39b8d935e2"
   integrity sha512-6xpotnECFy/og7tKSBVmUNft7J3jyXAka4XvG6AUhFWRz+Q/Ljus7znJAA3bxColfQLdS+XsjoodtJfCgeTEFQ==
 
-ob1@0.72.3:
-  version "0.72.3"
-  resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.72.3.tgz#fc1efcfe156f12ed23615f2465a796faad8b91e4"
-  integrity sha512-OnVto25Sj7Ghp0vVm2THsngdze3tVq0LOg9LUHsAVXMecpqOP0Y8zaATW8M9gEgs2lNEAcCqV0P/hlmOPhVRvg==
-
-ob1@0.72.4:
-  version "0.72.4"
-  resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.72.4.tgz#d2ddedb09fb258d69490e8809157518a62b75506"
-  integrity sha512-/iPJKpXpVEZS0subUvjew4ept5LTBxj1hD20A4mAj9CJkGGPgvbBlfYtFEBubBkk4dv4Ef5lajsnRBYPxF74cQ==
-
-ob1@0.73.10:
-  version "0.73.10"
-  resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.73.10.tgz#bf0a2e8922bb8687ddca82327c5cf209414a1bd4"
-  integrity sha512-aO6EYC+QRRCkZxVJhCWhLKgVjhNuD6Gu1riGjxrIm89CqLsmKgxzYDDEsktmKsoDeRdWGQM5EdMzXDl5xcVfsw==
+ob1@0.76.8:
+  version "0.76.8"
+  resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.76.8.tgz#ac4c459465b1c0e2c29aaa527e09fc463d3ffec8"
+  integrity sha512-dlBkJJV5M/msj9KYA9upc+nUWVwuOFFTbu28X6kZeGwcuW+JxaHSBZ70SYQnk5M+j5JbNLR6yKHmgW4M5E7X5g==
 
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
@@ -16720,11 +15168,6 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-hash@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
-  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
-
 object-inspect@^1.12.3, object-inspect@^1.9.0:
   version "1.12.3"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
@@ -16865,7 +15308,7 @@ onetime@^6.0.0:
   dependencies:
     mimic-fn "^4.0.0"
 
-open@9.1.0, open@^9.1.0:
+open@9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/open/-/open-9.1.0.tgz#684934359c90ad25742f5a26151970ff8c6c80b6"
   integrity sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==
@@ -17380,7 +15823,7 @@ pidtree@^0.6.0:
   resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
   integrity sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==
 
-pify@^2.0.0, pify@^2.3.0:
+pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
@@ -17479,30 +15922,6 @@ postcss-flexbugs-fixes@^4.2.1:
   dependencies:
     postcss "^7.0.26"
 
-postcss-import@^14.1.0:
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"
-  integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
-  dependencies:
-    postcss-value-parser "^4.0.0"
-    read-cache "^1.0.0"
-    resolve "^1.1.7"
-
-postcss-js@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
-  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
-  dependencies:
-    camelcase-css "^2.0.1"
-
-postcss-load-config@^3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
-  integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
-  dependencies:
-    lilconfig "^2.0.5"
-    yaml "^1.10.2"
-
 postcss-loader@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-4.3.0.tgz#2c4de9657cd4f07af5ab42bd60a673004da1b8cc"
@@ -17547,14 +15966,7 @@ postcss-modules-values@^3.0.0:
     icss-utils "^4.0.0"
     postcss "^7.0.6"
 
-postcss-nested@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.0.tgz#1572f1984736578f360cffc7eb7dca69e30d1735"
-  integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==
-  dependencies:
-    postcss-selector-parser "^6.0.10"
-
-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.2:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
   version "6.0.13"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"
   integrity sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==
@@ -17567,7 +15979,7 @@ postcss-value-parser@^3.3.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -17581,15 +15993,6 @@ postcss@8.4.14:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@8.4.22:
-  version "8.4.22"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.22.tgz#c29e6776b60ab3af602d4b513d5bd2ff9aa85dc1"
-  integrity sha512-XseknLAfRHzVWjCEtdviapiBtfLdgyzExD50Rg2ePaucEesyh8Wv4VPdW0nbyDa1ydbrAxV19jvMT4+LFmcNUA==
-  dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
 postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.39"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
@@ -17598,15 +16001,6 @@ postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.0.9:
-  version "8.4.24"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.24.tgz#f714dba9b2284be3cc07dbd2fc57ee4dc972d2df"
-  integrity sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==
-  dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
 preferred-pm@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/preferred-pm/-/preferred-pm-3.0.3.tgz#1b6338000371e3edbce52ef2e4f65eb2e73586d6"
@@ -17681,6 +16075,15 @@ pretty-format@^29.0.0, pretty-format@^29.5.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+pretty-format@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.7.0.tgz#ca42c758310f365bfa71a0bda0a807160b776812"
+  integrity sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==
+  dependencies:
+    "@jest/schemas" "^29.6.3"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
 pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
@@ -17920,6 +16323,13 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+queue@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/queue/-/queue-6.0.2.tgz#b91525283e2315c7553d2efa18d83e76432fed65"
+  integrity sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==
+  dependencies:
+    inherits "~2.0.3"
+
 quick-lru@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
@@ -17998,18 +16408,10 @@ re-resizable@^6.9.11:
   resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.11.tgz#f356e27877f12d926d076ab9ad9ff0b95912b475"
   integrity sha512-a3hiLWck/NkmyLvGWUuvkAmN1VhwAz4yOhS6FdMTaxCUVN9joIWkT11wsO68coG/iEYuwn+p/7qAmfQzRhiPLQ==
 
-react-devtools-core@4.24.0:
-  version "4.24.0"
-  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.24.0.tgz#7daa196bdc64f3626b3f54f2ff2b96f7c4fdf017"
-  integrity sha512-Rw7FzYOOzcfyUPaAm9P3g0tFdGqGq2LLiAI+wjYcp6CsF3DeeMrRS3HZAho4s273C29G/DJhx0e8BpRE/QZNGg==
-  dependencies:
-    shell-quote "^1.6.1"
-    ws "^7"
-
-react-devtools-core@^4.26.1:
-  version "4.27.8"
-  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.27.8.tgz#b7b387b079c14ae9a214d4846a402da2b6efd164"
-  integrity sha512-KwoH8/wN/+m5wTItLnsgVraGNmFrcTWR3k1VimP1HjtMMw4CNF+F5vg4S/0tzTEKIdpCi2R7mPNTC+/dswZMgw==
+react-devtools-core@^4.27.2:
+  version "4.28.0"
+  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.28.0.tgz#3fa18709b24414adddadac33b6b9cea96db60f2f"
+  integrity sha512-E3C3X1skWBdBzwpOUbmXG8SgH6BtsluSMe+s6rRcujNKG1DGi8uIfhdhszkgDpAsMoE55hwqRUzeXCmETDBpTg==
   dependencies:
     shell-quote "^1.6.1"
     ws "^7"
@@ -18040,14 +16442,6 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
-  dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.23.0"
-
 react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -18057,6 +16451,14 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
 react-element-to-jsx-string@^14.3.4:
   version "14.3.4"
   resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.4.tgz#709125bc72f06800b68f9f4db485f2c7d31218a8"
@@ -18126,26 +16528,6 @@ react-native-builder-bob@^0.20.3:
   optionalDependencies:
     jetifier "^2.0.0"
 
-react-native-codegen@^0.70.6:
-  version "0.70.6"
-  resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.70.6.tgz#2ce17d1faad02ad4562345f8ee7cbe6397eda5cb"
-  integrity sha512-kdwIhH2hi+cFnG5Nb8Ji2JwmcCxnaOOo9440ov7XDzSvGfmUStnCzl+MCW8jLjqHcE4icT7N9y+xx4f50vfBTw==
-  dependencies:
-    "@babel/parser" "^7.14.0"
-    flow-parser "^0.121.0"
-    jscodeshift "^0.13.1"
-    nullthrows "^1.1.1"
-
-react-native-codegen@^0.71.5:
-  version "0.71.5"
-  resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.71.5.tgz#454a42a891cd4ca5fc436440d301044dc1349c14"
-  integrity sha512-rfsuc0zkuUuMjFnrT55I1mDZ+pBRp2zAiRwxck3m6qeGJBGK5OV5JH66eDQ4aa+3m0of316CqrJDRzVlYufzIg==
-  dependencies:
-    "@babel/parser" "^7.14.0"
-    flow-parser "^0.185.0"
-    jscodeshift "^0.13.1"
-    nullthrows "^1.1.1"
-
 react-native-gesture-handler@^2.12.1:
   version "2.12.1"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.12.1.tgz#f11a99fb95169810c6886fad5efa01a17fd81660"
@@ -18157,16 +16539,6 @@ react-native-gesture-handler@^2.12.1:
     lodash "^4.17.21"
     prop-types "^15.7.2"
 
-react-native-gradle-plugin@^0.70.3:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz#cbcf0619cbfbddaa9128701aa2d7b4145f9c4fc8"
-  integrity sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A==
-
-react-native-gradle-plugin@^0.71.19:
-  version "0.71.19"
-  resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.19.tgz#3379e28341fcd189bc1f4691cefc84c1a4d7d232"
-  integrity sha512-1dVk9NwhoyKHCSxcrM6vY6cxmojeATsBobDicX0ZKr7DgUF2cBQRTKsimQFvzH8XhOVXyH8p4HyDSZNIFI8OlQ==
-
 react-native-modal-datetime-picker@^14.0.0:
   version "14.0.1"
   resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-14.0.1.tgz#d9c6df4ff85bf1cfbe108c756dc26dcca4cc5f2f"
@@ -18194,14 +16566,6 @@ react-native-svg@13.4.0:
     css-select "^5.1.0"
     css-tree "^1.1.3"
 
-react-native-svg@latest:
-  version "13.9.0"
-  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-13.9.0.tgz#8df8a690dd00362601f074dec5d3a86dd0f99c7f"
-  integrity sha512-Ey18POH0dA0ob/QiwCBVrxIiwflhYuw0P0hBlOHeY4J5cdbs8ngdKHeWC/Kt9+ryP6fNoEQ1PUgPYw2Bs/rp5Q==
-  dependencies:
-    css-select "^5.1.0"
-    css-tree "^1.1.3"
-
 react-native-swipe-gestures@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz#a172cb0f3e7478ccd681fd36b8bfbcdd098bde7c"
@@ -18242,83 +16606,47 @@ react-native-web@^0.19.8:
     postcss-value-parser "^4.2.0"
     styleq "^0.1.3"
 
-react-native@^0.70.7:
-  version "0.70.10"
-  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.70.10.tgz#fb4b05930c523dbfb3a6d606db14881fd7a310d6"
-  integrity sha512-RkhrISLgWooMjbXvH7ohWCYdxxvV0xcGiEFcnEWkMy2y320QyA3evDcCExLv5Es2PnJKt6FiQKzGqrfh/T1H1A==
-  dependencies:
-    "@jest/create-cache-key-function" "^27.0.1"
-    "@react-native-community/cli" "9.3.2"
-    "@react-native-community/cli-platform-android" "9.3.1"
-    "@react-native-community/cli-platform-ios" "9.3.0"
-    "@react-native/assets" "1.0.0"
-    "@react-native/normalize-color" "2.0.0"
-    "@react-native/polyfills" "2.0.0"
-    abort-controller "^3.0.0"
-    anser "^1.4.9"
-    base64-js "^1.1.2"
-    event-target-shim "^5.0.1"
-    invariant "^2.2.4"
-    jsc-android "^250230.2.1"
-    memoize-one "^5.0.0"
-    metro-react-native-babel-transformer "0.72.3"
-    metro-runtime "0.72.3"
-    metro-source-map "0.72.3"
-    mkdirp "^0.5.1"
-    nullthrows "^1.1.1"
-    pretty-format "^26.5.2"
-    promise "^8.3.0"
-    react-devtools-core "4.24.0"
-    react-native-codegen "^0.70.6"
-    react-native-gradle-plugin "^0.70.3"
-    react-refresh "^0.4.0"
-    react-shallow-renderer "^16.15.0"
-    regenerator-runtime "^0.13.2"
-    scheduler "^0.22.0"
-    stacktrace-parser "^0.1.3"
-    use-sync-external-store "^1.0.0"
-    whatwg-fetch "^3.0.0"
-    ws "^6.1.4"
-
-react-native@^0.71.7:
-  version "0.71.11"
-  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.71.11.tgz#c459f2b9ae775307c88a12b6dcee3cc4680a1dae"
-  integrity sha512-++8IxgUe4Ev+bTiFlLfJCdSoE5cReVP1DTpVJ8f/QtzaxA3h1008Y3Xah1Q5vsR4rZcYMO7Pn3af+wOshdQFug==
+react-native@0.72.5, react-native@^0.72.0:
+  version "0.72.5"
+  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.72.5.tgz#2c343fa6f3ead362cf07376634a33a4078864357"
+  integrity sha512-oIewslu5DBwOmo7x5rdzZlZXCqDIna0R4dUwVpfmVteORYLr4yaZo5wQnMeR+H7x54GaMhmgeqp0ZpULtulJFg==
   dependencies:
     "@jest/create-cache-key-function" "^29.2.1"
-    "@react-native-community/cli" "10.2.4"
-    "@react-native-community/cli-platform-android" "10.2.0"
-    "@react-native-community/cli-platform-ios" "10.2.4"
-    "@react-native/assets" "1.0.0"
-    "@react-native/normalize-color" "2.1.0"
-    "@react-native/polyfills" "2.0.0"
+    "@react-native-community/cli" "11.3.7"
+    "@react-native-community/cli-platform-android" "11.3.7"
+    "@react-native-community/cli-platform-ios" "11.3.7"
+    "@react-native/assets-registry" "^0.72.0"
+    "@react-native/codegen" "^0.72.7"
+    "@react-native/gradle-plugin" "^0.72.11"
+    "@react-native/js-polyfills" "^0.72.1"
+    "@react-native/normalize-colors" "^0.72.0"
+    "@react-native/virtualized-lists" "^0.72.8"
     abort-controller "^3.0.0"
     anser "^1.4.9"
     base64-js "^1.1.2"
-    deprecated-react-native-prop-types "^3.0.1"
+    deprecated-react-native-prop-types "4.1.0"
     event-target-shim "^5.0.1"
+    flow-enums-runtime "^0.0.5"
     invariant "^2.2.4"
     jest-environment-node "^29.2.1"
     jsc-android "^250231.0.0"
     memoize-one "^5.0.0"
-    metro-react-native-babel-transformer "0.73.10"
-    metro-runtime "0.73.10"
-    metro-source-map "0.73.10"
+    metro-runtime "0.76.8"
+    metro-source-map "0.76.8"
     mkdirp "^0.5.1"
     nullthrows "^1.1.1"
     pretty-format "^26.5.2"
     promise "^8.3.0"
-    react-devtools-core "^4.26.1"
-    react-native-codegen "^0.71.5"
-    react-native-gradle-plugin "^0.71.19"
+    react-devtools-core "^4.27.2"
     react-refresh "^0.4.0"
     react-shallow-renderer "^16.15.0"
     regenerator-runtime "^0.13.2"
-    scheduler "^0.23.0"
-    stacktrace-parser "^0.1.3"
+    scheduler "0.24.0-canary-efb381bbf-20230505"
+    stacktrace-parser "^0.1.10"
     use-sync-external-store "^1.0.0"
     whatwg-fetch "^3.0.0"
     ws "^6.2.2"
+    yargs "^17.6.2"
 
 react-refresh@^0.11.0:
   version "0.11.0"
@@ -18375,13 +16703,6 @@ react-test-renderer@^18.2.0:
     react-shallow-renderer "^16.15.0"
     scheduler "^0.23.0"
 
-react@18.2.0, react@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
-  dependencies:
-    loose-envify "^1.1.0"
-
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -18390,12 +16711,12 @@ react@^17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-read-cache@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
-  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
-    pify "^2.3.0"
+    loose-envify "^1.1.0"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
@@ -18486,12 +16807,12 @@ readline@^1.3.0:
   resolved "https://registry.yarnpkg.com/readline/-/readline-1.3.0.tgz#c580d77ef2cfc8752b132498060dc9793a7ac01c"
   integrity sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg==
 
-recast@^0.20.4:
-  version "0.20.5"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.20.5.tgz#8e2c6c96827a1b339c634dd232957d230553ceae"
-  integrity sha512-E5qICoPoNL4yU0H0NoBDntNB0Q5oMSNh9usFctYniLBluTthi3RsQVBXIJNbApOlvSwW/RGxIuokPcAc59J5fQ==
+recast@^0.21.0:
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.21.5.tgz#e8cd22bb51bcd6130e54f87955d33a2b2e57b495"
+  integrity sha512-hjMmLaUXAm1hIuTqOdeYObMslq/q+Xff6QE3Y2P+uoHAg2nmVlLBps2hzh1UJDdMtDTMXOFewK6ky51JQIeECg==
   dependencies:
-    ast-types "0.14.2"
+    ast-types "0.15.2"
     esprima "~4.0.0"
     source-map "~0.6.1"
     tslib "^2.0.1"
@@ -18819,11 +17140,6 @@ resolve-global@1.0.0, resolve-global@^1.0.0:
   dependencies:
     global-dirs "^0.1.1"
 
-resolve-pkg-maps@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
-  integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
-
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -18834,7 +17150,7 @@ resolve.exports@^2.0.0:
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-2.0.2.tgz#f8c934b8e6a13f539e38b7098e2e36134f01e800"
   integrity sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.1, resolve@^1.3.2:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.3.2:
   version "1.22.2"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
   integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
@@ -18924,11 +17240,6 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rimraf@~2.2.6:
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
-  integrity sha512-R5KMKHnPAQaZMqLOsyuyUmcIjSeDm+73eoqQpaXA7AZ22BL+6C+1mcUscgOsNd8WVlJuvlgAPsegcx7pjlV0Dg==
-
 rimraf@~2.4.0:
   version "2.4.5"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.4.5.tgz#ee710ce5d93a8fdb856fb5ea8ff0e2d75934b2da"
@@ -19067,6 +17378,13 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
+scheduler@0.24.0-canary-efb381bbf-20230505:
+  version "0.24.0-canary-efb381bbf-20230505"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.24.0-canary-efb381bbf-20230505.tgz#5dddc60e29f91cd7f8b983d7ce4a99c2202d178f"
+  integrity sha512-ABvovCDe/k9IluqSh4/ISoq8tIJnW8euVAWYt5j/bg6dRnqwQwiGO1F/V4AyK96NGF/FB04FhOUDuWj8IKfABA==
+  dependencies:
+    loose-envify "^1.1.0"
+
 scheduler@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
@@ -19075,13 +17393,6 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.22.0:
-  version "0.22.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
-  integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
-  dependencies:
-    loose-envify "^1.1.0"
-
 scheduler@^0.23.0:
   version "0.23.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
@@ -19173,6 +17484,13 @@ semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
+semver@^7.5.2:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.18.0, send@^0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
@@ -19643,7 +17961,7 @@ stackframe@^1.3.4:
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310"
   integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==
 
-stacktrace-parser@^0.1.3:
+stacktrace-parser@^0.1.10:
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/stacktrace-parser/-/stacktrace-parser-0.1.10.tgz#29fb0cae4e0d0b85155879402857a1639eb6051a"
   integrity sha512-KJP1OCML99+8fhOHxwwzyWrlUuVX5GQ0ZpJTd1DFXhdkrvg1szxfHhawXUZ3g9TkXORQd4/WG68jMlQZ2p8wlg==
@@ -20001,7 +18319,7 @@ styleq@^0.1.2, styleq@^0.1.3:
   resolved "https://registry.yarnpkg.com/styleq/-/styleq-0.1.3.tgz#8efb2892debd51ce7b31dc09c227ad920decab71"
   integrity sha512-3ZUifmCDCQanjeej1f6kyl/BeP/Vae5EYkQ9iJfUm/QwZvlgnZzyflqAsAWYURdtea8Vkvswu2GrC57h3qffcA==
 
-sucrase@^3.20.0, sucrase@^3.21.0, sucrase@^3.29.0:
+sucrase@^3.20.0, sucrase@^3.21.0:
   version "3.32.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.32.0.tgz#c4a95e0f1e18b6847127258a75cf360bc568d4a7"
   integrity sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==
@@ -20083,44 +18401,6 @@ synchronous-promise@^2.0.15:
   resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.17.tgz#38901319632f946c982152586f2caf8ddc25c032"
   integrity sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==
 
-synckit@^0.8.5:
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.5.tgz#b7f4358f9bb559437f9f167eb6bc46b3c9818fa3"
-  integrity sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==
-  dependencies:
-    "@pkgr/utils" "^2.3.1"
-    tslib "^2.5.0"
-
-tailwindcss@3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.1.tgz#b6662fab6a9b704779e48d083a9fef5a81d2b81e"
-  integrity sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==
-  dependencies:
-    arg "^5.0.2"
-    chokidar "^3.5.3"
-    color-name "^1.1.4"
-    didyoumean "^1.2.2"
-    dlv "^1.1.3"
-    fast-glob "^3.2.12"
-    glob-parent "^6.0.2"
-    is-glob "^4.0.3"
-    jiti "^1.17.2"
-    lilconfig "^2.0.6"
-    micromatch "^4.0.5"
-    normalize-path "^3.0.0"
-    object-hash "^3.0.0"
-    picocolors "^1.0.0"
-    postcss "^8.0.9"
-    postcss-import "^14.1.0"
-    postcss-js "^4.0.0"
-    postcss-load-config "^3.1.4"
-    postcss-nested "6.0.0"
-    postcss-selector-parser "^6.0.11"
-    postcss-value-parser "^4.2.0"
-    quick-lru "^5.1.1"
-    resolve "^1.22.1"
-    sucrase "^3.29.0"
-
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -20167,14 +18447,6 @@ temp-dir@^2.0.0:
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
   integrity sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==
 
-temp@0.8.3:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/temp/-/temp-0.8.3.tgz#e0c6bc4d26b903124410e4fed81103014dfc1f59"
-  integrity sha512-jtnWJs6B1cZlHs9wPG7BrowKxZw/rf6+UpGAkr8AaYmiTyTO7zQlLoST8zx/8TcUPnZmeBoB+H8ARuHZaSijVw==
-  dependencies:
-    os-tmpdir "^1.0.0"
-    rimraf "~2.2.6"
-
 temp@^0.8.4:
   version "0.8.4"
   resolved "https://registry.yarnpkg.com/temp/-/temp-0.8.4.tgz#8c97a33a4770072e0a05f919396c7665a7dd59f2"
@@ -20524,16 +18796,6 @@ tsc-files@^1.1.3:
   resolved "https://registry.yarnpkg.com/tsc-files/-/tsc-files-1.1.3.tgz#ef4cfcb7affc9b90577d707a879dc53bb105be83"
   integrity sha512-G6uXkTNofGU9EE1fYBaCpR72x/aqXW4PDAuznWj4JYlDwhcaKnUn4CiCHBMc89lDxLmikK+hhaEWLoTPEKKvXg==
 
-tsconfig-paths@^3.14.1:
-  version "3.14.2"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088"
-  integrity sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==
-  dependencies:
-    "@types/json5" "^0.0.29"
-    json5 "^1.0.2"
-    minimist "^1.2.6"
-    strip-bom "^3.0.0"
-
 tsconfig@7:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/tsconfig/-/tsconfig-7.0.0.tgz#84538875a4dc216e5c4a5432b3a4dec3d54e91b7"
@@ -20549,7 +18811,7 @@ tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.5.0:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"
   integrity sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==
@@ -20729,16 +18991,6 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
-typescript@4.9.4:
-  version "4.9.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
-  integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
-
-typescript@5.0.4:
-  version "5.0.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.0.4.tgz#b217fd20119bd61a94d4011274e0ab369058da3b"
-  integrity sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==
-
 typescript@5.1.6, typescript@^5.1.6:
   version "5.1.6"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
@@ -21689,7 +19941,7 @@ write-file-atomic@^4.0.2:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
-ws@^6.1.4, ws@^6.2.2:
+ws@^6.2.2:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"
   integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==
@@ -21701,7 +19953,7 @@ ws@^7, ws@^7.5.1:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
   integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
 
-ws@^8.11.0, ws@^8.12.1, ws@^8.2.3:
+ws@^8.11.0, ws@^8.2.3:
   version "8.13.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
   integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
@@ -21794,11 +20046,16 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
+yaml@^1.10.0, yaml@^1.7.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+yaml@^2.2.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.2.tgz#f522db4313c671a0ca963a75670f1c12ea909144"
+  integrity sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==
+
 yaml@^2.2.2:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
@@ -21822,7 +20079,7 @@ yargs-parser@^20.2.2, yargs-parser@^20.2.3, yargs-parser@^20.2.9:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
 
-yargs@^15.1.0, yargs@^15.3.1:
+yargs@^15.1.0:
   version "15.4.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
   integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==
@@ -21852,7 +20109,7 @@ yargs@^16.1.1, yargs@^16.2.0:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
-yargs@^17.0.0, yargs@^17.3.1, yargs@^17.5.1, yargs@^17.7.1:
+yargs@^17.0.0, yargs@^17.3.1, yargs@^17.5.1, yargs@^17.6.2, yargs@^17.7.1:
   version "17.7.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
   integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==