diff --git a/example/babel-plugin-styled-resolver-expo/package.json b/example/babel-plugin-styled-resolver-expo/package.json
index 9b40740dd..fc9ab0794 100644
--- a/example/babel-plugin-styled-resolver-expo/package.json
+++ b/example/babel-plugin-styled-resolver-expo/package.json
@@ -11,7 +11,7 @@
     "build": "bob build"
   },
   "dependencies": {
-    "@gluestack-style/react": "^0.1.31",
+    "@gluestack-style/react": "^0.1.32",
     "expo": "~47.0.8",
     "expo-status-bar": "~1.4.2",
     "find-yarn-workspace-root": "^2.0.0"
@@ -27,10 +27,10 @@
     "babel-plugin-relative-path-import": "^2.0.1",
     "ts-loader": "~8.2.0",
     "typescript": "^4.6.3",
-    "@gluestack-style/react": "^0.1.31"
+    "@gluestack-style/react": "^0.1.32"
   },
   "peerDependencies": {
-    "@gluestack-style/react": "^0.1.31",
+    "@gluestack-style/react": "^0.1.32",
     "react": "*",
     "react-dom": "*",
     "react-native": "*",
diff --git a/example/expo-app/package.json b/example/expo-app/package.json
index be9c32693..b667257e4 100644
--- a/example/expo-app/package.json
+++ b/example/expo-app/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@gluestack-style/babel-plugin-styled-resolver": "^0.1.0",
-    "@gluestack-style/react": "^0.1.31",
+    "@gluestack-style/react": "^0.1.32",
     "expo": "~47.0.12",
     "expo-status-bar": "~1.4.2",
     "react": "18.1.0",
diff --git a/example/next/package.json b/example/next/package.json
index 459cc5996..d3f59ce23 100644
--- a/example/next/package.json
+++ b/example/next/package.json
@@ -23,7 +23,7 @@
     "react-native-vector-icons": "^9.1.0",
     "react-native-vector-icons-for-web": "^0.1.7",
     "react-native-web-linear-gradient": "^1.1.2",
-    "@gluestack-style/react": "^0.1.31",
+    "@gluestack-style/react": "^0.1.32",
     "@gluestack-style/babel-plugin-styled-resolver": "^0.1.6"
   },
   "devDependencies": {
diff --git a/example/storybook/.ondevice/storybook.requires.js b/example/storybook/.ondevice/storybook.requires.js
index c79696d4a..290779a98 100644
--- a/example/storybook/.ondevice/storybook.requires.js
+++ b/example/storybook/.ondevice/storybook.requires.js
@@ -53,7 +53,7 @@ const getStories = () => {
     // require('../src/recipes/ButtonStateProps/ButtonStateProps.stories.tsx'),
     // require('../src/recipes/ButtonVariant/ButtonVariant.stories.tsx'),
     // require('../src/api/ColorModeBasedStyles/ColorMode.stories.tsx'),
-    // require('../src/recipes/Descendants/Descendants.stories.tsx'),
+    require('../src/api/DescendantsStyles/ContextBasedStyles.stories.tsx'),
     // require('../src/recipes/Icons/Icons.stories.tsx'),
     // require('../src/recipes/LinearGradient/LinearGradient.stories.tsx'),
     // require('../src/recipes/MediaQuery/MediaQuery.stories.tsx'),
diff --git a/example/storybook/.storybook/main.js b/example/storybook/.storybook/main.js
index 859108a5a..dd8281365 100644
--- a/example/storybook/.storybook/main.js
+++ b/example/storybook/.storybook/main.js
@@ -31,6 +31,8 @@ module.exports = {
       include: [
         // path.resolve('../../', 'node_modules/@universa11y'),
         path.resolve('../../', 'node_modules/@gluestack-ui'),
+        path.resolve('./', 'node_modules/@gluestack-ui'),
+
         path.resolve('../../', 'node_modules/@gluestack/design-system'),
         path.resolve(
           '../../',
diff --git a/example/storybook/package.json b/example/storybook/package.json
index 2bc2222fb..567f35327 100644
--- a/example/storybook/package.json
+++ b/example/storybook/package.json
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@gluestack-style/animation-plugin": "^0.1.7",
-    "@gluestack-style/react": "^0.1.31",
+    "@gluestack-style/react": "^0.1.32",
     "@gluestack/design-system": "latest",
     "@legendapp/motion": "^2.2.0",
     "@react-native-async-storage/async-storage": "~1.17.3",
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@babel/core": "^7.19.3",
     "@gluestack-style/animation-plugin": "^0.1.7",
-    "@gluestack-style/react": "^0.1.31",
+    "@gluestack-style/react": "^0.1.32",
     "@storybook/addon-actions": "^6.5.14",
     "@storybook/addon-controls": "^6.5.14",
     "@storybook/addon-docs": "^6.5.15",
@@ -69,7 +69,7 @@
     "typescript": "4.9.4"
   },
   "peerDependencies": {
-    "@gluestack-style/react": "^0.1.31",
+    "@gluestack-style/react": "^0.1.32",
     "react": "*",
     "react-dom": "*",
     "react-native": "*",
diff --git a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
index 3365f1fe2..b636e7dc8 100644
--- a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
+++ b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
@@ -3,14 +3,15 @@ import React from 'react';
 import { Pressable, Text } from 'react-native';
 import { AsForwarder, styled } from '@gluestack-style/react';
 import { Wrapper } from '../../components/Wrapper';
-import { AddIcon } from '@gluestack/design-system';
+// import { AddIcon } from '@gluestack/design-system';
+import { createIcon } from '@gluestack-ui/icon';
+import { Svg } from 'react-native-svg';
 
 const StyledButton = styled(
   Pressable,
   {
     backgroundColor: '$primary500',
     p: '$2',
-
     _icon: {
       props: {
         color: '$blue500',
@@ -23,19 +24,53 @@ const StyledButton = styled(
 );
 
 const StyledIcon = styled(
-  AsForwarder,
-  {},
+  Text,
+  {
+    color: 'red',
+  },
   {
     ancestorStyle: ['_icon'],
-    DEBUG: 'FORWARDER ICON',
+    DEBUG: 'STYLED_ICON',
+  }
+);
+
+const MyText = styled(
+  StyledIcon,
+  {
+    props: {
+      color: '$white',
+    },
+  },
+  {
+    // ancestorStyle: ['_icon'],
+    DEBUG: 'MYTEXT',
   }
 );
+// const StyledIcon = styled(
+//   AsForwarder,
+//   {},
+//   {
+//     ancestorStyle: ['_icon'],
+//     DEBUG: 'FORWARDER ICON',
+//   }
+// );
+
+// const AddIcon = createIcon({
+//   Root: StyledIcon,
+//   viewBox: '0 0 24 24',
+//   d: 'M13.25 10.75V2H10.75V10.75H2V13.25H10.75V22H13.25V13.25H22V10.75H13.25Z',
+// });
+
+// AddIcon.displayName = 'AddIcon';
 
 export function ContextBasedStyles() {
   return (
     <Wrapper>
       <StyledButton>
-        <StyledIcon as={AddIcon} color="$amber500" />
+        {/* <StyledIcon as={MyText} color="$amber500">
+          Text
+        </StyledIcon> */}
+        <MyText color="$amber400">Text</MyText>
       </StyledButton>
     </Wrapper>
   );
diff --git a/example/storybook/src/components/nb.config.ts b/example/storybook/src/components/nb.config.ts
index 609e9c155..a75234bf7 100644
--- a/example/storybook/src/components/nb.config.ts
+++ b/example/storybook/src/components/nb.config.ts
@@ -1,6 +1,6 @@
 import { createConfig } from '@gluestack-style/react';
 
-export const config = createConfig({
+export const config = {
   aliases: {
     bg: 'backgroundColor',
     backgroundColor: 'backgroundColor',
@@ -645,46 +645,46 @@ export const config = createConfig({
       100: 1,
     },
   } as const,
-  globalStyle: {
-    variants: {
-      variant: {
-        '1': {
-          bg: '$red200',
-        },
-        '2': {
-          bg: '$red200',
-        },
-      },
-      dropShadow: {
-        '1': {
-          bg: '$red200',
-        },
-        '2': {
-          bg: '$red200',
-        },
-      },
-      softShadow: {
-        '1': {
-          bg: '$red200',
-        },
-        '2': {
-          bg: '$red200',
-        },
-      },
-      //   variant: {
-      //     primary: {
-      //       bg: 'red'
-      //     }
-      //   }
+  // globalStyle: {
+  //   variants: {
+  //     variant: {
+  //       '1': {
+  //         bg: '$red200',
+  //       },
+  //       '2': {
+  //         bg: '$red200',
+  //       },
+  //     },
+  //     dropShadow: {
+  //       '1': {
+  //         bg: '$red200',
+  //       },
+  //       '2': {
+  //         bg: '$red200',
+  //       },
+  //     },
+  //     softShadow: {
+  //       '1': {
+  //         bg: '$red200',
+  //       },
+  //       '2': {
+  //         bg: '$red200',
+  //       },
+  //     },
+  //     //   variant: {
+  //     //     primary: {
+  //     //       bg: 'red'
+  //     //     }
+  //     //   }
 
-      //   // test: {
-      //   //   primary: {
-      //   //     bg: 'red'
-      //   //   }
-      //   // }
-    },
-  } as const,
-} as const);
+  //     //   // test: {
+  //     //   //   primary: {
+  //     //   //     bg: 'red'
+  //     //   //   }
+  //     //   // }
+  //   },
+  // } as const,
+} as const;
 
 type ConfigType = typeof config;
 
diff --git a/example/storybook/src/more/Roadmap/index.stories.mdx b/example/storybook/src/more/Roadmap/index.stories.mdx
index da13b403d..6691c9178 100644
--- a/example/storybook/src/more/Roadmap/index.stories.mdx
+++ b/example/storybook/src/more/Roadmap/index.stories.mdx
@@ -24,9 +24,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 ## In Progress
 
-- **[Feature]** Implementing global Style support.
-- **[Improvement]** Continuing to improve config typing.
-
 ## Released
 
 - **[Improvement]** undefined property resolution on the web [@gluestack-style/react@0.1.5](https://github.com/gluestack/gluestack-style/releases/tag/%40gluestack-style%2Freact%400.1.5)
+- **[Feature]** Global Style support.
+- **[Improvement]** Config typing inprovement.
diff --git a/packages/benchmark-next/package.json b/packages/benchmark-next/package.json
index 9b08406a6..a02206bdd 100644
--- a/packages/benchmark-next/package.json
+++ b/packages/benchmark-next/package.json
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@gluestack-style/babel-plugin-styled-resolver": "^0.1.6",
-    "@gluestack-style/react": "^0.1.31",
+    "@gluestack-style/react": "^0.1.32",
     "@emotion/styled": "^11.3.0",
     "@expo/next-adapter": "^4.0.13",
     "@types/react": "17.0.1",
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 3d7274e4f..06a2403ed 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @gluestack-style/react
 
+## 0.1.32
+
+### Patch Changes
+
+- - Prop resolution issue when composing on styled component into another.
+
 ## 0.1.31
 
 ### Patch Changes
diff --git a/packages/react/package.json b/packages/react/package.json
index 655cdcf33..909661f0f 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "keywords": [
     "React Native",
     "Next.js",
diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx
index e9ffa8994..79714989f 100644
--- a/packages/react/src/styled.tsx
+++ b/packages/react/src/styled.tsx
@@ -51,6 +51,32 @@ import {
 } from './convertSxToSxVerbosed';
 import { stableHash } from './stableHash';
 
+function convertUtiltiyToSXFromProps(
+  componentProps: any,
+  componentExtendedConfig: any,
+  componentStyleConfig: any
+) {
+  const {
+    sx: userSX,
+    verboseSx: verboseSx,
+    ...componentRestProps
+  }: any = {
+    ...componentProps,
+  };
+
+  const resolvedSXVerbosed = convertSxToSxVerbosed(userSX);
+  const { sxProps: utilityResolvedSX, mergedProps: restProps } =
+    convertUtilityPropsToSX(
+      componentExtendedConfig,
+      componentStyleConfig?.descendantStyle,
+      componentRestProps
+    );
+
+  const resolvedSxVerbose = deepMerge(utilityResolvedSX, resolvedSXVerbosed);
+  const sx = deepMerge(resolvedSxVerbose, verboseSx);
+  return { sx, rest: restProps };
+}
+
 function getStateStyleCSSFromStyleIdsAndProps(
   styleIdObject: IdsStateColorMode,
   states: any,
@@ -502,7 +528,7 @@ export function verboseStyled<P, Variants>(
   function injectComponentAndDescendantStyles(
     orderedResolved: OrderedSXResolved,
     styleTagId?: string,
-    type: 'boot' | 'inline' = 'boot'
+    type: 'boot' | 'inline' | 'passing' = 'boot'
   ) {
     // const componentOrderResolved = getComponentResolved(orderedResolved);
     // const descendantOrderResolved = getDescendantResolved(orderedResolved);
@@ -548,7 +574,7 @@ export function verboseStyled<P, Variants>(
 
   // BASE COLOR MODE RESOLUTION
 
-  function setColorModeBaseStyleIdsForWeb(styleIds: any, COLOR_MODE: any) {
+  function setColorModeBaseStyleIds(styleIds: any, COLOR_MODE: any) {
     if (COLOR_MODE) {
       if (
         styleIds?.baseStyle?.colorMode &&
@@ -562,10 +588,7 @@ export function verboseStyled<P, Variants>(
     }
   }
 
-  function setColorModeBaseStyleIdsDescendantForWeb(
-    styleIds: any,
-    COLOR_MODE: any
-  ) {
+  function setColorModeBaseStyleIdsDescendant(styleIds: any, COLOR_MODE: any) {
     if (COLOR_MODE) {
       Object.keys(styleIds).forEach((descendantKey) => {
         if (
@@ -581,12 +604,41 @@ export function verboseStyled<P, Variants>(
     }
   }
 
+  function injectSx(sx: any, type: any = 'inline') {
+    const inlineSxTheme = {
+      baseStyle: sx,
+    };
+
+    resolvePlatformTheme(inlineSxTheme, Platform.OS);
+    const sxStyledResolved = styledToStyledResolved(
+      // @ts-ignore
+      inlineSxTheme,
+      [],
+      componentExtendedConfig
+    );
+
+    const sxHash = stableHash(sx);
+    const orderedSXResolved =
+      styledResolvedToOrderedSXResolved(sxStyledResolved);
+
+    INTERNAL_updateCSSStyleInOrderedResolved(
+      orderedSXResolved,
+      sxHash,
+      false,
+      'gs'
+    );
+
+    injectComponentAndDescendantStyles(orderedSXResolved, sxHash, type);
+
+    return orderedSXResolved;
+  }
+
   // END BASE COLOR MODE RESOLUTION
 
   const NewComp = (
     {
       as,
-      ...properties
+      ...componentProps
     }: Omit<P, keyof Variants> &
       Partial<ComponentProps<ReactNativeStyles, Variants, P>> &
       Partial<UtilityProps<ReactNativeStyles>> & {
@@ -663,8 +715,8 @@ export function verboseStyled<P, Variants>(
       componentStyleIds = styleIds.component;
       componentDescendantStyleIds = styleIds.descendant;
 
-      setColorModeBaseStyleIdsForWeb(componentStyleIds, COLOR_MODE);
-      setColorModeBaseStyleIdsDescendantForWeb(
+      setColorModeBaseStyleIds(componentStyleIds, COLOR_MODE);
+      setColorModeBaseStyleIdsDescendant(
         componentDescendantStyleIds,
         COLOR_MODE
       );
@@ -689,16 +741,18 @@ export function verboseStyled<P, Variants>(
 
     const incomingComponentProps = useMemo(() => {
       return {
-        //@ts-ignore
-        // ...theme?.baseStyle?.props,
         ...applyAncestorPassingProps, // As applyAncestorPassingProps is incoming props for the descendant component
-        ...properties,
+        ...componentProps,
       };
-    }, [properties, applyAncestorPassingProps]);
+    }, [componentProps, applyAncestorPassingProps]);
 
     const { variantProps } = getVariantProps(
-      //@ts-ignore
-      { ...theme?.baseStyle?.props, ...incomingComponentProps },
+      {
+        //@ts-ignore
+        ...theme?.baseStyle?.props,
+        ...applyAncestorPassingProps,
+        ...componentProps,
+      },
       theme
     );
 
@@ -742,6 +796,7 @@ export function verboseStyled<P, Variants>(
     //
     //
     //
+
     //
     // passingProps is specific to current component
     const passingProps = React.useMemo(() => {
@@ -759,19 +814,53 @@ export function verboseStyled<P, Variants>(
       componentStatePassingProps,
     ]);
 
+    const { sx: filteredComponentSx, rest: filteredComponentRemainingProps } =
+      convertUtiltiyToSXFromProps(
+        componentProps,
+        componentExtendedConfig,
+        componentStyleConfig
+      );
+
+    const { sx: filteredPassingSx, rest: filteredPassingRemainingProps } =
+      convertUtiltiyToSXFromProps(
+        {
+          ...passingProps,
+          ...applyAncestorPassingProps,
+        },
+        componentExtendedConfig,
+        componentStyleConfig
+      );
+
+    // if (componentStyleConfig.DEBUG === 'MYTEXT') {
+    //   console.log(
+    //     filteredComponentSx,
+    //     filteredPassingSx,
+    //     // applyAncestorPassingProps,
+    //     // applyAncestorBaseStyleCSSIds,
+    //     // applyAncestorVariantStyleCSSIds,
+    //     componentProps,
+    //     '>>>>>'
+    //   );
+    // }
+
+    const remainingComponentProps = {
+      ...filteredPassingRemainingProps,
+      ...filteredComponentRemainingProps,
+    };
+
     const mergedWithUtilityPropsAndPassingProps = {
-      // ...restProps,
       ...passingProps,
-      ...incomingComponentProps,
+      ...applyAncestorPassingProps,
+      ...componentProps,
     };
 
     const {
       children,
       states,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      colorMode,
-      sx: userSX,
-      verboseSx,
+      sx: _sx,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      verboseSx: _versbosedSx,
       ...utilityAndPassingProps
     }: any = mergedWithUtilityPropsAndPassingProps;
 
@@ -819,17 +908,8 @@ export function verboseStyled<P, Variants>(
       });
     }
 
+    // const { sx, remainingComponentProps } = filterSx(mergedSx, mergedVerboseSx);
     // TODO: filter for inline props like variant and sizes
-    const resolvedSXVerbosed = convertSxToSxVerbosed(userSX);
-    const { sxProps: utilityResolvedSX, mergedProps: remainingComponentProps } =
-      convertUtilityPropsToSX(
-        componentExtendedConfig,
-        componentStyleConfig?.descendantStyle,
-        utilityAndPassingProps
-      );
-
-    const resolvedSxVerbose = deepMerge(utilityResolvedSX, resolvedSXVerbosed);
-    const sx = deepMerge(resolvedSxVerbose, verboseSx);
 
     const [
       applyComponentStateBaseStyleIds,
@@ -864,31 +944,20 @@ export function verboseStyled<P, Variants>(
 
     // FOR SX RESOLUTION
 
-    if (Object.keys(sx).length > 0) {
-      const inlineSxTheme = {
-        baseStyle: sx,
-      };
-
-      resolvePlatformTheme(inlineSxTheme, Platform.OS);
-      const sxStyledResolved = styledToStyledResolved(
-        // @ts-ignore
-        inlineSxTheme,
-        [],
-        componentExtendedConfig
-      );
-
-      const sxHash = stableHash(sx);
-      const orderedSXResolved =
-        styledResolvedToOrderedSXResolved(sxStyledResolved);
-
-      INTERNAL_updateCSSStyleInOrderedResolved(
-        orderedSXResolved,
-        sxHash,
-        false,
-        'gs'
+    if (
+      Object.keys(filteredComponentSx).length > 0 ||
+      Object.keys(filteredPassingSx).length > 0
+    ) {
+      const orderedComponentSXResolved = injectSx(
+        filteredComponentSx,
+        'inline'
       );
 
-      injectComponentAndDescendantStyles(orderedSXResolved, sxHash, 'inline');
+      const orderedPassingSXResolved = injectSx(filteredPassingSx, 'passing');
+      const orderedSXResolved = [
+        ...orderedPassingSXResolved,
+        ...orderedComponentSXResolved,
+      ];
 
       const sxStyleIds = getStyleIds(orderedSXResolved, componentStyleConfig);
 
@@ -899,14 +968,11 @@ export function verboseStyled<P, Variants>(
       sxStyleIds.component.compoundVariants =
         componentStyleIds.compoundVariants;
 
-      setColorModeBaseStyleIdsForWeb(sxStyleIds.component, COLOR_MODE);
-      setColorModeBaseStyleIdsDescendantForWeb(
-        sxStyleIds.descendant,
-        COLOR_MODE
-      );
+      setColorModeBaseStyleIds(sxStyleIds.component, COLOR_MODE);
+      setColorModeBaseStyleIdsDescendant(sxStyleIds.descendant, COLOR_MODE);
 
-      // setColorModeBaseStyleIdsForWeb(sxStyleIds.component, COLOR_MODE);
-      // setColorModeBaseStyleIdsForWeb(sxStyleIds.descendant, COLOR_MODE);
+      // setColorModeBaseStyleIds(sxStyleIds.component, COLOR_MODE);
+      // setColorModeBaseStyleIds(sxStyleIds.descendant, COLOR_MODE);
       sxComponentStyleIds.current = sxStyleIds.component;
       sxDescendantStyleIds.current = sxStyleIds.descendant;
       //
@@ -1137,7 +1203,7 @@ export function verboseStyled<P, Variants>(
 
     // const remainingComponentPropsWithoutVariants = getRemainingProps
     const finalComponentProps = {
-      ...passingProps,
+      // ...passingProps,
       ...resolvedInlineProps,
       ...resolvedStyleProps,
       ...remainingComponentProps,
@@ -1145,6 +1211,15 @@ export function verboseStyled<P, Variants>(
       ref,
     };
 
+    // if (componentStyleConfig.DEBUG === 'MYTEXT') {
+    //   console.log(
+    //     // finalComponentProps,
+    //     passingProps,
+    //     componentProps,
+    //     'hello world 22'
+    //   );
+    // }
+
     const component = !AsComp ? (
       <Component {...finalComponentProps}>{children}</Component>
     ) : (
diff --git a/packages/react/src/utils/css-injector/utils/inject.web.ts b/packages/react/src/utils/css-injector/utils/inject.web.ts
index 3d6c16533..a9f7b96b8 100644
--- a/packages/react/src/utils/css-injector/utils/inject.web.ts
+++ b/packages/react/src/utils/css-injector/utils/inject.web.ts
@@ -7,6 +7,7 @@ type IWrapperType =
   | 'boot-descendant-base'
   | 'boot-variant'
   | 'boot-descendant-variant'
+  | 'passing-base'
   | 'inline-base'
   | 'inline-variant'
   | 'boot-descendant'
@@ -20,6 +21,7 @@ const toBeFlushedStyles: IToBeFlushedStyles = {
   'boot-descendant-base': {},
   'boot-variant': {},
   'boot-descendant-variant': {},
+  'passing-base': {},
   'inline-base': {},
   'inline-variant': {},
   'inline-descendant-base': {},
@@ -32,6 +34,7 @@ const order: IWrapperType[] = [
   'boot-variant',
   'boot-descendant-variant',
   'inline-descendant-base',
+  'passing-base',
   'inline-variant',
   'inline-base',
 ];
diff --git a/yarn.lock b/yarn.lock
index 5963c1363..1b232324c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2425,6 +2425,19 @@
   dependencies:
     "@legendapp/motion" "^2.2.0"
 
+"@gluestack-style/babel-plugin-styled-resolver@^0.1.0", "@gluestack-style/babel-plugin-styled-resolver@^0.1.6":
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/@gluestack-style/babel-plugin-styled-resolver/-/babel-plugin-styled-resolver-0.1.13.tgz#d8649bcee20a1cec31a3c9054229bd906d227062"
+  integrity sha512-yAjim3WyVleuF+7vBU1RXRWBee8uPXYDdVkRa1DA7TY+RHBEVKVgNW7aBo+yrAiO0KW7/C7krP+zN325cljThw==
+  dependencies:
+    "@babel/core" "^7.20.5"
+    "@babel/generator" "^7.20.5"
+    "@babel/parser" "^7.20.5"
+    "@babel/plugin-transform-typescript" "^7.20.2"
+    "@babel/preset-typescript" "^7.18.6"
+    "@babel/traverse" "^7.20.5"
+    lodash.merge "^4.6.2"
+
 "@gluestack-style/react@^0.1.11", "@gluestack-style/react@^0.1.24":
   version "0.1.24"
   resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-0.1.24.tgz#e58ce13c9bf94a4913ea3c064a22e16be1b79b9e"
@@ -2541,6 +2554,14 @@
     "@react-native-aria/focus" "^0.2.7"
     react-native-svg "13.4.0"
 
+"@gluestack-ui/hooks@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@gluestack-ui/hooks/-/hooks-0.1.2.tgz#cc2d8b5909e7afaba1667b9a4b7f3cf71aeff3fc"
+  integrity sha512-O2er+HioWY5prBPODfgLosuk69dX0dOFIqn5RlXaFSLtB7oOqgaMSz8CdyIsD7NNyRduRqcVKvCkNjDCo3nYIA==
+  dependencies:
+    "@react-native-aria/focus" "^0.2.7"
+    react-native-svg "13.4.0"
+
 "@gluestack-ui/hooks@latest":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/hooks/-/hooks-0.1.0.tgz#b58c05241eda45b9241039a92c3ff98b6c7a8c51"
@@ -2559,6 +2580,16 @@
     "@react-native-aria/focus" "^0.2.7"
     react-native-svg "13.4.0"
 
+"@gluestack-ui/icon@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@gluestack-ui/icon/-/icon-0.1.5.tgz#a70663ba44cc39a996c3be566ff5fd19028c5b51"
+  integrity sha512-tEesuZOQbQfm3pSSS+XN/8jrCX0FcGdfhSaSytFGQeB7tSGhb5xv+1qSiP2KHly6Ejga4DHZ0omySZoqID42wA==
+  dependencies:
+    "@gluestack-ui/provider" "^0.1.5"
+    "@gluestack-ui/utils" "^0.1.5"
+    "@react-native-aria/focus" "^0.2.7"
+    react-native-svg "13.4.0"
+
 "@gluestack-ui/icon@latest":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/icon/-/icon-0.1.1.tgz#6b84384bee58a30960526b15159ddabe48410366"
@@ -2624,6 +2655,15 @@
     "@react-native-aria/overlays" "0.3.5"
     react-native-svg "13.4.0"
 
+"@gluestack-ui/overlay@^0.1.7":
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@gluestack-ui/overlay/-/overlay-0.1.7.tgz#0bdc0987bfa1d1d83bf9478a8836660ba8244a61"
+  integrity sha512-f+h6O5t5pjWXcDrpbjh5/xOFDyyDEEi1JRNlF+84x6gGuKFF2/s54FQwnf0IIfe19Ec1ytYGw/KZ6M2vReQv7g==
+  dependencies:
+    "@react-native-aria/focus" "^0.2.7"
+    "@react-native-aria/interactions" "^0.2.10"
+    "@react-native-aria/overlays" "^0.3.7"
+
 "@gluestack-ui/overlay@latest":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/overlay/-/overlay-0.1.2.tgz#5e824de07d3a1285d6375ee8faeb7acb70a82e22"
@@ -2680,6 +2720,17 @@
     tsconfig "7"
     typescript "^4.9.4"
 
+"@gluestack-ui/provider@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@gluestack-ui/provider/-/provider-0.1.5.tgz#4a31b0da24bc2a9694fb5982dc621ac8a29386b7"
+  integrity sha512-S3qk1RxYU/VHQH5wItQ17x55wqKbNQoItI2LsRddFqVj2DANst1efCeNz1abKlZz2Ac+vB45zuOJd/qUXCRy4Q==
+  dependencies:
+    "@gluestack-ui/overlay" "^0.1.7"
+    "@gluestack-ui/toast" "^0.1.10"
+    "@react-native-aria/interactions" "^0.2.10"
+    tsconfig "7"
+    typescript "^4.9.4"
+
 "@gluestack-ui/radio@latest":
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/radio/-/radio-0.1.8.tgz#8acd1eb072894632a987baf95e6288bbd46cc516"
@@ -2700,6 +2751,14 @@
     "@react-native-aria/focus" "^0.2.7"
     react-native-svg "13.4.0"
 
+"@gluestack-ui/react-native-aria@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@gluestack-ui/react-native-aria/-/react-native-aria-0.1.3.tgz#676ab29b87c6a9f2ef34fd4b07f98bbca6b5f7ec"
+  integrity sha512-b9jH+EqvhfFApKqZihdfp/fZy5Jkx63Be2XJCx/BW+/HBt1I0swo6sSc2IvdsgqQAOM9LBMjAC7HwIFdKTD5Ig==
+  dependencies:
+    "@react-native-aria/focus" "^0.2.7"
+    react-native-svg "13.4.0"
+
 "@gluestack-ui/select@latest":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/select/-/select-0.1.3.tgz#50d4f643f0deba1e76ac0806550d6c561d307cb9"
@@ -2773,6 +2832,17 @@
     "@react-native-aria/focus" "^0.2.7"
     react-native-svg "13.4.0"
 
+"@gluestack-ui/toast@^0.1.10":
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/@gluestack-ui/toast/-/toast-0.1.10.tgz#bf1392305f86d8ee6d491e41d1c2e838d1861bd6"
+  integrity sha512-HhKctwYSWMiNNIfJ8u2S81LoUDHxL/Y3Frz800TkuPiSmY1wXAQRsrzlg3IGfPswSZL1WgT7fXP/6p4hgO9vgA==
+  dependencies:
+    "@gluestack-ui/hooks" "^0.1.2"
+    "@gluestack-ui/overlay" "^0.1.7"
+    "@gluestack-ui/transitions" "^0.1.8"
+    "@gluestack-ui/utils" "^0.1.5"
+    "@react-native-aria/focus" "^0.2.7"
+
 "@gluestack-ui/toast@latest":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/toast/-/toast-0.1.5.tgz#da1e46457daa401558f1b3a9b48acff84378bb16"
@@ -2800,6 +2870,17 @@
     "@react-native-aria/overlays" "0.3.6"
     react-native-svg "13.4.0"
 
+"@gluestack-ui/transitions@^0.1.8":
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/@gluestack-ui/transitions/-/transitions-0.1.8.tgz#da6242a7c83860706dc96fb10998268595f662a8"
+  integrity sha512-C9+FpzzH9dthXi/IFbmqVhNpTsAMa6ExYN2CDxZyWYG07NNc9w1wrQ4YoJ5IlYZT+KkT07rkDaySydXECL1J9g==
+  dependencies:
+    "@gluestack-ui/overlay" "^0.1.7"
+    "@gluestack-ui/react-native-aria" "^0.1.3"
+    "@gluestack-ui/utils" "^0.1.5"
+    "@react-native-aria/focus" "^0.2.7"
+    react-native-svg "13.4.0"
+
 "@gluestack-ui/transitions@latest":
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/transitions/-/transitions-0.1.6.tgz#27855b06507723d0be625b94575dad15952e2ea6"
@@ -2819,6 +2900,14 @@
     "@react-native-aria/focus" "^0.2.7"
     react-native-svg "13.4.0"
 
+"@gluestack-ui/utils@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@gluestack-ui/utils/-/utils-0.1.5.tgz#77df98828d5a5ae3ae3cb9624f1c02206fceaf6a"
+  integrity sha512-vrrwG5OOKs1O8LhFuX+1jVCjELimhNtDcB7nMaDFGphWt/LaXUIUowpipYEgVvVTsLljPubmJcqiK2vs+qo6Rw==
+  dependencies:
+    "@react-native-aria/focus" "^0.2.7"
+    react-native-svg "13.4.0"
+
 "@gluestack-ui/vstack@latest":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/vstack/-/vstack-0.1.3.tgz#7b7a71d6eab7f7a881dedab0d4ccf32cf86bf1dd"
@@ -4013,6 +4102,15 @@
   dependencies:
     "@react-aria/focus" "^3.2.3"
 
+"@react-native-aria/interactions@^0.2.10":
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/@react-native-aria/interactions/-/interactions-0.2.10.tgz#9e27191f589c8a04e627c3c7a3d465aaab5ee94d"
+  integrity sha512-J0Scz4ndwaqa13e7XwwKRx0jXhVCUAmT/i1udVYyXW/rANAXnnAxuWJDWuZOO/XiQ5eoN7OqIlYUkJG4NnDUOA==
+  dependencies:
+    "@react-aria/interactions" "^3.3.2"
+    "@react-aria/utils" "^3.6.0"
+    "@react-native-aria/utils" "^0.2.6"
+
 "@react-native-aria/interactions@^0.2.2", "@react-native-aria/interactions@^0.2.3", "@react-native-aria/interactions@^0.2.7", "@react-native-aria/interactions@^0.2.8":
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/@react-native-aria/interactions/-/interactions-0.2.8.tgz#5ced4bd3391c647699fa79275472f784a44c2488"
@@ -4088,6 +4186,18 @@
     "@react-stately/overlays" "^3.1.1"
     "@react-types/overlays" "^3.4.0"
 
+"@react-native-aria/overlays@^0.3.7":
+  version "0.3.7"
+  resolved "https://registry.yarnpkg.com/@react-native-aria/overlays/-/overlays-0.3.7.tgz#4e9e9024947cc4219ec9c6461f96033e2cd7e779"
+  integrity sha512-R0egaQoQtwMG6HA4hAoLFHcQOMLfv2WBIjPdnF6OJHxqFW2+Kzw9j2WqwjV90/cP1evU/iWnzKX48ed83xAh9Q==
+  dependencies:
+    "@react-aria/interactions" "^3.3.2"
+    "@react-aria/overlays" "^3.7.0"
+    "@react-native-aria/utils" "^0.2.8"
+    "@react-stately/overlays" "^3.1.1"
+    "@react-types/overlays" "^3.4.0"
+    dom-helpers "^5.0.0"
+
 "@react-native-aria/radio@^0.2.4", "@react-native-aria/radio@^0.2.5":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@react-native-aria/radio/-/radio-0.2.5.tgz#436d3abdbb48bcaf6e9c5c045ff9c5bf87b71248"