diff --git a/components/ui/accordion/index.tsx b/components/ui/accordion/index.tsx
index dabedbc..c463bda 100644
--- a/components/ui/accordion/index.tsx
+++ b/components/ui/accordion/index.tsx
@@ -9,7 +9,6 @@ import {
   withStyleContext,
   useStyleContext,
 } from "@gluestack-ui/nativewind-utils/withStyleContext";
-import { withStyleContextAndStates } from "@gluestack-ui/nativewind-utils/withStyleContextAndStates";
 import { H3 } from "@expo/html-elements";
 import { cssInterop } from "nativewind";
 
@@ -30,6 +29,7 @@ const accordionStyle = tva({
     },
   },
 });
+
 const accordionItemStyle = tva({
   base: "py-3 px-4",
   parentVariants: {
@@ -92,6 +92,7 @@ type IPrimitiveIcon = {
   as?: React.ElementType;
   className?: string;
   classNameColor?: string;
+  style?: any;
 };
 
 const PrimitiveIcon = React.forwardRef<
@@ -108,6 +109,7 @@ const PrimitiveIcon = React.forwardRef<
       size,
       stroke = "currentColor",
       as: AsComp,
+      style,
       ...props
     },
     ref
@@ -132,7 +134,15 @@ const PrimitiveIcon = React.forwardRef<
     }
 
     if (AsComp) {
-      return <AsComp ref={ref} {...props} {...sizeProps} {...colorProps} />;
+      return (
+        <AsComp
+          ref={ref}
+          {...props}
+          style={style}
+          {...sizeProps}
+          {...colorProps}
+        />
+      );
     }
     return (
       <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
@@ -140,10 +150,7 @@ const PrimitiveIcon = React.forwardRef<
   }
 );
 
-const Root =
-  Platform.OS === "web"
-    ? withStyleContext(View, SCOPE)
-    : withStyleContextAndStates(View, SCOPE);
+const Root = withStyleContext(View, SCOPE);
 
 const Header = (
   Platform.OS === "web" ? H3 : View
@@ -161,16 +168,6 @@ const UIAccordion = createAccordion({
   Content: View,
 });
 
-cssInterop(UIAccordion, { className: "style" });
-cssInterop(UIAccordion.Item, { className: "style" });
-cssInterop(UIAccordion.Header, { className: "style" });
-cssInterop(UIAccordion.Trigger, { className: "style" });
-//@ts-ignore
-cssInterop(UIAccordion.Icon, { className: "style" });
-cssInterop(UIAccordion.TitleText, { className: "style" });
-cssInterop(UIAccordion.Content, { className: "style" });
-cssInterop(UIAccordion.ContentText, { className: "style" });
-// @ts-ignore
 cssInterop(UIAccordion.Icon, {
   className: {
     target: "style",
diff --git a/components/ui/actionsheet/index.tsx b/components/ui/actionsheet/index.tsx
index c98a449..a8b696b 100644
--- a/components/ui/actionsheet/index.tsx
+++ b/components/ui/actionsheet/index.tsx
@@ -1,8 +1,8 @@
-'use client';
-import React, { useMemo } from 'react';
-import { H4 } from '@expo/html-elements';
-import { Svg } from 'react-native-svg';
-import { createActionsheet } from '@gluestack-ui/actionsheet';
+"use client";
+import React, { useMemo } from "react";
+import { H4 } from "@expo/html-elements";
+import { Svg } from "react-native-svg";
+import { createActionsheet } from "@gluestack-ui/actionsheet";
 import {
   Pressable,
   View,
@@ -11,19 +11,17 @@ import {
   VirtualizedList,
   FlatList,
   SectionList,
-  Platform,
   PressableProps,
-} from 'react-native';
+} from "react-native";
 
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
-import { cssInterop } from 'nativewind';
+import { tva } from "@gluestack-ui/nativewind-utils/tva";
+import type { VariantProps } from "@gluestack-ui/nativewind-utils";
+import { cssInterop } from "nativewind";
 import {
   Motion,
   AnimatePresence,
   createMotionAnimatedComponent,
-} from '@legendapp/motion';
+} from "@legendapp/motion";
 
 type IPrimitiveIcon = {
   height?: number | string;
@@ -35,7 +33,9 @@ type IPrimitiveIcon = {
   as?: React.ElementType;
   className?: string;
   classNameColor?: string;
+  style?: any;
 };
+
 const PrimitiveIcon = React.forwardRef<
   React.ElementRef<typeof Svg>,
   IPrimitiveIcon
@@ -48,8 +48,9 @@ const PrimitiveIcon = React.forwardRef<
       color,
       classNameColor,
       size,
-      stroke = 'currentColor',
+      stroke = "currentColor",
       as: AsComp,
+      style,
       ...props
     },
     ref
@@ -67,14 +68,22 @@ const PrimitiveIcon = React.forwardRef<
     if (fill) {
       colorProps = { ...colorProps, fill: fill };
     }
-    if (stroke !== 'currentColor') {
+    if (stroke !== "currentColor") {
       colorProps = { ...colorProps, stroke: stroke };
-    } else if (stroke === 'currentColor' && color !== undefined) {
+    } else if (stroke === "currentColor" && color !== undefined) {
       colorProps = { ...colorProps, stroke: color };
     }
 
     if (AsComp) {
-      return <AsComp ref={ref} {...props} {...sizeProps} {...colorProps} />;
+      return (
+        <AsComp
+          ref={ref}
+          {...props}
+          style={style}
+          {...sizeProps}
+          {...colorProps}
+        />
+      );
     }
     return (
       <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
@@ -94,7 +103,7 @@ const AnimatedPressable = createMotionAnimatedComponent(Pressable);
 export const UIActionsheet = createActionsheet({
   Root: View,
   Content: Motion.View,
-  Item: Platform.OS === 'web' ? ItemWrapper : withStates(ItemWrapper),
+  Item: ItemWrapper,
   ItemText: Text,
   DragIndicator: View,
   IndicatorWrapper: View,
@@ -108,170 +117,170 @@ export const UIActionsheet = createActionsheet({
   AnimatePresence: AnimatePresence,
 });
 
-cssInterop(UIActionsheet, { className: 'style' });
-cssInterop(UIActionsheet.Content, { className: 'style' });
-cssInterop(ItemWrapper, { className: 'style' });
-cssInterop(UIActionsheet.ItemText, { className: 'style' });
-cssInterop(UIActionsheet.DragIndicator, { className: 'style' });
-cssInterop(UIActionsheet.DragIndicatorWrapper, { className: 'style' });
-cssInterop(UIActionsheet.Backdrop, { className: 'style' });
+cssInterop(UIActionsheet, { className: "style" });
+cssInterop(UIActionsheet.Content, { className: "style" });
+cssInterop(ItemWrapper, { className: "style" });
+cssInterop(UIActionsheet.ItemText, { className: "style" });
+cssInterop(UIActionsheet.DragIndicator, { className: "style" });
+cssInterop(UIActionsheet.DragIndicatorWrapper, { className: "style" });
+cssInterop(UIActionsheet.Backdrop, { className: "style" });
 cssInterop(UIActionsheet.ScrollView, {
-  className: 'style',
-  contentContainerClassName: 'contentContainerStyle',
-  indicatorClassName: 'indicatorStyle',
+  className: "style",
+  contentContainerClassName: "contentContainerStyle",
+  indicatorClassName: "indicatorStyle",
 });
 cssInterop(UIActionsheet.VirtualizedList, {
-  className: 'style',
-  ListFooterComponentClassName: 'ListFooterComponentStyle',
-  ListHeaderComponentClassName: 'ListHeaderComponentStyle',
-  contentContainerClassName: 'contentContainerStyle',
-  indicatorClassName: 'indicatorStyle',
+  className: "style",
+  ListFooterComponentClassName: "ListFooterComponentStyle",
+  ListHeaderComponentClassName: "ListHeaderComponentStyle",
+  contentContainerClassName: "contentContainerStyle",
+  indicatorClassName: "indicatorStyle",
 });
 cssInterop(UIActionsheet.FlatList, {
-  className: 'style',
-  ListFooterComponentClassName: 'ListFooterComponentStyle',
-  ListHeaderComponentClassName: 'ListHeaderComponentStyle',
-  columnWrapperClassName: 'columnWrapperStyle',
-  contentContainerClassName: 'contentContainerStyle',
-  indicatorClassName: 'indicatorStyle',
+  className: "style",
+  ListFooterComponentClassName: "ListFooterComponentStyle",
+  ListHeaderComponentClassName: "ListHeaderComponentStyle",
+  columnWrapperClassName: "columnWrapperStyle",
+  contentContainerClassName: "contentContainerStyle",
+  indicatorClassName: "indicatorStyle",
 });
-cssInterop(UIActionsheet.SectionList, { className: 'style' });
-cssInterop(UIActionsheet.SectionHeaderText, { className: 'style' });
-// @ts-ignore
+cssInterop(UIActionsheet.SectionList, { className: "style" });
+cssInterop(UIActionsheet.SectionHeaderText, { className: "style" });
+
 cssInterop(UIActionsheet.Icon, {
   className: {
-    target: 'style',
+    target: "style",
     nativeStyleToProp: {
       height: true,
       width: true,
       fill: true,
-      color: 'classNameColor',
+      color: "classNameColor",
       stroke: true,
     },
   },
 });
 
-const actionsheetStyle = tva({ base: 'w-full h-full web:pointer-events-none' });
+const actionsheetStyle = tva({ base: "w-full h-full web:pointer-events-none" });
 
 const actionsheetContentStyle = tva({
-  base: 'items-center rounded-tl-3xl rounded-tr-3xl p-5 pt-2 bg-background-0 web:pointer-events-auto web:select-none shadow-hard-5 border border-b-0 border-outline-100',
+  base: "items-center rounded-tl-3xl rounded-tr-3xl p-5 pt-2 bg-background-0 web:pointer-events-auto web:select-none shadow-hard-5 border border-b-0 border-outline-100",
 });
 
 const actionsheetItemStyle = tva({
-  base: 'w-full flex-row items-center p-3 rounded-sm data-[disabled=true]:opacity-40 data-[disabled=true]:web:pointer-events-auto data-[disabled=true]:web:cursor-not-allowed hover:bg-background-50 active:bg-background-100 data-[focus=true]:bg-background-100 web:data-[focus-visible=true]:bg-background-100 web:data-[focus-visible=true]:outline-indicator-primary gap-2',
+  base: "w-full flex-row items-center p-3 rounded-sm data-[disabled=true]:opacity-40 data-[disabled=true]:web:pointer-events-auto data-[disabled=true]:web:cursor-not-allowed hover:bg-background-50 active:bg-background-100 data-[focus=true]:bg-background-100 web:data-[focus-visible=true]:bg-background-100 web:data-[focus-visible=true]:outline-indicator-primary gap-2",
 });
 
 const actionsheetItemTextStyle = tva({
-  base: 'text-typography-700 font-normal font-body',
+  base: "text-typography-700 font-normal font-body",
   variants: {
     isTruncated: {
-      true: '',
+      true: "",
     },
     bold: {
-      true: 'font-bold',
+      true: "font-bold",
     },
     underline: {
-      true: 'underline',
+      true: "underline",
     },
     strikeThrough: {
-      true: 'line-through',
+      true: "line-through",
     },
     size: {
-      '2xs': 'text-2xs',
-      'xs': 'text-xs',
-      'sm': 'text-sm',
-      'md': 'text-md',
-      'lg': 'text-lg',
-      'xl': 'text-xl',
-      '2xl': 'text-2xl',
-      '3xl': 'text-3xl',
-      '4xl': 'text-4xl',
-      '5xl': 'text-5xl',
-      '6xl': 'text-6xl',
+      "2xs": "text-2xs",
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-md",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "6xl": "text-6xl",
     },
   },
 });
 
 const actionsheetDragIndicatorStyle = tva({
-  base: 'w-16 h-1 bg-background-400 rounded-full',
+  base: "w-16 h-1 bg-background-400 rounded-full",
 });
 
 const actionsheetDragIndicatorWrapperStyle = tva({
-  base: 'w-full py-1 items-center',
+  base: "w-full py-1 items-center",
 });
 
 const actionsheetBackdropStyle = tva({
-  base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default web:pointer-events-auto',
+  base: "absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default web:pointer-events-auto",
 });
 
 const actionsheetScrollViewStyle = tva({
-  base: 'w-full h-auto',
+  base: "w-full h-auto",
 });
 
 const actionsheetVirtualizedListStyle = tva({
-  base: 'w-full h-auto',
+  base: "w-full h-auto",
 });
 
 const actionsheetFlatListStyle = tva({
-  base: 'w-full h-auto',
+  base: "w-full h-auto",
 });
 
 const actionsheetSectionListStyle = tva({
-  base: 'w-full h-auto',
+  base: "w-full h-auto",
 });
 
 const actionsheetSectionHeaderTextStyle = tva({
-  base: 'leading-5 font-bold font-heading my-0 text-typography-500 p-3 uppercase',
+  base: "leading-5 font-bold font-heading my-0 text-typography-500 p-3 uppercase",
   variants: {
     isTruncated: {
-      true: '',
+      true: "",
     },
     bold: {
-      true: 'font-bold',
+      true: "font-bold",
     },
     underline: {
-      true: 'underline',
+      true: "underline",
     },
     strikeThrough: {
-      true: 'line-through',
+      true: "line-through",
     },
     size: {
-      '5xl': 'text-5xl',
-      '4xl': 'text-4xl',
-      '3xl': 'text-3xl',
-      '2xl': 'text-2xl',
-      'xl': 'text-xl',
-      'lg': 'text-lg',
-      'md': 'text-md',
-      'sm': 'text-sm',
-      'xs': 'text-xs',
+      "5xl": "text-5xl",
+      "4xl": "text-4xl",
+      "3xl": "text-3xl",
+      "2xl": "text-2xl",
+      xl: "text-xl",
+      lg: "text-lg",
+      md: "text-md",
+      sm: "text-sm",
+      xs: "text-xs",
     },
 
     sub: {
-      true: 'text-xs',
+      true: "text-xs",
     },
     italic: {
-      true: 'italic',
+      true: "italic",
     },
     highlight: {
-      true: 'bg-yellow500',
+      true: "bg-yellow500",
     },
   },
   defaultVariants: {
-    size: 'xs',
+    size: "xs",
   },
 });
 
 const actionsheetIconStyle = tva({
-  base: 'text-background-500 fill-none',
+  base: "text-background-500 fill-none",
   variants: {
     size: {
-      '2xs': 'h-3 w-3',
-      'xs': 'h-3.5 w-3.5',
-      'sm': 'h-4 w-4',
-      'md': 'w-[18px] h-[18px]',
-      'lg': 'h-5 w-5',
-      'xl': 'h-6 w-6',
+      "2xs": "h-3 w-3",
+      xs: "h-3.5 w-3.5",
+      sm: "h-4 w-4",
+      md: "w-[18px] h-[18px]",
+      lg: "h-5 w-5",
+      xl: "h-6 w-6",
     },
   },
 });
@@ -389,7 +398,7 @@ const ActionsheetItemText = React.forwardRef<
       bold,
       underline,
       strikeThrough,
-      size = 'sm',
+      size = "sm",
       className,
       ...props
     },
@@ -568,8 +577,8 @@ const ActionsheetSectionHeaderText = React.forwardRef<
 const ActionsheetIcon = React.forwardRef<
   React.ElementRef<typeof UIActionsheet.Icon>,
   IActionsheetIconProps
->(({ className, size = 'sm', ...props }, ref) => {
-  if (typeof size === 'number') {
+>(({ className, size = "sm", ...props }, ref) => {
+  if (typeof size === "number") {
     return (
       <UIActionsheet.Icon
         ref={ref}
diff --git a/components/ui/alert-dialog/index.tsx b/components/ui/alert-dialog/index.tsx
index 457db9c..2bd6353 100644
--- a/components/ui/alert-dialog/index.tsx
+++ b/components/ui/alert-dialog/index.tsx
@@ -6,7 +6,7 @@ import {
   withStyleContext,
   useStyleContext,
 } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
+
 import { cssInterop } from 'nativewind';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 import {
@@ -14,17 +14,14 @@ import {
   AnimatePresence,
   createMotionAnimatedComponent,
 } from '@legendapp/motion';
-import { View, Pressable, ScrollView, Platform } from 'react-native';
+import { View, Pressable, ScrollView } from 'react-native';
 
 const AnimatedPressable = createMotionAnimatedComponent(Pressable);
 
 const SCOPE = 'ALERT_DIALOG';
 
 const UIAccessibleAlertDialog = createAlertDialog({
-  Root:
-    Platform.OS === 'web'
-      ? withStyleContext(View, SCOPE)
-      : withStyleContextAndStates(View, SCOPE),
+  Root: withStyleContext(View, SCOPE),
   Body: ScrollView,
   Content: Motion.View,
   CloseButton: Pressable,
@@ -34,17 +31,8 @@ const UIAccessibleAlertDialog = createAlertDialog({
   AnimatePresence: AnimatePresence,
 });
 
-cssInterop(UIAccessibleAlertDialog, { className: 'style' });
-cssInterop(UIAccessibleAlertDialog.Content, { className: 'style' });
-cssInterop(UIAccessibleAlertDialog.CloseButton, { className: 'style' });
-cssInterop(UIAccessibleAlertDialog.Header, { className: 'style' });
-cssInterop(UIAccessibleAlertDialog.Footer, { className: 'style' });
-cssInterop(UIAccessibleAlertDialog.Body, {
-  className: 'style',
-  contentContainerClassName: 'contentContainerStyle',
-  indicatorClassName: 'indicatorStyle',
-});
-cssInterop(UIAccessibleAlertDialog.Backdrop, { className: 'style' });
+cssInterop(Motion.View, { className: 'style' });
+cssInterop(AnimatedPressable, { className: 'style' });
 
 const alertDialogStyle = tva({
   base: 'group/modal w-full h-full justify-center items-center web:pointer-events-none',
diff --git a/components/ui/alert/index.tsx b/components/ui/alert/index.tsx
index d8d57af..a861c79 100644
--- a/components/ui/alert/index.tsx
+++ b/components/ui/alert/index.tsx
@@ -1,106 +1,106 @@
-'use client';
-import { createAlert } from '@gluestack-ui/alert';
-import { View, Text } from 'react-native';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
+"use client";
+import { createAlert } from "@gluestack-ui/alert";
+import { View, Text } from "react-native";
+import { tva } from "@gluestack-ui/nativewind-utils/tva";
 import {
   withStyleContext,
   useStyleContext,
-} from '@gluestack-ui/nativewind-utils/withStyleContext';
-import React, { useMemo } from 'react';
-import { Svg } from 'react-native-svg';
-import { cssInterop } from 'nativewind';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+} from "@gluestack-ui/nativewind-utils/withStyleContext";
+import React, { useMemo } from "react";
+import { Svg } from "react-native-svg";
+import { cssInterop } from "nativewind";
+import type { VariantProps } from "@gluestack-ui/nativewind-utils";
 
-const SCOPE = 'ALERT';
+const SCOPE = "ALERT";
 
 const alertStyle = tva({
-  base: 'items-center py-3 px-4 rounded-md flex-row gap-2 border-outline-100',
+  base: "items-center py-3 px-4 rounded-md flex-row gap-2 border-outline-100",
 
   variants: {
     action: {
-      error: 'bg-background-error',
-      warning: 'bg-background-warning',
-      success: 'bg-background-success',
-      info: 'bg-background-info',
-      muted: 'bg-background-muted',
+      error: "bg-background-error",
+      warning: "bg-background-warning",
+      success: "bg-background-success",
+      info: "bg-background-info",
+      muted: "bg-background-muted",
     },
 
     variant: {
-      solid: '',
-      outline: 'border bg-background-0',
+      solid: "",
+      outline: "border bg-background-0",
     },
   },
 });
 
 const alertTextStyle = tva({
-  base: 'font-normal font-body',
+  base: "flex-1 font-normal font-body",
 
   variants: {
     isTruncated: {
-      true: 'web:truncate',
+      true: "web:truncate",
     },
     bold: {
-      true: 'font-bold',
+      true: "font-bold",
     },
     underline: {
-      true: 'underline',
+      true: "underline",
     },
     strikeThrough: {
-      true: 'line-through',
+      true: "line-through",
     },
     size: {
-      '2xs': 'text-2xs',
-      'xs': 'text-xs',
-      'sm': 'text-sm',
-      'md': 'text-md',
-      'lg': 'text-lg',
-      'xl': 'text-xl',
-      '2xl': 'text-2xl',
-      '3xl': 'text-3xl',
-      '4xl': 'text-4xl',
-      '5xl': 'text-5xl',
-      '6xl': 'text-6xl',
+      "2xs": "text-2xs",
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-md",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "6xl": "text-6xl",
     },
     sub: {
-      true: 'text-xs',
+      true: "text-xs",
     },
     italic: {
-      true: 'italic',
+      true: "italic",
     },
     highlight: {
-      true: 'bg-yellow-500',
+      true: "bg-yellow-500",
     },
   },
   parentVariants: {
     action: {
-      error: 'text-error-800',
-      warning: 'text-warning-800',
-      success: 'text-success-800',
-      info: 'text-info-800',
-      muted: 'text-background-800',
+      error: "text-error-800",
+      warning: "text-warning-800",
+      success: "text-success-800",
+      info: "text-info-800",
+      muted: "text-background-800",
     },
   },
 });
 
 const alertIconStyle = tva({
-  base: 'fill-none',
+  base: "fill-none",
   variants: {
     size: {
-      '2xs': 'h-3 w-3',
-      'xs': 'h-3.5 w-3.5',
-      'sm': 'h-4 w-4',
-      'md': 'h-[18px] w-[18px]',
-      'lg': 'h-5 w-5',
-      'xl': 'h-6 w-6',
+      "2xs": "h-3 w-3",
+      xs: "h-3.5 w-3.5",
+      sm: "h-4 w-4",
+      md: "h-[18px] w-[18px]",
+      lg: "h-5 w-5",
+      xl: "h-6 w-6",
     },
   },
   parentVariants: {
     action: {
-      error: 'text-error-800',
-      warning: 'text-warning-800',
-      success: 'text-success-800',
-      info: 'text-info-800',
-      muted: 'text-secondary-800',
+      error: "text-error-800",
+      warning: "text-warning-800",
+      success: "text-success-800",
+      info: "text-info-800",
+      muted: "text-secondary-800",
     },
   },
 });
@@ -115,6 +115,7 @@ type IPrimitiveIcon = React.ComponentPropsWithoutRef<typeof Svg> & {
   as?: React.ElementType;
   className?: string;
   classNameColor?: string;
+  style?: any;
 };
 const PrimitiveIcon = React.forwardRef<
   React.ElementRef<typeof Svg>,
@@ -128,8 +129,9 @@ const PrimitiveIcon = React.forwardRef<
       color,
       classNameColor,
       size,
-      stroke = 'currentColor',
+      stroke = "currentColor",
       as: AsComp,
+      style,
       ...props
     },
     ref
@@ -147,14 +149,22 @@ const PrimitiveIcon = React.forwardRef<
     if (fill) {
       colorProps = { ...colorProps, fill: fill };
     }
-    if (stroke !== 'currentColor') {
+    if (stroke !== "currentColor") {
       colorProps = { ...colorProps, stroke: stroke };
-    } else if (stroke === 'currentColor' && color !== undefined) {
+    } else if (stroke === "currentColor" && color !== undefined) {
       colorProps = { ...colorProps, stroke: color };
     }
 
     if (AsComp) {
-      return <AsComp ref={ref} {...props} {...sizeProps} {...colorProps} />;
+      return (
+        <AsComp
+          ref={ref}
+          {...props}
+          style={style}
+          {...sizeProps}
+          {...colorProps}
+        />
+      );
     }
     return (
       <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
@@ -162,32 +172,21 @@ const PrimitiveIcon = React.forwardRef<
   }
 );
 
-const IconWrapper = React.forwardRef<
-  React.ElementRef<typeof PrimitiveIcon>,
-  IPrimitiveIcon
->(({ ...props }, ref) => {
-  return <PrimitiveIcon {...props} ref={ref} />;
-});
-
 export const UIAlert = createAlert({
   Root: withStyleContext(View, SCOPE),
   Text: Text,
-  Icon: IconWrapper,
+  Icon: PrimitiveIcon,
 });
 
-cssInterop(UIAlert, { className: 'style' });
-//@ts-ignore
-cssInterop(UIAlert.Text, { className: 'style' });
-//@ts-ignore
-cssInterop(IconWrapper, {
+cssInterop(PrimitiveIcon, {
   className: {
-    target: 'style',
+    target: "style",
     nativeStyleToProp: {
       height: true,
       width: true,
-      //@ts-ignore
+
       fill: true,
-      color: 'classNameColor',
+      color: "classNameColor",
       stroke: true,
     },
   },
@@ -195,12 +194,12 @@ cssInterop(IconWrapper, {
 
 type IAlertProps = Omit<
   React.ComponentPropsWithoutRef<typeof UIAlert>,
-  'context'
+  "context"
 > &
   VariantProps<typeof alertStyle>;
 
 const Alert = React.forwardRef<React.ElementRef<typeof UIAlert>, IAlertProps>(
-  ({ className, variant = 'solid', action = 'muted', ...props }, ref) => {
+  ({ className, variant = "solid", action = "muted", ...props }, ref) => {
     return (
       <UIAlert
         className={alertStyle({ action, variant, class: className })}
@@ -226,7 +225,7 @@ const AlertText = React.forwardRef<
       bold,
       underline,
       strikeThrough,
-      size = 'md',
+      size = "md",
       sub,
       italic,
       highlight,
@@ -264,10 +263,10 @@ type IAlertIconProps = React.ComponentPropsWithoutRef<typeof UIAlert.Icon> &
 const AlertIcon = React.forwardRef<
   React.ElementRef<typeof UIAlert.Icon>,
   IAlertIconProps
->(({ className, size = 'md', ...props }, ref) => {
+>(({ className, size = "md", ...props }, ref) => {
   const { action: parentAction } = useStyleContext(SCOPE);
 
-  if (typeof size === 'number') {
+  if (typeof size === "number") {
     return (
       <UIAlert.Icon
         ref={ref}
@@ -303,8 +302,8 @@ const AlertIcon = React.forwardRef<
   );
 });
 
-Alert.displayName = 'Alert';
-AlertText.displayName = 'AlertText';
-AlertIcon.displayName = 'AlertIcon';
+Alert.displayName = "Alert";
+AlertText.displayName = "AlertText";
+AlertIcon.displayName = "AlertIcon";
 
 export { Alert, AlertText, AlertIcon };
diff --git a/components/ui/avatar/index.tsx b/components/ui/avatar/index.tsx
index 31fcbdd..b6863aa 100644
--- a/components/ui/avatar/index.tsx
+++ b/components/ui/avatar/index.tsx
@@ -9,7 +9,6 @@ import {
   withStyleContext,
   useStyleContext,
 } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { cssInterop } from 'nativewind';
 const SCOPE = 'AVATAR';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
@@ -21,12 +20,6 @@ const UIAvatar = createAvatar({
   FallbackText: Text,
 });
 
-cssInterop(UIAvatar, { className: 'style' });
-cssInterop(UIAvatar.Badge, { className: 'style' });
-cssInterop(UIAvatar.Group, { className: 'style' });
-cssInterop(UIAvatar.Image, { className: 'style' });
-cssInterop(UIAvatar.FallbackText, { className: 'style' });
-
 const avatarStyle = tva({
   base: 'rounded-full justify-center items-center relative bg-primary-600 group-[.avatar-group]/avatar-group:-ml-2.5',
   variants: {
@@ -161,10 +154,11 @@ export const AvatarImage = React.forwardRef<
       className={avatarImageStyle({
         class: className,
       })}
-      // @ts-ignore
+      // @ts-expect-error
       style={
         Platform.OS === 'web'
-          ? { height: 'revert-layer', width: 'revert-layer' }
+          ? // eslint-disable-next-line react-native/no-inline-styles
+            { height: 'revert-layer', width: 'revert-layer' }
           : undefined
       }
     />
diff --git a/components/ui/badge/index.tsx b/components/ui/badge/index.tsx
index 35db5ba..9faf615 100644
--- a/components/ui/badge/index.tsx
+++ b/components/ui/badge/index.tsx
@@ -103,6 +103,7 @@ type IPrimitiveIcon = React.ComponentPropsWithoutRef<typeof Svg> & {
   as?: React.ElementType;
   className?: string;
   classNameColor?: string;
+  style?: any;
 };
 
 const PrimitiveIcon = React.forwardRef<
@@ -119,6 +120,7 @@ const PrimitiveIcon = React.forwardRef<
       size,
       stroke = 'currentColor',
       as: AsComp,
+      style,
       ...props
     },
     ref
@@ -143,7 +145,15 @@ const PrimitiveIcon = React.forwardRef<
     }
 
     if (AsComp) {
-      return <AsComp ref={ref} {...props} {...sizeProps} {...colorProps} />;
+      return (
+        <AsComp
+          ref={ref}
+          {...props}
+          style={style}
+          {...sizeProps}
+          {...colorProps}
+        />
+      );
     }
     return (
       <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
@@ -152,15 +162,14 @@ const PrimitiveIcon = React.forwardRef<
 );
 
 const ContextView = withStyleContext(View, SCOPE);
-cssInterop(ContextView, { className: 'style' });
-//@ts-ignore
+
 cssInterop(PrimitiveIcon, {
   className: {
     target: 'style',
     nativeStyleToProp: {
       height: true,
       width: true,
-      //@ts-ignore
+
       fill: true,
       color: 'classNameColor',
       stroke: true,
diff --git a/components/ui/bottomsheet/index.tsx b/components/ui/bottomsheet/index.tsx
deleted file mode 100644
index d627f0e..0000000
--- a/components/ui/bottomsheet/index.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-import GorhomBottomSheet, {
-  BottomSheetBackdrop as GorhomBottomSheetBackdrop,
-  BottomSheetView as GorhomBottomSheetView,
-  BottomSheetHandle,
-  BottomSheetTextInput as GorhomBottomSheetInput,
-  BottomSheetScrollView as GorhomBottomSheetScrollView,
-  BottomSheetFlatList as GorhomBottomSheetFlatList,
-  BottomSheetSectionList as GorhomBottomSheetSectionList,
-} from '@gorhom/bottom-sheet';
-import { Platform } from 'react-native';
-import type { PressableProps, TextProps } from 'react-native';
-import { FocusScope } from '@react-native-aria/focus';
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { Pressable, Text } from 'react-native';
-import { cssInterop } from 'nativewind';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-
-const bottomSheetBackdropStyle = tva({
-  base: 'absolute inset-0 flex-1 touch-none select-none bg-black opacity-0',
-});
-
-const bottomSheetContentStyle = tva({
-  base: 'mt-2',
-});
-const bottomSheetTriggerStyle = tva({
-  base: '',
-});
-
-const bottomSheetIndicatorStyle = tva({
-  base: 'py-1 w-full items-center rounded-t-lg ',
-});
-
-const bottomSheetItemStyle = tva({
-  base: 'p-3 flex-row items-center rounded-sm w-full disabled:opacity-0.4 web:pointer-events-auto disabled:cursor-not-allowed hover:bg-background-50 active:bg-background-100 focus:bg-background-100 web:focus-visible:bg-background-100',
-});
-
-const BottomSheetContext = createContext<{
-  visible: boolean;
-  bottomSheetRef: React.RefObject<GorhomBottomSheet>;
-  handleClose: () => void;
-  handleOpen: () => void;
-}>({
-  visible: false,
-  bottomSheetRef: { current: null },
-  handleClose: () => {},
-  handleOpen: () => {},
-});
-
-type IBottomSheetProps = React.ComponentProps<typeof GorhomBottomSheet>;
-export const BottomSheet = ({
-  snapToIndex = 1,
-  onOpen,
-  onClose,
-  ...props
-}: {
-  snapToIndex?: number;
-  children?: React.ReactNode;
-  onOpen?: () => void;
-  onClose?: () => void;
-}) => {
-  const bottomSheetRef = useRef<GorhomBottomSheet>(null);
-
-  const [visible, setVisible] = useState(false);
-
-  const handleOpen = useCallback(() => {
-    bottomSheetRef.current?.snapToIndex(snapToIndex);
-    setVisible(true);
-    onOpen && onOpen();
-  }, [onOpen, snapToIndex]);
-
-  const handleClose = useCallback(() => {
-    bottomSheetRef.current?.close();
-    setVisible(false);
-    onClose && onClose();
-  }, [onClose]);
-
-  return (
-    <BottomSheetContext.Provider
-      value={{
-        visible,
-        bottomSheetRef,
-        handleClose,
-        handleOpen,
-      }}
-    >
-      {props.children}
-    </BottomSheetContext.Provider>
-  );
-};
-
-export const BottomSheetPortal = ({
-  snapPoints,
-  handleComponent: DragIndicator,
-  backdropComponent: BackDrop,
-  ...props
-}: Partial<IBottomSheetProps> & {
-  defaultIsOpen?: boolean;
-  snapToIndex?: number;
-  snapPoints: string[];
-}) => {
-  const { bottomSheetRef, handleClose } = useContext(BottomSheetContext);
-
-  const handleSheetChanges = useCallback(
-    (index: number) => {
-      if (index === 0 || index === -1) {
-        handleClose();
-      }
-    },
-    [handleClose]
-  );
-
-  return (
-    <GorhomBottomSheet
-      ref={bottomSheetRef}
-      snapPoints={snapPoints}
-      index={-1}
-      backdropComponent={BackDrop}
-      onChange={handleSheetChanges}
-      handleComponent={DragIndicator}
-      enablePanDownToClose={true}
-      {...props}
-    >
-      {props.children}
-    </GorhomBottomSheet>
-  );
-};
-
-export const BottomSheetTrigger = ({
-  className,
-  ...props
-}: PressableProps & { className?: string }) => {
-  const { handleOpen } = useContext(BottomSheetContext);
-  return (
-    <Pressable
-      onPress={(e) => {
-        props.onPress && props.onPress(e);
-        handleOpen();
-      }}
-      {...props}
-      className={bottomSheetTriggerStyle({
-        className: className,
-      })}
-    >
-      {props.children}
-    </Pressable>
-  );
-};
-type IBottomSheetBackdrop = React.ComponentProps<
-  typeof GorhomBottomSheetBackdrop
->;
-
-export const BottomSheetBackdrop = ({
-  disappearsOnIndex = -1,
-  appearsOnIndex = 1,
-  className,
-  ...props
-}: Partial<IBottomSheetBackdrop> & { className?: string }) => {
-  return (
-    <GorhomBottomSheetBackdrop
-      // @ts-ignore
-      className={bottomSheetBackdropStyle({
-        className: className,
-      })}
-      disappearsOnIndex={disappearsOnIndex}
-      appearsOnIndex={appearsOnIndex}
-      {...props}
-    />
-  );
-};
-
-cssInterop(GorhomBottomSheetBackdrop, { className: 'style' });
-
-type IBottomSheetDragIndicator = React.ComponentProps<typeof BottomSheetHandle>;
-
-export const BottomSheetDragIndicator = ({
-  children,
-  className,
-  ...props
-}: Partial<IBottomSheetDragIndicator> & { className?: string }) => {
-  return (
-    <BottomSheetHandle
-      {...props}
-      // @ts-ignore
-      className={bottomSheetIndicatorStyle({
-        className: className,
-      })}
-    >
-      {children}
-    </BottomSheetHandle>
-  );
-};
-
-cssInterop(BottomSheetHandle, { className: 'style' });
-
-type IBottomSheetContent = React.ComponentProps<typeof GorhomBottomSheetView>;
-
-export const BottomSheetContent = ({ ...props }: IBottomSheetContent) => {
-  const { handleClose, visible } = useContext(BottomSheetContext);
-  const keyDownHandlers = useMemo(() => {
-    return Platform.OS === 'web'
-      ? {
-          onKeyDown: (e: React.KeyboardEvent) => {
-            if (e.key === 'Escape') {
-              e.preventDefault();
-              handleClose();
-              return;
-            }
-          },
-        }
-      : {};
-  }, [handleClose]);
-
-  if (Platform.OS === 'web')
-    return (
-      <GorhomBottomSheetView
-        {...props}
-        // @ts-ignore
-        {...keyDownHandlers}
-        className={bottomSheetContentStyle({
-          className: props.className,
-        })}
-      >
-        {visible && (
-          <FocusScope contain={visible} autoFocus={true} restoreFocus={true}>
-            {props.children}
-          </FocusScope>
-        )}
-      </GorhomBottomSheetView>
-    );
-
-  return (
-    <GorhomBottomSheetView
-      {...props}
-      // @ts-ignore
-      {...keyDownHandlers}
-      className={bottomSheetContentStyle({
-        className: props.className,
-      })}
-    >
-      {props.children}
-    </GorhomBottomSheetView>
-  );
-};
-
-cssInterop(GorhomBottomSheetView, { className: 'style' });
-
-export const BottomSheetItem = ({
-  children,
-  className,
-  closeOnSelect = true,
-  ...props
-}: PressableProps & {
-  closeOnSelect?: boolean;
-}) => {
-  const { handleClose } = useContext(BottomSheetContext);
-  return (
-    <Pressable
-      {...props}
-      className={bottomSheetItemStyle({
-        className: className,
-      })}
-      onPress={(e) => {
-        if (closeOnSelect) {
-          handleClose();
-        }
-        props.onPress && props.onPress(e);
-      }}
-      role="button"
-    >
-      {children}
-    </Pressable>
-  );
-};
-
-export const BottomSheetItemText = ({ ...props }: TextProps) => {
-  return <Text {...props} />;
-};
-
-export const BottomSheetScrollView = GorhomBottomSheetScrollView;
-export const BottomSheetFlatList = GorhomBottomSheetFlatList;
-export const BottomSheetSectionList = GorhomBottomSheetSectionList;
-export const BottomSheetTextInput = GorhomBottomSheetInput;
-
-cssInterop(GorhomBottomSheetInput, { className: 'style' });
-cssInterop(GorhomBottomSheetScrollView, { className: 'style' });
-cssInterop(GorhomBottomSheetFlatList, { className: 'style' });
-cssInterop(GorhomBottomSheetSectionList, { className: 'style' });
diff --git a/components/ui/button/index.tsx b/components/ui/button/index.tsx
index 920a681..51e843b 100644
--- a/components/ui/button/index.tsx
+++ b/components/ui/button/index.tsx
@@ -8,16 +8,8 @@ import {
   withStyleContext,
   useStyleContext,
 } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
 import { cssInterop } from 'nativewind';
-import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
-import {
-  ActivityIndicator,
-  Pressable,
-  Text,
-  View,
-  Platform,
-} from 'react-native';
+import { ActivityIndicator, Pressable, Text, View } from 'react-native';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
 const SCOPE = 'BUTTON';
@@ -38,6 +30,7 @@ type IPrimitiveIcon = React.ComponentPropsWithoutRef<typeof Svg> & {
   as?: React.ElementType;
   className?: string;
   classNameColor?: string;
+  style?: any;
 };
 
 const PrimitiveIcon = React.forwardRef<
@@ -54,6 +47,7 @@ const PrimitiveIcon = React.forwardRef<
       size,
       stroke = 'currentColor',
       as: AsComp,
+      style,
       ...props
     },
     ref
@@ -78,7 +72,15 @@ const PrimitiveIcon = React.forwardRef<
     }
 
     if (AsComp) {
-      return <AsComp ref={ref} {...props} {...sizeProps} {...colorProps} />;
+      return (
+        <AsComp
+          ref={ref}
+          {...props}
+          style={style}
+          {...sizeProps}
+          {...colorProps}
+        />
+      );
     }
     return (
       <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
@@ -86,33 +88,22 @@ const PrimitiveIcon = React.forwardRef<
   }
 );
 
-const Root =
-  Platform.OS === 'web'
-    ? withStyleContext(ButtonWrapper, SCOPE)
-    : withStyleContextAndStates(ButtonWrapper, SCOPE);
+const Root = withStyleContext(ButtonWrapper, SCOPE);
 
 const UIButton = createButton({
   Root: Root,
   Text,
   Group: View,
   Spinner: ActivityIndicator,
-  Icon: withStates(PrimitiveIcon),
+  Icon: PrimitiveIcon,
 });
 
-cssInterop(Root, { className: 'style' });
-cssInterop(UIButton.Text, { className: 'style' });
-cssInterop(UIButton.Group, { className: 'style' });
-cssInterop(UIButton.Spinner, {
-  className: { target: 'style', nativeStyleToProp: { color: true } },
-});
-//@ts-ignore
 cssInterop(PrimitiveIcon, {
   className: {
     target: 'style',
     nativeStyleToProp: {
       height: true,
       width: true,
-      //@ts-ignore
       fill: true,
       color: 'classNameColor',
       stroke: true,
diff --git a/components/ui/center/index.tsx b/components/ui/center/index.tsx
index e9092a5..431ffa0 100644
--- a/components/ui/center/index.tsx
+++ b/components/ui/center/index.tsx
@@ -1,7 +1,7 @@
-import { View, ViewProps } from 'react-native';
-import React from 'react';
-import { centerStyle } from './styles';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { View, ViewProps } from "react-native";
+import React from "react";
+import { centerStyle } from "./styles";
+import type { VariantProps } from "@gluestack-ui/nativewind-utils";
 
 type ICenterProps = ViewProps & VariantProps<typeof centerStyle>;
 
@@ -17,6 +17,6 @@ const Center = React.forwardRef<React.ElementRef<typeof View>, ICenterProps>(
   }
 );
 
-Center.displayName = 'Center';
+Center.displayName = "Center";
 
 export { Center };
diff --git a/components/ui/center/index.web.tsx b/components/ui/center/index.web.tsx
index e9f3c16..ac339d4 100644
--- a/components/ui/center/index.web.tsx
+++ b/components/ui/center/index.web.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import { centerStyle } from './styles';
+import React from "react";
+import { centerStyle } from "./styles";
 
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import type { VariantProps } from "@gluestack-ui/nativewind-utils";
 
-type ICenterProps = React.ComponentPropsWithoutRef<'div'> &
+type ICenterProps = React.ComponentPropsWithoutRef<"div"> &
   VariantProps<typeof centerStyle>;
 
 const Center = React.forwardRef<HTMLDivElement, ICenterProps>(
@@ -14,6 +14,6 @@ const Center = React.forwardRef<HTMLDivElement, ICenterProps>(
   }
 );
 
-Center.displayName = 'Center';
+Center.displayName = "Center";
 
 export { Center };
diff --git a/components/ui/center/styles.tsx b/components/ui/center/styles.tsx
index 8b744bc..fb5edcc 100644
--- a/components/ui/center/styles.tsx
+++ b/components/ui/center/styles.tsx
@@ -1,7 +1,7 @@
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+import { tva } from "@gluestack-ui/nativewind-utils/tva";
+import { isWeb } from "@gluestack-ui/nativewind-utils/IsWeb";
 
-const baseStyle = isWeb ? 'flex flex-col relative z-0' : '';
+const baseStyle = isWeb ? "flex flex-col relative z-0" : "";
 
 export const centerStyle = tva({
   base: `justify-center items-center ${baseStyle}`,
diff --git a/components/ui/checkbox/index.tsx b/components/ui/checkbox/index.tsx
index 7924e23..ba2d0a5 100644
--- a/components/ui/checkbox/index.tsx
+++ b/components/ui/checkbox/index.tsx
@@ -1,19 +1,16 @@
-'use client';
-import React, { useMemo } from 'react';
-import { createCheckbox } from '@gluestack-ui/checkbox';
-import { View, Pressable, Text } from 'react-native';
-import type { TextProps, ViewProps } from 'react-native';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { Svg } from 'react-native-svg';
+"use client";
+import React, { useMemo } from "react";
+import { createCheckbox } from "@gluestack-ui/checkbox";
+import { View, Pressable, Text, Platform } from "react-native";
+import type { TextProps, ViewProps } from "react-native";
+import { tva } from "@gluestack-ui/nativewind-utils/tva";
+import { Svg } from "react-native-svg";
 import {
   withStyleContext,
   useStyleContext,
-} from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
-import { cssInterop } from 'nativewind';
-import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { Platform } from 'react-native';
+} from "@gluestack-ui/nativewind-utils/withStyleContext";
+import { cssInterop } from "nativewind";
+import type { VariantProps } from "@gluestack-ui/nativewind-utils";
 
 const IndicatorWrapper = React.forwardRef<
   React.ElementRef<typeof View>,
@@ -38,6 +35,7 @@ type IPrimitiveIcon = React.ComponentPropsWithoutRef<typeof Svg> & {
   as?: React.ElementType;
   className?: string;
   classNameColor?: string;
+  style?: any;
 };
 
 const IconWrapper = React.forwardRef<
@@ -59,8 +57,9 @@ const PrimitiveIcon = React.forwardRef<
       color,
       classNameColor,
       size,
-      stroke = 'currentColor',
+      stroke = "currentColor",
       as: AsComp,
+      style,
       ...props
     },
     ref
@@ -78,14 +77,22 @@ const PrimitiveIcon = React.forwardRef<
     if (fill) {
       colorProps = { ...colorProps, fill: fill };
     }
-    if (stroke !== 'currentColor') {
+    if (stroke !== "currentColor") {
       colorProps = { ...colorProps, stroke: stroke };
-    } else if (stroke === 'currentColor' && color !== undefined) {
+    } else if (stroke === "currentColor" && color !== undefined) {
       colorProps = { ...colorProps, stroke: color };
     }
 
     if (AsComp) {
-      return <AsComp ref={ref} {...props} {...sizeProps} {...colorProps} />;
+      return (
+        <AsComp
+          ref={ref}
+          {...props}
+          style={style}
+          {...sizeProps}
+          {...colorProps}
+        />
+      );
     }
     return (
       <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
@@ -93,80 +100,73 @@ const PrimitiveIcon = React.forwardRef<
   }
 );
 
-const SCOPE = 'CHECKBOX';
+const SCOPE = "CHECKBOX";
 const UICheckbox = createCheckbox({
-  // @ts-ignore
+  // @ts-expect-error
   Root:
-    Platform.OS === 'web'
+    Platform.OS === "web"
       ? withStyleContext(View, SCOPE)
-      : withStyleContextAndStates(Pressable, SCOPE),
-  Group: Platform.OS === 'web' ? View : withStates(View),
-  Icon: Platform.OS === 'web' ? IconWrapper : withStates(IconWrapper),
-  Label: Platform.OS === 'web' ? LabelWrapper : withStates(LabelWrapper),
-  Indicator:
-    Platform.OS === 'web' ? IndicatorWrapper : withStates(IndicatorWrapper),
+      : withStyleContext(Pressable, SCOPE),
+  Group: View,
+  Icon: IconWrapper,
+  Label: LabelWrapper,
+  Indicator: IndicatorWrapper,
 });
 
-cssInterop(UICheckbox, { className: 'style' });
-cssInterop(UICheckbox.Group, { className: 'style' });
-cssInterop(LabelWrapper, { className: 'style' });
-cssInterop(IndicatorWrapper, { className: 'style' });
-//@ts-ignore
 cssInterop(IconWrapper, {
   className: {
-    target: 'style',
+    target: "style",
     nativeStyleToProp: {
       height: true,
       width: true,
-      //@ts-ignore
       fill: true,
-      color: 'classNameColor',
+      color: "classNameColor",
       stroke: true,
     },
   },
 });
 
 const checkboxStyle = tva({
-  base: 'group/checkbox flex-row items-center justify-start web:cursor-pointer data-[disabled=true]:cursor-not-allowed',
+  base: "group/checkbox flex-row items-center justify-start web:cursor-pointer data-[disabled=true]:cursor-not-allowed",
   variants: {
     size: {
-      lg: 'gap-2',
-      md: 'gap-2',
-      sm: 'gap-1.5',
+      lg: "gap-2",
+      md: "gap-2",
+      sm: "gap-1.5",
     },
   },
 });
 
 const checkboxIndicatorStyle = tva({
-  base: 'justify-center items-center border-outline-400 bg-transparent rounded web:data-[focus-visible=true]:outline-none web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-indicator-primary data-[checked=true]:bg-primary-600 data-[checked=true]:border-primary-600 data-[hover=true]:data-[checked=false]:border-outline-500 data-[hover=true]:bg-transparent data-[hover=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[checked=true]:bg-primary-700 data-[hover=true]:data-[checked=true]:border-primary-700 data-[hover=true]:data-[checked=true]:data-[disabled=true]:border-primary-600 data-[hover=true]:data-[checked=true]:data-[disabled=true]:bg-primary-600 data-[hover=true]:data-[checked=true]:data-[disabled=true]:opacity-40 data-[hover=true]:data-[checked=true]:data-[disabled=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[disabled=true]:border-outline-400 data-[hover=true]:data-[disabled=true]:data-[invalid=true]:border-error-700 data-[active=true]:data-[checked=true]:bg-primary-800 data-[active=true]:data-[checked=true]:border-primary-800 data-[invalid=true]:border-error-700 data-[disabled=true]:opacity-40',
+  base: "justify-center items-center border-outline-400 bg-transparent rounded web:data-[focus-visible=true]:outline-none web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-indicator-primary data-[checked=true]:bg-primary-600 data-[checked=true]:border-primary-600 data-[hover=true]:data-[checked=false]:border-outline-500 data-[hover=true]:bg-transparent data-[hover=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[checked=true]:bg-primary-700 data-[hover=true]:data-[checked=true]:border-primary-700 data-[hover=true]:data-[checked=true]:data-[disabled=true]:border-primary-600 data-[hover=true]:data-[checked=true]:data-[disabled=true]:bg-primary-600 data-[hover=true]:data-[checked=true]:data-[disabled=true]:opacity-40 data-[hover=true]:data-[checked=true]:data-[disabled=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[disabled=true]:border-outline-400 data-[hover=true]:data-[disabled=true]:data-[invalid=true]:border-error-700 data-[active=true]:data-[checked=true]:bg-primary-800 data-[active=true]:data-[checked=true]:border-primary-800 data-[invalid=true]:border-error-700 data-[disabled=true]:opacity-40",
   parentVariants: {
     size: {
-      lg: 'w-6 h-6 border-[3px]',
-      md: 'w-5 h-5 border-2',
-      sm: 'w-4 h-4 border-2',
+      lg: "w-6 h-6 border-[3px]",
+      md: "w-5 h-5 border-2",
+      sm: "w-4 h-4 border-2",
     },
   },
 });
 
 const checkboxLabelStyle = tva({
-  base: 'text-typography-600 data-[checked=true]:text-typography-900 data-[hover=true]:text-typography-900 data-[hover=true]:data-[checked=true]:text-typography-900 data-[hover=true]:data-[checked=true]:data-[disabled=true]:text-typography-900 data-[hover=true]:data-[disabled=true]:text-typography-400 data-[active=true]:text-typography-900 data-[active=true]:data-[checked=true]:text-typography-900 data-[disabled=true]:opacity-40 web:select-none',
+  base: "text-typography-600 data-[checked=true]:text-typography-900 data-[hover=true]:text-typography-900 data-[hover=true]:data-[checked=true]:text-typography-900 data-[hover=true]:data-[checked=true]:data-[disabled=true]:text-typography-900 data-[hover=true]:data-[disabled=true]:text-typography-400 data-[active=true]:text-typography-900 data-[active=true]:data-[checked=true]:text-typography-900 data-[disabled=true]:opacity-40 web:select-none",
   parentVariants: {
     size: {
-      lg: 'text-lg',
-      md: 'text-base',
-      sm: 'text-sm',
+      lg: "text-lg",
+      md: "text-base",
+      sm: "text-sm",
     },
   },
 });
 
 const checkboxIconStyle = tva({
-  base: 'text-typography-50 fill-none',
+  base: "text-typography-50 fill-none",
 
   parentVariants: {
     size: {
-      sm: 'h-3 w-3',
-      md: 'h-4 w-4',
-      lg: 'h-5 w-5',
+      sm: "h-3 w-3",
+      md: "h-4 w-4",
+      lg: "h-5 w-5",
     },
   },
 });
@@ -179,7 +179,7 @@ type ICheckboxProps = React.ComponentPropsWithoutRef<typeof UICheckbox> &
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof UICheckbox>,
   ICheckboxProps
->(({ className, size = 'md', ...props }, ref) => {
+>(({ className, size = "md", ...props }, ref) => {
   return (
     <UICheckbox
       className={checkboxStyle({
@@ -254,7 +254,7 @@ const CheckboxIcon = React.forwardRef<
 >(({ className, size, ...props }, ref) => {
   const { size: parentSize } = useStyleContext(SCOPE);
 
-  if (typeof size === 'number') {
+  if (typeof size === "number") {
     return (
       <UICheckbox.Icon
         ref={ref}
@@ -291,10 +291,10 @@ const CheckboxIcon = React.forwardRef<
   );
 });
 
-Checkbox.displayName = 'Checkbox';
-CheckboxIndicator.displayName = 'CheckboxIndicator';
-CheckboxLabel.displayName = 'CheckboxLabel';
-CheckboxIcon.displayName = 'CheckboxIcon';
+Checkbox.displayName = "Checkbox";
+CheckboxIndicator.displayName = "CheckboxIndicator";
+CheckboxLabel.displayName = "CheckboxLabel";
+CheckboxIcon.displayName = "CheckboxIcon";
 
 export {
   Checkbox,
diff --git a/components/ui/divider/index.tsx b/components/ui/divider/index.tsx
index 61404a4..84814b3 100644
--- a/components/ui/divider/index.tsx
+++ b/components/ui/divider/index.tsx
@@ -1,36 +1,32 @@
-'use client';
-import React from 'react';
-import { createDivider } from '@gluestack-ui/divider';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { View } from 'react-native';
-import { cssInterop } from 'nativewind';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+"use client";
+import React from "react";
+import { tva } from "@gluestack-ui/nativewind-utils/tva";
+import { Platform, View } from "react-native";
+import type { VariantProps } from "@gluestack-ui/nativewind-utils";
 
 const dividerStyle = tva({
-  base: 'bg-background-200',
+  base: "bg-background-200",
   variants: {
     orientation: {
-      vertical: 'w-px h-full',
-      horizontal: 'h-px w-full',
+      vertical: "w-px h-full",
+      horizontal: "h-px w-full",
     },
   },
 });
 
-const UIDivider = createDivider({ Root: View });
-
-cssInterop(UIDivider, { className: 'style' });
-
-type IUIDividerProps = React.ComponentPropsWithoutRef<typeof UIDivider> &
+type IUIDividerProps = React.ComponentPropsWithoutRef<typeof View> &
   VariantProps<typeof dividerStyle>;
 
 const Divider = React.forwardRef<
-  React.ElementRef<typeof UIDivider>,
+  React.ElementRef<typeof View>,
   IUIDividerProps
->(({ className, orientation = 'horizontal', ...props }, ref) => {
+>(({ className, orientation = "horizontal", ...props }, ref) => {
   return (
-    <UIDivider
+    <View
       ref={ref}
       {...props}
+      aria-orientation={orientation}
+      role={Platform.OS === "web" ? "separator" : undefined}
       className={dividerStyle({
         orientation,
         class: className,
@@ -39,6 +35,6 @@ const Divider = React.forwardRef<
   );
 });
 
-Divider.displayName = 'Divider';
+Divider.displayName = "Divider";
 
 export { Divider };
diff --git a/components/ui/drawer/index.tsx b/components/ui/drawer/index.tsx
index 09bc3ae..0b1b065 100644
--- a/components/ui/drawer/index.tsx
+++ b/components/ui/drawer/index.tsx
@@ -1,31 +1,24 @@
-'use client';
-import React from 'react';
-import { createModal as createDrawer } from '@gluestack-ui/modal';
-import {
-  Pressable,
-  View,
-  ScrollView,
-  Platform,
-  Dimensions,
-} from 'react-native';
+"use client";
+import React from "react";
+import { createModal as createDrawer } from "@gluestack-ui/modal";
+import { Pressable, View, ScrollView, Dimensions } from "react-native";
 import {
   Motion,
   AnimatePresence,
   createMotionAnimatedComponent,
-} from '@legendapp/motion';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
+} from "@legendapp/motion";
+import { tva } from "@gluestack-ui/nativewind-utils/tva";
 import {
   withStyleContext,
   useStyleContext,
-} from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
-import { cssInterop } from 'nativewind';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+} from "@gluestack-ui/nativewind-utils/withStyleContext";
+import { cssInterop } from "nativewind";
+import type { VariantProps } from "@gluestack-ui/nativewind-utils";
 
 const AnimatedPressable = createMotionAnimatedComponent(Pressable);
-const SCOPE = 'MODAL';
-const screenWidth = Dimensions.get('window').width;
-const screenHeight = Dimensions.get('window').height;
+const SCOPE = "MODAL";
+const screenWidth = Dimensions.get("window").width;
+const screenHeight = Dimensions.get("window").height;
 const sizes: { [key: string]: number } = {
   sm: 0.25,
   md: 0.5,
@@ -34,10 +27,7 @@ const sizes: { [key: string]: number } = {
 };
 
 const UIDrawer = createDrawer({
-  Root:
-    Platform.OS === 'web'
-      ? withStyleContext(View, SCOPE)
-      : withStyleContextAndStates(View, SCOPE),
+  Root: withStyleContext(View, SCOPE),
   Backdrop: AnimatedPressable,
   Content: Motion.View,
   Body: ScrollView,
@@ -46,114 +36,106 @@ const UIDrawer = createDrawer({
   Header: View,
   AnimatePresence: AnimatePresence,
 });
-cssInterop(UIDrawer, { className: 'style' });
-cssInterop(UIDrawer.Backdrop, { className: 'style' });
-cssInterop(UIDrawer.Content, { className: 'style' });
-cssInterop(UIDrawer.CloseButton, { className: 'style' });
-cssInterop(UIDrawer.Header, { className: 'style' });
-cssInterop(UIDrawer.Body, {
-  className: 'style',
-  contentContainerClassName: 'contentContainerStyle',
-  indicatorClassName: 'indicatorStyle',
-});
-cssInterop(UIDrawer.Footer, { className: 'style' });
+
+cssInterop(AnimatedPressable, { className: "style" });
+cssInterop(Motion.View, { className: "style" });
 
 const drawerStyle = tva({
-  base: 'w-full h-full web:pointer-events-none relative',
+  base: "w-full h-full web:pointer-events-none relative",
   variants: {
     size: {
-      sm: '',
-      md: '',
-      lg: '',
-      full: '',
+      sm: "",
+      md: "",
+      lg: "",
+      full: "",
     },
     anchor: {
-      left: 'items-start',
-      right: 'items-end',
-      top: 'justify-start',
-      bottom: 'justify-end',
+      left: "items-start",
+      right: "items-end",
+      top: "justify-start",
+      bottom: "justify-end",
     },
   },
 });
 
 const drawerBackdropStyle = tva({
-  base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default',
+  base: "absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default",
 });
 
 const drawerContentStyle = tva({
-  base: 'bg-background-0 overflow-scroll border border-outline-100 p-6 absolute',
+  base: "bg-background-0 overflow-scroll border border-outline-100 p-6 absolute",
   parentVariants: {
     size: {
-      sm: 'w-1/4',
-      md: 'w-1/2',
-      lg: 'w-3/4',
-      full: 'w-full',
+      sm: "w-1/4",
+      md: "w-1/2",
+      lg: "w-3/4",
+      full: "w-full",
     },
     anchor: {
-      left: 'h-full',
-      right: 'h-full',
-      top: 'w-full',
-      bottom: 'w-full',
+      left: "h-full",
+      right: "h-full",
+      top: "w-full",
+      bottom: "w-full",
     },
   },
   parentCompoundVariants: [
     {
-      anchor: 'top',
-      size: 'sm',
-      class: 'h-1/4',
+      anchor: "top",
+      size: "sm",
+      class: "h-1/4",
     },
     {
-      anchor: 'top',
-      size: 'md',
-      class: 'h-1/2',
+      anchor: "top",
+      size: "md",
+      class: "h-1/2",
     },
     {
-      anchor: 'top',
-      size: 'lg',
-      class: 'h-3/4',
+      anchor: "top",
+      size: "lg",
+      class: "h-3/4",
     },
     {
-      anchor: 'top',
-      size: 'full',
-      class: 'h-full',
+      anchor: "top",
+      size: "full",
+      class: "h-full",
     },
     {
-      anchor: 'bottom',
-      size: 'sm',
-      class: 'h-1/4',
+      anchor: "bottom",
+      size: "sm",
+      class: "h-1/4",
     },
     {
-      anchor: 'bottom',
-      size: 'md',
-      class: 'h-1/2',
+      anchor: "bottom",
+      size: "md",
+      class: "h-1/2",
     },
     {
-      anchor: 'bottom',
-      size: 'lg',
-      class: 'h-3/4',
+      anchor: "bottom",
+      size: "lg",
+      class: "h-3/4",
     },
     {
-      anchor: 'bottom',
-      size: 'full',
-      class: 'h-full',
+      anchor: "bottom",
+      size: "full",
+      class: "h-full",
     },
   ],
 });
 
 const drawerCloseButtonStyle = tva({
-  base: 'z-10 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer',
+  base: "z-10 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer",
 });
 
 const drawerHeaderStyle = tva({
-  base: 'justify-between items-center flex-row',
+  base: "justify-between items-center flex-row",
 });
 
 const drawerBodyStyle = tva({
-  base: 'mt-4 mb-6 shrink-0',
+  base: "mt-4 mb-6 shrink-0",
 });
 
 const drawerFooterStyle = tva({
-  base: 'flex-row justify-end items-center',
+  base: "flex-row justify-end items-center",
 });
 
 type IDrawerProps = React.ComponentProps<typeof UIDrawer> &
@@ -182,7 +164,7 @@ type IDrawerCloseButtonProps = React.ComponentProps<
 const Drawer = React.forwardRef<
   React.ElementRef<typeof UIDrawer>,
   IDrawerProps
->(({ className, size = 'sm', anchor = 'left', ...props }, ref) => {
+>(({ className, size = "sm", anchor = "left", ...props }, ref) => {
   return (
     <UIDrawer
       ref={ref}
@@ -211,11 +193,11 @@ const DrawerBackdrop = React.forwardRef<
         opacity: 0,
       }}
       transition={{
-        type: 'spring',
+        type: "spring",
         damping: 18,
         stiffness: 250,
         opacity: {
-          type: 'timing',
+          type: "timing",
           duration: 250,
         },
       }}
@@ -236,21 +218,21 @@ const DrawerContent = React.forwardRef<
   const drawerHeight = screenHeight * (sizes[parentSize] || sizes.md);
   const drawerWidth = screenWidth * (sizes[parentSize] || sizes.md);
 
-  const isHorizontal = parentAnchor === 'left' || parentAnchor === 'right';
+  const isHorizontal = parentAnchor === "left" || parentAnchor === "right";
 
   const initialObj = isHorizontal
-    ? { x: parentAnchor === 'left' ? -drawerWidth : drawerWidth }
-    : { y: parentAnchor === 'top' ? -drawerHeight : drawerHeight };
+    ? { x: parentAnchor === "left" ? -drawerWidth : drawerWidth }
+    : { y: parentAnchor === "top" ? -drawerHeight : drawerHeight };
 
   const animateObj = isHorizontal ? { x: 0 } : { y: 0 };
 
   const exitObj = isHorizontal
-    ? { x: parentAnchor === 'left' ? -drawerWidth : drawerWidth }
-    : { y: parentAnchor === 'top' ? -drawerHeight : drawerHeight };
+    ? { x: parentAnchor === "left" ? -drawerWidth : drawerWidth }
+    : { y: parentAnchor === "top" ? -drawerHeight : drawerHeight };
 
   const customClass = isHorizontal
-    ? `top-0 ${parentAnchor === 'left' ? 'left-0' : 'right-0'}`
-    : `left-0 ${parentAnchor === 'top' ? 'top-0' : 'bottom-0'}`;
+    ? `top-0 ${parentAnchor === "left" ? "left-0" : "right-0"}`
+    : `left-0 ${parentAnchor === "top" ? "top-0" : "bottom-0"}`;
 
   return (
     <UIDrawer.Content
@@ -259,7 +241,7 @@ const DrawerContent = React.forwardRef<
       animate={animateObj}
       exit={exitObj}
       transition={{
-        type: 'timing',
+        type: "timing",
         duration: 300,
       }}
       {...props}
@@ -335,13 +317,13 @@ const DrawerCloseButton = React.forwardRef<
   );
 });
 
-Drawer.displayName = 'Drawer';
-DrawerBackdrop.displayName = 'DrawerBackdrop';
-DrawerContent.displayName = 'DrawerContent';
-DrawerHeader.displayName = 'DrawerHeader';
-DrawerBody.displayName = 'DrawerBody';
-DrawerFooter.displayName = 'DrawerFooter';
-DrawerCloseButton.displayName = 'DrawerCloseButton';
+Drawer.displayName = "Drawer";
+DrawerBackdrop.displayName = "DrawerBackdrop";
+DrawerContent.displayName = "DrawerContent";
+DrawerHeader.displayName = "DrawerHeader";
+DrawerBody.displayName = "DrawerBody";
+DrawerFooter.displayName = "DrawerFooter";
+DrawerCloseButton.displayName = "DrawerCloseButton";
 
 export {
   Drawer,
diff --git a/components/ui/fab/index.tsx b/components/ui/fab/index.tsx
index 0762328..4adef06 100644
--- a/components/ui/fab/index.tsx
+++ b/components/ui/fab/index.tsx
@@ -1,17 +1,15 @@
-'use client';
-import React, { useMemo } from 'react';
-import { createFab } from '@gluestack-ui/fab';
-import { Platform, Text } from 'react-native';
-import { Pressable } from 'react-native';
-import { Svg } from 'react-native-svg';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
+"use client";
+import React, { useMemo } from "react";
+import { createFab } from "@gluestack-ui/fab";
+import { Pressable, Text } from "react-native";
+import { Svg } from "react-native-svg";
+import { tva } from "@gluestack-ui/nativewind-utils/tva";
 import {
   withStyleContext,
   useStyleContext,
-} from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
-import { cssInterop } from 'nativewind';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+} from "@gluestack-ui/nativewind-utils/withStyleContext";
+import { cssInterop } from "nativewind";
+import type { VariantProps } from "@gluestack-ui/nativewind-utils";
 
 type IPrimitiveIcon = React.ComponentPropsWithoutRef<typeof Svg> & {
   height?: number | string;
@@ -23,6 +21,7 @@ type IPrimitiveIcon = React.ComponentPropsWithoutRef<typeof Svg> & {
   as?: React.ElementType;
   className?: string;
   classNameColor?: string;
+  style?: any;
 };
 
 const PrimitiveIcon = React.forwardRef<
@@ -37,8 +36,9 @@ const PrimitiveIcon = React.forwardRef<
       color,
       classNameColor,
       size,
-      stroke = 'currentColor',
+      stroke = "currentColor",
       as: AsComp,
+      style,
       ...props
     },
     ref
@@ -56,14 +56,22 @@ const PrimitiveIcon = React.forwardRef<
     if (fill) {
       colorProps = { ...colorProps, fill: fill };
     }
-    if (stroke !== 'currentColor') {
+    if (stroke !== "currentColor") {
       colorProps = { ...colorProps, stroke: stroke };
-    } else if (stroke === 'currentColor' && color !== undefined) {
+    } else if (stroke === "currentColor" && color !== undefined) {
       colorProps = { ...colorProps, stroke: color };
     }
 
     if (AsComp) {
-      return <AsComp ref={ref} {...props} {...sizeProps} {...colorProps} />;
+      return (
+        <AsComp
+          ref={ref}
+          {...props}
+          style={style}
+          {...sizeProps}
+          {...colorProps}
+        />
+      );
     }
     return (
       <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
@@ -71,118 +79,112 @@ const PrimitiveIcon = React.forwardRef<
   }
 );
 
-const SCOPE = 'FAB';
+const SCOPE = "FAB";
+const Root = withStyleContext(Pressable, SCOPE);
 const UIFab = createFab({
-  Root:
-    Platform.OS === 'web'
-      ? withStyleContext(Pressable, SCOPE)
-      : withStyleContextAndStates(Pressable, SCOPE),
+  Root: Root,
   Label: Text,
   Icon: PrimitiveIcon,
 });
 
-cssInterop(UIFab, { className: 'style' });
-cssInterop(UIFab.Label, { className: 'style' });
-//@ts-ignore
-cssInterop(UIFab.Icon, {
+cssInterop(PrimitiveIcon, {
   className: {
-    target: 'style',
+    target: "style",
     nativeStyleToProp: {
       height: true,
       width: true,
-      //@ts-ignore
       fill: true,
-      color: 'classNameColor',
+      color: "classNameColor",
       stroke: true,
     },
   },
 });
 
 const fabStyle = tva({
-  base: 'group/fab bg-primary-500 rounded-full z-20 p-4 flex-row items-center justify-center absolute hover:bg-primary-600 active:bg-primary-700 disabled:opacity-40 disabled:pointer-events-all disabled:cursor-not-allowed data-[focus=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[focus-visible=true]:web:ring-indicator-info shadow-hard-2',
+  base: "group/fab bg-primary-500 rounded-full z-20 p-4 flex-row items-center justify-center absolute hover:bg-primary-600 active:bg-primary-700 disabled:opacity-40 disabled:pointer-events-all disabled:cursor-not-allowed data-[focus=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[focus-visible=true]:web:ring-indicator-info shadow-hard-2",
   variants: {
     size: {
-      sm: 'px-2.5 py-2.5',
-      md: 'px-3 py-3',
-      lg: 'px-4 py-4',
+      sm: "px-2.5 py-2.5",
+      md: "px-3 py-3",
+      lg: "px-4 py-4",
     },
     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 self-center',
-      'bottom center': 'bottom-4 self-center',
+      "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 self-center",
+      "bottom center": "bottom-4 self-center",
     },
   },
 });
 
 const fabLabelStyle = tva({
-  base: 'text-typography-50 font-normal font-body tracking-md text-left mx-2',
+  base: "text-typography-50 font-normal font-body tracking-md text-left mx-2",
   variants: {
     isTruncated: {
-      true: '',
+      true: "",
     },
     bold: {
-      true: 'font-bold',
+      true: "font-bold",
     },
     underline: {
-      true: 'underline',
+      true: "underline",
     },
     strikeThrough: {
-      true: 'line-through',
+      true: "line-through",
     },
     size: {
-      '2xs': 'text-2xs',
-      'xs': 'text-xs',
-      'sm': 'text-sm',
-      'md': 'text-base',
-      'lg': 'text-lg',
-      'xl': 'text-xl',
-      '2xl': 'text-2xl',
-      '3xl': 'text-3xl',
-      '4xl': 'text-4xl',
-      '5xl': 'text-5xl',
-      '6xl': 'text-6xl',
+      "2xs": "text-2xs",
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "6xl": "text-6xl",
     },
     sub: {
-      true: 'text-xs',
+      true: "text-xs",
     },
     italic: {
-      true: 'italic',
+      true: "italic",
     },
     highlight: {
-      true: 'bg-yellow-500',
+      true: "bg-yellow-500",
     },
   },
   parentVariants: {
     size: {
-      sm: 'text-sm',
-      md: 'text-base',
-      lg: 'text-lg',
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg",
     },
   },
 });
 
 const fabIconStyle = tva({
-  base: 'text-typography-50 fill-none',
+  base: "text-typography-50 hover:text-typography-0 active:text-typography-0 fill-none",
   variants: {
     size: {
-      '2xs': 'h-3 w-3',
-      'xs': 'h-3.5 w-3.5',
-      'sm': 'h-4 w-4',
-      'md': 'w-[18px] h-[18px]',
-      'lg': 'h-5 w-5',
-      'xl': 'h-6 w-6',
+      "2xs": "h-3 w-3",
+      xs: "h-3.5 w-3.5",
+      sm: "h-4 w-4",
+      md: "w-[18px] h-[18px]",
+      lg: "h-5 w-5",
+      xl: "h-6 w-6",
     },
   },
 });
 
-type IFabProps = Omit<React.ComponentPropsWithoutRef<typeof UIFab>, 'context'> &
+type IFabProps = Omit<React.ComponentPropsWithoutRef<typeof UIFab>, "context"> &
   VariantProps<typeof fabStyle>;
 
 const Fab = React.forwardRef<React.ElementRef<typeof UIFab>, IFabProps>(
-  ({ size = 'md', placement = 'bottom right', className, ...props }, ref) => {
+  ({ size = "md", placement = "bottom right", className, ...props }, ref) => {
     return (
       <UIFab
         ref={ref}
@@ -243,7 +245,7 @@ const FabIcon = React.forwardRef<
 >(({ size, className, ...props }, ref) => {
   const { size: parentSize } = useStyleContext(SCOPE);
 
-  if (typeof size === 'number') {
+  if (typeof size === "number") {
     return (
       <UIFab.Icon
         ref={ref}
@@ -279,8 +281,8 @@ const FabIcon = React.forwardRef<
   );
 });
 
-Fab.displayName = 'Fab';
-FabLabel.displayName = 'FabLabel';
-FabIcon.displayName = 'FabIcon';
+Fab.displayName = "Fab";
+FabLabel.displayName = "FabLabel";
+FabIcon.displayName = "FabIcon";
 
 export { Fab, FabLabel, FabIcon };
diff --git a/components/ui/flat-list/index.tsx b/components/ui/flat-list/index.tsx
index 4ccadcd..c78f40e 100644
--- a/components/ui/flat-list/index.tsx
+++ b/components/ui/flat-list/index.tsx
@@ -1,2 +1,2 @@
-'use client';
-export { FlatList } from 'react-native';
+"use client";
+export { FlatList } from "react-native";
diff --git a/components/ui/form-control/index.tsx b/components/ui/form-control/index.tsx
index 951fb6c..cdc1708 100644
--- a/components/ui/form-control/index.tsx
+++ b/components/ui/form-control/index.tsx
@@ -300,20 +300,12 @@ export const UIFormControl = createFormControl({
   HelperText: Text,
 });
 
-cssInterop(UIFormControl, { className: 'style' });
-cssInterop(UIFormControl.Error, { className: 'style' });
-cssInterop(UIFormControl.Error.Text, { className: 'style' });
-cssInterop(UIFormControl.Label, { className: 'style' });
-cssInterop(UIFormControl.Label.Text, { className: 'style' });
-cssInterop(UIFormControl.Helper, { className: 'style' });
-cssInterop(UIFormControl.Helper.Text, { className: 'style' });
 cssInterop(UIFormControl.Error.Icon, {
   className: {
     target: 'style',
     nativeStyleToProp: {
       height: true,
       width: true,
-      // @ts-ignore
       fill: true,
       color: true,
       stroke: true,
diff --git a/components/ui/gluestack-ui-provider/index.tsx b/components/ui/gluestack-ui-provider/index.tsx
index 50dd94e..4855e43 100644
--- a/components/ui/gluestack-ui-provider/index.tsx
+++ b/components/ui/gluestack-ui-provider/index.tsx
@@ -35,6 +35,7 @@ export function GluestackUIProvider({
     <View
       style={[
         config[colorSchemeName],
+        // eslint-disable-next-line react-native/no-inline-styles
         { flex: 1, height: '100%', width: '100%' },
         props.style,
       ]}
diff --git a/components/ui/grid/index.tsx b/components/ui/grid/index.tsx
index 03ecdc2..7e0d36b 100644
--- a/components/ui/grid/index.tsx
+++ b/components/ui/grid/index.tsx
@@ -5,16 +5,17 @@ import React, {
   useContext,
   useMemo,
   forwardRef,
-} from "react";
-import type { VariantProps } from "@gluestack-ui/nativewind-utils";
-import { View, Dimensions, Platform, ViewProps } from "react-native";
-import { gridStyle, gridItemStyle } from "./styles";
-import { cssInterop } from "nativewind";
+} from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { View, Dimensions, Platform, ViewProps } from 'react-native';
+import { gridStyle, gridItemStyle } from './styles';
+import { cssInterop } from 'nativewind';
 import {
   useBreakpointValue,
   getBreakPointValue,
-} from "@/components/ui/utils/use-break-point-value";
-const { width } = Dimensions.get("window");
+} from '@/components/ui/utils/use-break-point-value';
+
+const { width: DEVICE_WIDTH } = Dimensions.get('window');
 
 const GridContext = createContext<any>({});
 
@@ -69,7 +70,7 @@ function generateResponsiveNumColumns({ gridClass }: { gridClass: string }) {
   numColumns.forEach((classname) => {
     const match = classname.match(regex);
     if (match) {
-      const prefix = match[1] || "default";
+      const prefix = match[1] || 'default';
       const value = parseInt(match[2], 10);
       result[prefix] = value;
     }
@@ -97,7 +98,7 @@ function generateResponsiveColSpans({
   colSpan.forEach((classname: any) => {
     const match = classname.match(regex);
     if (match) {
-      const prefix = match[1] || "default";
+      const prefix = match[1] || 'default';
       const value = parseInt(match[2], 10);
       result[prefix] = value;
     }
@@ -111,7 +112,7 @@ type IGridProps = ViewProps &
     gap?: number;
     rowGap?: number;
     columnGap?: number;
-    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
+    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
     padding?: number;
     paddingLeft?: number;
     paddingRight?: number;
@@ -140,7 +141,7 @@ const Grid = forwardRef<React.ElementRef<typeof View>, IGridProps>(
 
         const colSpan2 = getBreakPointValue(
           generateResponsiveColSpans({ gridItemClassName }),
-          width
+          DEVICE_WIDTH
         );
         const colSpan = colSpan2 ? colSpan2 : 1;
 
@@ -171,7 +172,7 @@ const Grid = forwardRef<React.ElementRef<typeof View>, IGridProps>(
     });
 
     const gridClassMerged = `${Platform.select({
-      web: gridClass ?? "",
+      web: gridClass ?? '',
     })}`;
 
     const contextValue = useMemo(() => {
@@ -179,7 +180,7 @@ const Grid = forwardRef<React.ElementRef<typeof View>, IGridProps>(
         calculatedWidth,
         numColumns: responsiveNumColumns,
         itemsPerRow,
-        flexDirection: props?.flexDirection || "row",
+        flexDirection: props?.flexDirection || 'row',
         gap: props?.gap || 0,
         columnGap: props?.columnGap || 0,
       };
@@ -194,7 +195,7 @@ const Grid = forwardRef<React.ElementRef<typeof View>, IGridProps>(
         <View
           ref={ref}
           className={gridStyle({
-            class: className + " " + gridClassMerged,
+            class: className + ' ' + gridClassMerged,
           })}
           onLayout={(event: any) => {
             const paddingLeftToSubtract =
@@ -203,13 +204,13 @@ const Grid = forwardRef<React.ElementRef<typeof View>, IGridProps>(
             const paddingRightToSubtract =
               props?.paddingEnd || props?.paddingRight || props?.padding || 0;
 
-            const width =
+            const gridWidth =
               event.nativeEvent.layout.width -
               paddingLeftToSubtract -
               paddingRightToSubtract -
               borderWidthToSubtract;
 
-            setCalculatedWidth(width);
+            setCalculatedWidth(gridWidth);
           }}
           {...props}
         >
@@ -220,23 +221,22 @@ const Grid = forwardRef<React.ElementRef<typeof View>, IGridProps>(
   }
 );
 
-//@ts-ignore
 cssInterop(Grid, {
   className: {
-    target: "style",
+    target: 'style',
     nativeStyleToProp: {
-      gap: "gap",
-      rowGap: "rowGap",
-      columnGap: "columnGap",
-      flexDirection: "flexDirection",
-      padding: "padding",
-      paddingLeft: "paddingLeft",
-      paddingRight: "paddingRight",
-      paddingStart: "paddingStart",
-      paddingEnd: "paddingEnd",
-      borderWidth: "borderWidth",
-      borderLeftWidth: "borderLeftWidth",
-      borderRightWidth: "borderRightWidth",
+      gap: 'gap',
+      rowGap: 'rowGap',
+      columnGap: 'columnGap',
+      flexDirection: 'flexDirection',
+      padding: 'padding',
+      paddingLeft: 'paddingLeft',
+      paddingRight: 'paddingRight',
+      paddingStart: 'paddingStart',
+      paddingEnd: 'paddingEnd',
+      borderWidth: 'borderWidth',
+      borderLeftWidth: 'borderLeftWidth',
+      borderRightWidth: 'borderRightWidth',
     },
   },
 });
@@ -253,7 +253,7 @@ const GridItem = forwardRef<React.ElementRef<typeof View>, IGridItemProps>(
   ({ className, _extra, ...props }, ref) => {
     const [flexBasisValue, setFlexBasisValue] = useState<
       number | string | null
-    >("auto");
+    >('auto');
 
     const {
       calculatedWidth,
@@ -272,7 +272,7 @@ const GridItem = forwardRef<React.ElementRef<typeof View>, IGridItemProps>(
 
     useEffect(() => {
       if (
-        !flexDirection?.includes("column") &&
+        !flexDirection?.includes('column') &&
         calculatedWidth &&
         numColumns > 0 &&
         responsiveColSpan > 0
@@ -299,7 +299,7 @@ const GridItem = forwardRef<React.ElementRef<typeof View>, IGridItemProps>(
               calculatedWidth) *
               100,
             100
-          ) + "%";
+          ) + '%';
 
         setFlexBasisValue(flexBasisVal);
       }
@@ -319,9 +319,7 @@ const GridItem = forwardRef<React.ElementRef<typeof View>, IGridItemProps>(
         // @ts-expect-error
         gridItemClass={gridItemClass}
         className={gridItemStyle({
-          class:
-            className + " " + Platform.select({ web: gridItemClass ?? "" }) ??
-            "",
+          class: className,
         })}
         {...props}
         style={[
@@ -335,7 +333,7 @@ const GridItem = forwardRef<React.ElementRef<typeof View>, IGridItemProps>(
   }
 );
 
-Grid.displayName = "Grid";
-GridItem.displayName = "GridItem";
+Grid.displayName = 'Grid';
+GridItem.displayName = 'GridItem';
 
 export { Grid, GridItem };
diff --git a/components/ui/heading/index.tsx b/components/ui/heading/index.tsx
index 226ab2f..031c661 100644
--- a/components/ui/heading/index.tsx
+++ b/components/ui/heading/index.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef, memo } from 'react';
 import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
-import { cssInterop } from 'nativewind';
 import { headingStyle } from './styles';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
@@ -9,13 +8,6 @@ type IHeadingProps = VariantProps<typeof headingStyle> &
     as?: React.ElementType;
   };
 
-cssInterop(H1, { className: 'style' });
-cssInterop(H2, { className: 'style' });
-cssInterop(H3, { className: 'style' });
-cssInterop(H4, { className: 'style' });
-cssInterop(H5, { className: 'style' });
-cssInterop(H6, { className: 'style' });
-
 const MappedHeading = memo(
   forwardRef<React.ElementRef<typeof H1>, IHeadingProps>(
     (
@@ -51,6 +43,7 @@ const MappedHeading = memo(
                 class: className,
               })}
               {...props}
+              // @ts-expect-error
               ref={ref}
             />
           );
@@ -69,6 +62,7 @@ const MappedHeading = memo(
                 class: className,
               })}
               {...props}
+              // @ts-expect-error
               ref={ref}
             />
           );
@@ -87,6 +81,7 @@ const MappedHeading = memo(
                 class: className,
               })}
               {...props}
+              // @ts-expect-error
               ref={ref}
             />
           );
@@ -105,6 +100,7 @@ const MappedHeading = memo(
                 class: className,
               })}
               {...props}
+              // @ts-expect-error
               ref={ref}
             />
           );
@@ -123,6 +119,7 @@ const MappedHeading = memo(
                 class: className,
               })}
               {...props}
+              // @ts-expect-error
               ref={ref}
             />
           );
@@ -142,6 +139,7 @@ const MappedHeading = memo(
                 class: className,
               })}
               {...props}
+              // @ts-expect-error
               ref={ref}
             />
           );
@@ -160,6 +158,7 @@ const MappedHeading = memo(
                 class: className,
               })}
               {...props}
+              // @ts-expect-error
               ref={ref}
             />
           );
diff --git a/components/ui/icon/index.tsx b/components/ui/icon/index.tsx
index 1c19c59..8b74b02 100644
--- a/components/ui/icon/index.tsx
+++ b/components/ui/icon/index.tsx
@@ -16,6 +16,7 @@ type IPrimitiveIcon = {
   as?: React.ElementType;
   className?: string;
   classNameColor?: string;
+  style?: any;
 };
 
 const PrimitiveIcon = React.forwardRef<
@@ -66,7 +67,10 @@ const PrimitiveIcon = React.forwardRef<
 
 export const UIIcon = createIcon({
   Root: PrimitiveIcon,
-});
+}) as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof PrimitiveIcon> &
+    React.RefAttributes<React.ElementRef<typeof Svg>>
+>;
 
 const iconStyle = tva({
   base: 'text-typography-950 fill-none pointer-events-none',
@@ -82,7 +86,6 @@ const iconStyle = tva({
   },
 });
 
-// @ts-expect-error
 cssInterop(UIIcon, {
   className: {
     target: 'style',
@@ -136,23 +139,28 @@ export const Icon = React.forwardRef<React.ElementRef<typeof Svg>, IIConProps>(
 type ParameterTypes = Omit<Parameters<typeof createIcon>[0], 'Root'>;
 
 const createIconUI = ({ ...props }: ParameterTypes) => {
-  const UIIconCreateIcon = createIcon({ Root: Svg, ...props });
+  const UIIconCreateIcon = createIcon({
+    Root: Svg,
+    ...props,
+  }) as React.ForwardRefExoticComponent<
+    React.ComponentPropsWithoutRef<typeof PrimitiveIcon> &
+      React.RefAttributes<React.ElementRef<typeof Svg>>
+  >;
 
   return React.forwardRef<React.ElementRef<typeof Svg>>(
     (
       {
         className,
         size,
-        ...props
+        ...inComingProps
       }: VariantProps<typeof iconStyle> &
         React.ComponentPropsWithoutRef<typeof UIIconCreateIcon>,
       ref
     ) => {
       return (
         <UIIconCreateIcon
-          // @ts-ignore
           ref={ref}
-          {...props}
+          {...inComingProps}
           className={iconStyle({ size, class: className })}
         />
       );
diff --git a/components/ui/icon/index.web.tsx b/components/ui/icon/index.web.tsx
index 55ba1c7..af2e991 100644
--- a/components/ui/icon/index.web.tsx
+++ b/components/ui/icon/index.web.tsx
@@ -1,17 +1,16 @@
-import React, { useMemo } from "react";
-import { createIcon } from "@gluestack-ui/icon";
-import { tva } from "@gluestack-ui/nativewind-utils/tva";
-import { VariantProps } from "@gluestack-ui/nativewind-utils";
+import React, { useMemo } from 'react';
+import { createIcon } from '@gluestack-ui/icon';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { VariantProps } from '@gluestack-ui/nativewind-utils';
 
 const accessClassName = (style: any) => {
-  const obj = style[0];
-  const keys = Object.keys(obj); //will return an array of keys
-  return obj[keys[1]];
+  const keys = Object.keys(style);
+  return style[keys[1]];
 };
 
 const Svg = React.forwardRef<
-  React.ElementRef<"svg">,
-  React.ComponentPropsWithoutRef<"svg">
+  React.ElementRef<'svg'>,
+  React.ComponentPropsWithoutRef<'svg'>
 >(({ style, className, ...props }, ref) => {
   const calculateClassName = useMemo(() => {
     return className === undefined ? accessClassName(style) : className;
@@ -30,6 +29,7 @@ type IPrimitiveIcon = {
   as?: React.ElementType;
   className?: string;
   classNameColor?: string;
+  style?: any;
 };
 
 const PrimitiveIcon = React.forwardRef<
@@ -63,9 +63,9 @@ const PrimitiveIcon = React.forwardRef<
     if (fill) {
       colorProps = { ...colorProps, fill: fill };
     }
-    if (stroke !== "currentColor") {
+    if (stroke !== 'currentColor') {
       colorProps = { ...colorProps, stroke: stroke };
-    } else if (stroke === "currentColor" && color !== undefined) {
+    } else if (stroke === 'currentColor' && color !== undefined) {
       colorProps = { ...colorProps, stroke: color };
     }
 
@@ -83,15 +83,15 @@ export const UIIcon = createIcon({
 });
 
 const iconStyle = tva({
-  base: "text-typography-950 fill-none pointer-events-none",
+  base: 'text-typography-950 fill-none pointer-events-none',
   variants: {
     size: {
-      "2xs": "h-3 w-3",
-      xs: "h-3.5 w-3.5",
-      sm: "h-4 w-4",
-      md: "h-[18px] w-[18px]",
-      lg: "h-5 w-5",
-      xl: "h-6 w-6",
+      '2xs': 'h-3 w-3',
+      'xs': 'h-3.5 w-3.5',
+      'sm': 'h-4 w-4',
+      'md': 'h-[18px] w-[18px]',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6',
     },
   },
 });
@@ -103,8 +103,8 @@ export const Icon = React.forwardRef<
       height?: number | string;
       width?: number | string;
     }
->(({ size = "md", className, ...props }, ref) => {
-  if (typeof size === "number") {
+>(({ size = 'md', className, ...props }, ref) => {
+  if (typeof size === 'number') {
     return (
       <UIIcon
         ref={ref}
@@ -134,10 +134,10 @@ export const Icon = React.forwardRef<
   );
 });
 
-type ParameterTypes = Omit<Parameters<typeof createIcon>[0], "Root">;
+type ParameterTypes = Omit<Parameters<typeof createIcon>[0], 'Root'>;
 
 const createIconUI = ({ ...props }: ParameterTypes) => {
-  const UIIcon = createIcon({ Root: Svg, ...props });
+  const NewUIIcon = createIcon({ Root: Svg, ...props });
 
   return React.forwardRef<
     React.ElementRef<typeof UIIcon>,
@@ -146,22 +146,23 @@ const createIconUI = ({ ...props }: ParameterTypes) => {
         height?: number | string;
         width?: number | string;
       }
-  >(({ className, size, ...props }, ref) => {
+  >(({ className, size, ...inComingprops }, ref) => {
     return (
-      <UIIcon
+      <NewUIIcon
         ref={ref}
-        {...props}
+        {...inComingprops}
         className={iconStyle({ size, class: className })}
       />
     );
   });
 };
+
 export { createIconUI as createIcon };
 
 // All Icons
 const AddIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -180,12 +181,12 @@ const AddIcon = createIcon({
   ),
 });
 
-AddIcon.displayName = "AddIcon";
+AddIcon.displayName = 'AddIcon';
 export { AddIcon };
 
 const AlertCircleIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -210,12 +211,12 @@ const AlertCircleIcon = createIcon({
   ),
 });
 
-AlertCircleIcon.displayName = "AlertCircleIcon";
+AlertCircleIcon.displayName = 'AlertCircleIcon';
 export { AlertCircleIcon };
 
 const ArrowUpIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -237,7 +238,7 @@ const ArrowUpIcon = createIcon({
 const ArrowDownIcon = createIcon({
   Root: Svg,
 
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -259,7 +260,7 @@ const ArrowDownIcon = createIcon({
 const ArrowRightIcon = createIcon({
   Root: Svg,
 
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -280,7 +281,7 @@ const ArrowRightIcon = createIcon({
 
 const ArrowLeftIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -299,16 +300,16 @@ const ArrowLeftIcon = createIcon({
   ),
 });
 
-ArrowUpIcon.displayName = "ArrowUpIcon";
-ArrowDownIcon.displayName = "ArrowDownIcon";
-ArrowRightIcon.displayName = "ArrowRightIcon";
-ArrowLeftIcon.displayName = "ArrowLeftIcon";
+ArrowUpIcon.displayName = 'ArrowUpIcon';
+ArrowDownIcon.displayName = 'ArrowDownIcon';
+ArrowRightIcon.displayName = 'ArrowRightIcon';
+ArrowLeftIcon.displayName = 'ArrowLeftIcon';
 
 export { ArrowUpIcon, ArrowDownIcon, ArrowRightIcon, ArrowLeftIcon };
 
 const AtSignIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <>
@@ -329,13 +330,13 @@ const AtSignIcon = createIcon({
   ),
 });
 
-AtSignIcon.displayName = "AtSignIcon";
+AtSignIcon.displayName = 'AtSignIcon';
 
 export { AtSignIcon };
 
 const BellIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -354,13 +355,13 @@ const BellIcon = createIcon({
   ),
 });
 
-BellIcon.displayName = "BellIcon";
+BellIcon.displayName = 'BellIcon';
 
 export { BellIcon };
 
 const CalendarDaysIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -427,13 +428,13 @@ const CalendarDaysIcon = createIcon({
   ),
 });
 
-CalendarDaysIcon.displayName = "CalendarDaysIcon";
+CalendarDaysIcon.displayName = 'CalendarDaysIcon';
 
 export { CalendarDaysIcon };
 
 const CheckIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -448,7 +449,7 @@ const CheckIcon = createIcon({
 
 const CheckCircleIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -467,15 +468,15 @@ const CheckCircleIcon = createIcon({
   ),
 });
 
-CheckIcon.displayName = "CheckIcon";
-CheckCircleIcon.displayName = "CheckCircleIcon";
+CheckIcon.displayName = 'CheckIcon';
+CheckCircleIcon.displayName = 'CheckCircleIcon';
 
 export { CheckIcon, CheckCircleIcon };
 
 const ChevronUpIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
-  d: "M12 10L8 6L4 10",
+  viewBox: '0 0 24 24',
+  d: 'M12 10L8 6L4 10',
   path: (
     <>
       <path
@@ -490,7 +491,7 @@ const ChevronUpIcon = createIcon({
 
 const ChevronDownIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -505,7 +506,7 @@ const ChevronDownIcon = createIcon({
 
 const ChevronLeftIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -521,7 +522,7 @@ const ChevronLeftIcon = createIcon({
 const ChevronRightIcon = createIcon({
   Root: Svg,
 
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -537,7 +538,7 @@ const ChevronRightIcon = createIcon({
 const ChevronsLeftIcon = createIcon({
   Root: Svg,
 
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -559,7 +560,7 @@ const ChevronsLeftIcon = createIcon({
 const ChevronsRightIcon = createIcon({
   Root: Svg,
 
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -581,7 +582,7 @@ const ChevronsRightIcon = createIcon({
 const ChevronsUpDownIcon = createIcon({
   Root: Svg,
 
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -600,13 +601,13 @@ const ChevronsUpDownIcon = createIcon({
   ),
 });
 
-ChevronUpIcon.displayName = "ChevronUpIcon";
-ChevronDownIcon.displayName = "ChevronDownIcon";
-ChevronLeftIcon.displayName = "ChevronLeftIcon";
-ChevronRightIcon.displayName = "ChevronRightIcon";
-ChevronsLeftIcon.displayName = "ChevronsLeftIcon";
-ChevronsRightIcon.displayName = "ChevronsRightIcon";
-ChevronsUpDownIcon.displayName = "ChevronsUpDownIcon";
+ChevronUpIcon.displayName = 'ChevronUpIcon';
+ChevronDownIcon.displayName = 'ChevronDownIcon';
+ChevronLeftIcon.displayName = 'ChevronLeftIcon';
+ChevronRightIcon.displayName = 'ChevronRightIcon';
+ChevronsLeftIcon.displayName = 'ChevronsLeftIcon';
+ChevronsRightIcon.displayName = 'ChevronsRightIcon';
+ChevronsUpDownIcon.displayName = 'ChevronsUpDownIcon';
 
 export {
   ChevronUpIcon,
@@ -620,7 +621,7 @@ export {
 
 const CircleIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -633,12 +634,12 @@ const CircleIcon = createIcon({
   ),
 });
 
-CircleIcon.displayName = "CircleIcon";
+CircleIcon.displayName = 'CircleIcon';
 export { CircleIcon };
 
 const ClockIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -657,13 +658,13 @@ const ClockIcon = createIcon({
   ),
 });
 
-ClockIcon.displayName = "ClockIcon";
+ClockIcon.displayName = 'ClockIcon';
 
 export { ClockIcon };
 
 const CloseIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -684,7 +685,7 @@ const CloseIcon = createIcon({
 
 const CloseCircleIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -709,14 +710,14 @@ const CloseCircleIcon = createIcon({
   ),
 });
 
-CloseIcon.displayName = "CloseIcon";
-CloseCircleIcon.displayName = "CloseCircleIcon";
+CloseIcon.displayName = 'CloseIcon';
+CloseCircleIcon.displayName = 'CloseCircleIcon';
 
 export { CloseIcon, CloseCircleIcon };
 
 const CopyIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -735,13 +736,13 @@ const CopyIcon = createIcon({
   ),
 });
 
-CopyIcon.displayName = "CopyIcon";
+CopyIcon.displayName = 'CopyIcon';
 
 export { CopyIcon };
 
 const DownloadIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -766,12 +767,12 @@ const DownloadIcon = createIcon({
   ),
 });
 
-DownloadIcon.displayName = "DownloadIcon";
+DownloadIcon.displayName = 'DownloadIcon';
 export { DownloadIcon };
 
 const EditIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -790,12 +791,12 @@ const EditIcon = createIcon({
   ),
 });
 
-EditIcon.displayName = "EditIcon";
+EditIcon.displayName = 'EditIcon';
 export { EditIcon };
 
 const EyeIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -814,11 +815,11 @@ const EyeIcon = createIcon({
   ),
 });
 
-EyeIcon.displayName = "EyeIcon";
+EyeIcon.displayName = 'EyeIcon';
 
 const EyeOffIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -849,12 +850,12 @@ const EyeOffIcon = createIcon({
   ),
 });
 
-EyeOffIcon.displayName = "EyeOffIcon";
+EyeOffIcon.displayName = 'EyeOffIcon';
 export { EyeIcon, EyeOffIcon };
 
 const FavouriteIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -867,12 +868,12 @@ const FavouriteIcon = createIcon({
   ),
 });
 
-FavouriteIcon.displayName = "FavouriteIcon";
+FavouriteIcon.displayName = 'FavouriteIcon';
 export { FavouriteIcon };
 
 const GlobeIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -897,12 +898,12 @@ const GlobeIcon = createIcon({
   ),
 });
 
-GlobeIcon.displayName = "GlobeIcon";
+GlobeIcon.displayName = 'GlobeIcon';
 export { GlobeIcon };
 
 const GripVerticalIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -945,12 +946,12 @@ const GripVerticalIcon = createIcon({
   ),
 });
 
-GripVerticalIcon.displayName = "GripVerticalIcon";
+GripVerticalIcon.displayName = 'GripVerticalIcon';
 export { GripVerticalIcon };
 
 const HelpCircleIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -975,12 +976,12 @@ const HelpCircleIcon = createIcon({
   ),
 });
 
-HelpCircleIcon.displayName = "HelpCircleIcon";
+HelpCircleIcon.displayName = 'HelpCircleIcon';
 export { HelpCircleIcon };
 
 const InfoIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1005,12 +1006,12 @@ const InfoIcon = createIcon({
   ),
 });
 
-InfoIcon.displayName = "InfoIcon";
+InfoIcon.displayName = 'InfoIcon';
 export { InfoIcon };
 
 const LinkIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1029,11 +1030,11 @@ const LinkIcon = createIcon({
   ),
 });
 
-LinkIcon.displayName = "LinkIcon";
+LinkIcon.displayName = 'LinkIcon';
 
 const ExternalLinkIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1058,12 +1059,12 @@ const ExternalLinkIcon = createIcon({
   ),
 });
 
-ExternalLinkIcon.displayName = "ExternalLinkIcon";
+ExternalLinkIcon.displayName = 'ExternalLinkIcon';
 export { LinkIcon, ExternalLinkIcon };
 
 const LoaderIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1076,12 +1077,12 @@ const LoaderIcon = createIcon({
   ),
 });
 
-LoaderIcon.displayName = "LoaderIcon";
+LoaderIcon.displayName = 'LoaderIcon';
 export { LoaderIcon };
 
 const LockIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1100,12 +1101,12 @@ const LockIcon = createIcon({
   ),
 });
 
-LockIcon.displayName = "LockIcon";
+LockIcon.displayName = 'LockIcon';
 export { LockIcon };
 
 const MailIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1124,12 +1125,12 @@ const MailIcon = createIcon({
   ),
 });
 
-MailIcon.displayName = "MailIcon";
+MailIcon.displayName = 'MailIcon';
 export { MailIcon };
 
 const MenuIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1154,12 +1155,12 @@ const MenuIcon = createIcon({
   ),
 });
 
-MenuIcon.displayName = "MenuIcon";
+MenuIcon.displayName = 'MenuIcon';
 export { MenuIcon };
 
 const MessageCircleIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1172,13 +1173,13 @@ const MessageCircleIcon = createIcon({
   ),
 });
 
-MessageCircleIcon.displayName = "MessageCircleIcon";
+MessageCircleIcon.displayName = 'MessageCircleIcon';
 
 export { MessageCircleIcon };
 
 const MoonIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1191,12 +1192,12 @@ const MoonIcon = createIcon({
   ),
 });
 
-MoonIcon.displayName = "MoonIcon";
+MoonIcon.displayName = 'MoonIcon';
 export { MoonIcon };
 
 const PaperclipIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1209,12 +1210,12 @@ const PaperclipIcon = createIcon({
   ),
 });
 
-PaperclipIcon.displayName = "PaperclipIcon";
+PaperclipIcon.displayName = 'PaperclipIcon';
 export { PaperclipIcon };
 
 const PhoneIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1227,12 +1228,12 @@ const PhoneIcon = createIcon({
   ),
 });
 
-PhoneIcon.displayName = "PhoneIcon";
+PhoneIcon.displayName = 'PhoneIcon';
 export { PhoneIcon };
 
 const PlayIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1251,12 +1252,12 @@ const PlayIcon = createIcon({
   ),
 });
 
-PlayIcon.displayName = "PlayIcon";
+PlayIcon.displayName = 'PlayIcon';
 export { PlayIcon };
 
 const RemoveIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1269,12 +1270,12 @@ const RemoveIcon = createIcon({
   ),
 });
 
-RemoveIcon.displayName = "RemoveIcon";
+RemoveIcon.displayName = 'RemoveIcon';
 export { RemoveIcon };
 
 const RepeatIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1305,11 +1306,11 @@ const RepeatIcon = createIcon({
   ),
 });
 
-RepeatIcon.displayName = "RepeatIcon";
+RepeatIcon.displayName = 'RepeatIcon';
 
 const Repeat1Icon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1346,12 +1347,12 @@ const Repeat1Icon = createIcon({
   ),
 });
 
-Repeat1Icon.displayName = "Repeat1Icon";
+Repeat1Icon.displayName = 'Repeat1Icon';
 export { RepeatIcon, Repeat1Icon };
 
 const SearchIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1370,12 +1371,12 @@ const SearchIcon = createIcon({
   ),
 });
 
-SearchIcon.displayName = "SearchIcon";
+SearchIcon.displayName = 'SearchIcon';
 export { SearchIcon };
 
 const SettingsIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1394,12 +1395,12 @@ const SettingsIcon = createIcon({
   ),
 });
 
-SettingsIcon.displayName = "SettingsIcon";
+SettingsIcon.displayName = 'SettingsIcon';
 export { SettingsIcon };
 
 const ShareIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1436,12 +1437,12 @@ const ShareIcon = createIcon({
   ),
 });
 
-ShareIcon.displayName = "ShareIcon";
+ShareIcon.displayName = 'ShareIcon';
 export { ShareIcon };
 
 const SlashIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1460,12 +1461,12 @@ const SlashIcon = createIcon({
   ),
 });
 
-SlashIcon.displayName = "SlashIcon";
+SlashIcon.displayName = 'SlashIcon';
 export { SlashIcon };
 
 const StarIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1478,12 +1479,12 @@ const StarIcon = createIcon({
   ),
 });
 
-StarIcon.displayName = "StarIcon";
+StarIcon.displayName = 'StarIcon';
 export { StarIcon };
 
 const SunIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1544,12 +1545,12 @@ const SunIcon = createIcon({
   ),
 });
 
-SunIcon.displayName = "SunIcon";
+SunIcon.displayName = 'SunIcon';
 export { SunIcon };
 
 const ThreeDotsIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1574,12 +1575,12 @@ const ThreeDotsIcon = createIcon({
   ),
 });
 
-ThreeDotsIcon.displayName = "ThreeDotsIcon";
+ThreeDotsIcon.displayName = 'ThreeDotsIcon';
 export { ThreeDotsIcon };
 
 const TrashIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1604,12 +1605,12 @@ const TrashIcon = createIcon({
   ),
 });
 
-TrashIcon.displayName = "TrashIcon";
+TrashIcon.displayName = 'TrashIcon';
 export { TrashIcon };
 
 const UnlockIcon = createIcon({
   Root: Svg,
-  viewBox: "0 0 24 24",
+  viewBox: '0 0 24 24',
   path: (
     <>
       <path
@@ -1628,5 +1629,5 @@ const UnlockIcon = createIcon({
   ),
 });
 
-UnlockIcon.displayName = "UnlockIcon";
+UnlockIcon.displayName = 'UnlockIcon';
 export { UnlockIcon };
diff --git a/components/ui/image/index.tsx b/components/ui/image/index.tsx
index 0a92445..1afc87a 100644
--- a/components/ui/image/index.tsx
+++ b/components/ui/image/index.tsx
@@ -4,7 +4,6 @@ import { createImage } from '@gluestack-ui/image';
 import { Platform, Image as RNImage } from 'react-native';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { cssInterop } from 'nativewind';
 
 const imageStyle = tva({
   base: 'max-w-full',
@@ -24,7 +23,6 @@ const imageStyle = tva({
 });
 
 const UIImage = createImage({ Root: RNImage });
-cssInterop(UIImage, { className: 'style' });
 
 type ImageProps = VariantProps<typeof imageStyle> &
   React.ComponentProps<typeof UIImage>;
@@ -37,10 +35,11 @@ const Image = React.forwardRef<
       className={imageStyle({ size, class: className })}
       {...props}
       ref={ref}
-      //@ts-ignore
+      // @ts-expect-error
       style={
         Platform.OS === 'web'
-          ? { height: 'revert-layer', width: 'revert-layer' }
+          ? // eslint-disable-next-line react-native/no-inline-styles
+            { height: 'revert-layer', width: 'revert-layer' }
           : undefined
       }
     />
diff --git a/components/ui/input/index.tsx b/components/ui/input/index.tsx
index 3e8d0ad..a572aa1 100644
--- a/components/ui/input/index.tsx
+++ b/components/ui/input/index.tsx
@@ -2,15 +2,13 @@
 import React, { useMemo } from 'react';
 import { createInput } from '@gluestack-ui/input';
 import { Svg } from 'react-native-svg';
-import { View, Pressable, TextInput, Platform } from 'react-native';
+import { View, Pressable, TextInput } from 'react-native';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import {
   withStyleContext,
   useStyleContext,
 } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
 import { cssInterop } from 'nativewind';
-import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 const SCOPE = 'INPUT';
 
@@ -24,6 +22,7 @@ type IPrimitiveIcon = {
   as?: React.ElementType;
   className?: string;
   classNameColor?: string;
+  style?: any;
 };
 
 const PrimitiveIcon = React.forwardRef<
@@ -40,6 +39,7 @@ const PrimitiveIcon = React.forwardRef<
       size,
       stroke = 'currentColor',
       as: AsComp,
+      style,
       ...props
     },
     ref
@@ -64,7 +64,15 @@ const PrimitiveIcon = React.forwardRef<
     }
 
     if (AsComp) {
-      return <AsComp ref={ref} {...props} {...sizeProps} {...colorProps} />;
+      return (
+        <AsComp
+          ref={ref}
+          {...props}
+          style={style}
+          {...sizeProps}
+          {...colorProps}
+        />
+      );
     }
     return (
       <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
@@ -72,22 +80,11 @@ const PrimitiveIcon = React.forwardRef<
   }
 );
 
-const InputWrapper = React.forwardRef<
-  React.ElementRef<typeof View>,
-  React.ComponentProps<typeof View>
->(({ ...props }, ref) => {
-  return <View {...props} ref={ref} />;
-});
-
 const UIInput = createInput({
-  // @ts-ignore
-  Root:
-    Platform.OS === 'web'
-      ? withStyleContext(InputWrapper, SCOPE)
-      : withStyleContextAndStates(InputWrapper, SCOPE),
+  Root: withStyleContext(View, SCOPE),
   Icon: PrimitiveIcon,
   Slot: Pressable,
-  Input: Platform.OS === 'web' ? TextInput : withStates(TextInput),
+  Input: TextInput,
 });
 
 const inputStyle = tva({
@@ -158,12 +155,6 @@ const inputFieldStyle = tva({
   },
 });
 
-cssInterop(InputWrapper, { className: 'style' });
-cssInterop(UIInput.Slot, { className: 'style' });
-cssInterop(UIInput.Input, {
-  className: { target: 'style', nativeStyleToProp: { textAlign: true } },
-});
-//@ts-ignore
 cssInterop(UIInput.Icon, {
   className: {
     target: 'style',
diff --git a/components/ui/link/index.tsx b/components/ui/link/index.tsx
index 04e8d83..a17b0b7 100644
--- a/components/ui/link/index.tsx
+++ b/components/ui/link/index.tsx
@@ -1,22 +1,17 @@
 'use client';
 import { createLink } from '@gluestack-ui/link';
-import { Pressable, Platform } from 'react-native';
+import { Pressable } from 'react-native';
 import { Text } from 'react-native';
 
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
 import { cssInterop } from 'nativewind';
-import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
 import React from 'react';
 export const UILink = createLink({
-  Root:
-    Platform.OS === 'web'
-      ? withStyleContext(Pressable)
-      : withStyleContextAndStates(Pressable),
-  Text: Platform.OS === 'web' ? Text : withStates(Text),
+  Root: withStyleContext(Pressable),
+  Text: Text,
 });
 
 cssInterop(UILink, { className: 'style' });
diff --git a/components/ui/menu/index.tsx b/components/ui/menu/index.tsx
index 2eeffb6..1a3573c 100644
--- a/components/ui/menu/index.tsx
+++ b/components/ui/menu/index.tsx
@@ -3,10 +3,9 @@ import React from 'react';
 import { createMenu } from '@gluestack-ui/menu';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { cssInterop } from 'nativewind';
-import { Pressable, Text, Platform, View } from 'react-native';
+import { Pressable, Text, View } from 'react-native';
 import { Motion, AnimatePresence } from '@legendapp/motion';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
 
 const menuStyle = tva({
   base: 'rounded-md bg-background-0 border border-outline-100 p-1 shadow-hard-5',
@@ -115,15 +114,14 @@ const Separator = React.forwardRef(
 );
 export const UIMenu = createMenu({
   Root: Motion.View,
-  Item: Platform.OS === 'web' ? Item : withStates(Item),
+  Item: Item,
   Label: Text,
   Backdrop: BackdropPressable,
   AnimatePresence: AnimatePresence,
   Separator: Separator,
 });
 
-cssInterop(UIMenu, { className: 'style' });
-cssInterop(UIMenu.ItemLabel, { className: 'style' });
+cssInterop(Motion.View, { className: 'style' });
 
 type IMenuProps = React.ComponentProps<typeof UIMenu> &
   VariantProps<typeof menuStyle> & { className?: string };
diff --git a/components/ui/modal/index.tsx b/components/ui/modal/index.tsx
index 951eff6..3d0f02e 100644
--- a/components/ui/modal/index.tsx
+++ b/components/ui/modal/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import { createModal } from '@gluestack-ui/modal';
-import { Pressable, View, ScrollView, Platform } from 'react-native';
+import { Pressable, View, ScrollView } from 'react-native';
 import {
   Motion,
   AnimatePresence,
@@ -12,19 +12,14 @@ import {
   withStyleContext,
   useStyleContext,
 } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
 import { cssInterop } from 'nativewind';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
 const AnimatedPressable = createMotionAnimatedComponent(Pressable);
-
 const SCOPE = 'MODAL';
 
 const UIModal = createModal({
-  Root:
-    Platform.OS === 'web'
-      ? withStyleContext(View, SCOPE)
-      : withStyleContextAndStates(View, SCOPE),
+  Root: withStyleContext(View, SCOPE),
   Backdrop: AnimatedPressable,
   Content: Motion.View,
   Body: ScrollView,
@@ -33,17 +28,9 @@ const UIModal = createModal({
   Header: View,
   AnimatePresence: AnimatePresence,
 });
-cssInterop(UIModal, { className: 'style' });
-cssInterop(UIModal.Backdrop, { className: 'style' });
-cssInterop(UIModal.Content, { className: 'style' });
-cssInterop(UIModal.CloseButton, { className: 'style' });
-cssInterop(UIModal.Header, { className: 'style' });
-cssInterop(UIModal.Body, {
-  className: 'style',
-  contentContainerClassName: 'contentContainerStyle',
-  indicatorClassName: 'indicatorStyle',
-});
-cssInterop(UIModal.Footer, { className: 'style' });
+
+cssInterop(AnimatedPressable, { className: 'style' });
+cssInterop(Motion.View, { className: 'style' });
 
 const modalStyle = tva({
   base: 'group/modal w-full h-full justify-center items-center web:pointer-events-none',
@@ -63,7 +50,7 @@ const modalBackdropStyle = tva({
 });
 
 const modalContentStyle = tva({
-  base: 'bg-background-0 rounded-md overflow-hidden border border-outline-100 shadow-hard-2 p-6',
+  base: 'bg-background-0 rounded-md overflow-hidden border border-outline-100 p-6',
   parentVariants: {
     size: {
       xs: 'w-[60%] max-w-[360px]',
diff --git a/components/ui/popover/index.tsx b/components/ui/popover/index.tsx
index 34d1205..977998a 100644
--- a/components/ui/popover/index.tsx
+++ b/components/ui/popover/index.tsx
@@ -1,36 +1,25 @@
-"use client";
-import React from "react";
-import { View, Pressable, Platform, ScrollView } from "react-native";
+'use client';
+import React from 'react';
+import { View, Pressable, ScrollView } from 'react-native';
 import {
   Motion,
   createMotionAnimatedComponent,
   AnimatePresence,
-} from "@legendapp/motion";
-import { createPopover } from "@gluestack-ui/popover";
-import { tva } from "@gluestack-ui/nativewind-utils/tva";
+} from '@legendapp/motion';
+import { createPopover } from '@gluestack-ui/popover';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import {
   withStyleContext,
   useStyleContext,
-} from "@gluestack-ui/nativewind-utils/withStyleContext";
-import { withStates } from "@gluestack-ui/nativewind-utils/withStates";
-import { withStyleContextAndStates } from "@gluestack-ui/nativewind-utils/withStyleContextAndStates";
-import { cssInterop } from "nativewind";
-import type { VariantProps } from "@gluestack-ui/nativewind-utils";
+} from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { cssInterop } from 'nativewind';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
 const AnimatedPressable = createMotionAnimatedComponent(Pressable);
-const SCOPE = "POPOVER";
-const ArrowWrapper = React.forwardRef(({ ...props }, ref) => {
-  return <Motion.View {...props} ref={ref} />;
-}) as React.ForwardRefExoticComponent<
-  React.ElementRef<typeof Motion.View> &
-    React.ComponentProps<typeof Motion.View>
->;
+const SCOPE = 'POPOVER';
+
 const UIPopover = createPopover({
-  Root: (Platform.OS === "web"
-    ? withStyleContext(View, SCOPE)
-    : withStyleContextAndStates(View, SCOPE)) as ReturnType<
-    typeof withStyleContext<typeof View>
-  >,
+  Root: withStyleContext(View, SCOPE),
   Arrow: Motion.View,
   Backdrop: AnimatedPressable,
   Body: ScrollView,
@@ -41,93 +30,85 @@ const UIPopover = createPopover({
   AnimatePresence: AnimatePresence,
 });
 
-cssInterop(UIPopover, { className: "style" });
-cssInterop(UIPopover.Arrow, { className: "style" });
-cssInterop(UIPopover.Content, { className: "style" });
-cssInterop(UIPopover.Header, { className: "style" });
-cssInterop(UIPopover.Footer, { className: "style" });
-cssInterop(UIPopover.Body, {
-  className: "style",
-  contentContainerClassName: "contentContainerStyle",
-  indicatorClassName: "indicatorStyle",
-});
-cssInterop(UIPopover.Backdrop, { className: "style" });
-cssInterop(UIPopover.CloseButton, { className: "style" });
+cssInterop(Motion.View, { className: 'style' });
+cssInterop(AnimatedPressable, { className: 'style' });
 
 const popoverStyle = tva({
-  base: "group/popover w-full h-full justify-center items-center web:pointer-events-none",
+  base: 'group/popover w-full h-full justify-center items-center web:pointer-events-none',
   variants: {
     size: {
-      xs: "",
-      sm: "",
-      md: "",
-      lg: "",
-      full: "",
+      xs: '',
+      sm: '',
+      md: '',
+      lg: '',
+      full: '',
     },
   },
 });
 
 const popoverArrowStyle = tva({
-  base: "bg-background-0 z-[1] border absolute overflow-hidden h-3.5 w-3.5 border-outline-100",
+  base: 'bg-background-0 z-[1] border absolute overflow-hidden h-3.5 w-3.5 border-outline-100',
   variants: {
     placement: {
-      "top left":
-        "data-[flip=false]:border-t-transparent data-[flip=false]:border-l-transparent data-[flip=true]:border-b-transparent data-[flip=true]:border-r-transparent",
-      top: "data-[flip=false]:border-t-transparent data-[flip=false]:border-l-transparent data-[flip=true]:border-b-transparent data-[flip=true]:border-r-transparent",
-      "top right":
-        "data-[flip=false]:border-t-transparent data-[flip=false]:border-l-transparent data-[flip=true]:border-b-transparent data-[flip=true]:border-r-transparent",
-      bottom:
-        "data-[flip=false]:border-b-transparent data-[flip=false]:border-r-transparent data-[flip=true]:border-t-transparent data-[flip=true]:border-l-transparent",
-      "bottom left":
-        "data-[flip=false]:border-b-transparent data-[flip=false]:border-r-transparent data-[flip=true]:border-t-transparent data-[flip=true]:border-l-transparent",
-      "bottom right":
-        "data-[flip=false]:border-b-transparent data-[flip=false]:border-r-transparent data-[flip=true]:border-t-transparent data-[flip=true]:border-l-transparent",
-      left: "data-[flip=false]:border-l-transparent data-[flip=false]:border-b-transparent data-[flip=true]:border-r-transparent data-[flip=true]:border-t-transparent",
-      "left top":
-        "data-[flip=false]:border-l-transparent data-[flip=false]:border-b-transparent data-[flip=true]:border-r-transparent data-[flip=true]:border-t-transparent",
-      "left bottom":
-        "data-[flip=false]:border-l-transparent data-[flip=false]:border-b-transparent data-[flip=true]:border-r-transparent data-[flip=true]:border-t-transparent",
-      right:
-        "data-[flip=false]:border-r-transparent data-[flip=false]:border-t-transparent data-[flip=true]:border-l-transparent data-[flip=true]:border-b-transparent",
-      "right top":
-        "data-[flip=false]:border-r-transparent data-[flip=false]:border-t-transparent data-[flip=true]:border-l-transparent data-[flip=true]:border-b-transparent",
-      "right bottom":
-        "data-[flip=false]:border-r-transparent data-[flip=false]:border-t-transparent data-[flip=true]:border-l-transparent data-[flip=true]:border-b-transparent",
+      'top left':
+        'data-[flip=false]:border-t-transparent data-[flip=false]:border-l-transparent data-[flip=true]:border-b-transparent data-[flip=true]:border-r-transparent',
+      'top':
+        'data-[flip=false]:border-t-transparent data-[flip=false]:border-l-transparent data-[flip=true]:border-b-transparent data-[flip=true]:border-r-transparent',
+      'top right':
+        'data-[flip=false]:border-t-transparent data-[flip=false]:border-l-transparent data-[flip=true]:border-b-transparent data-[flip=true]:border-r-transparent',
+      'bottom':
+        'data-[flip=false]:border-b-transparent data-[flip=false]:border-r-transparent data-[flip=true]:border-t-transparent data-[flip=true]:border-l-transparent',
+      'bottom left':
+        'data-[flip=false]:border-b-transparent data-[flip=false]:border-r-transparent data-[flip=true]:border-t-transparent data-[flip=true]:border-l-transparent',
+      'bottom right':
+        'data-[flip=false]:border-b-transparent data-[flip=false]:border-r-transparent data-[flip=true]:border-t-transparent data-[flip=true]:border-l-transparent',
+      'left':
+        'data-[flip=false]:border-l-transparent data-[flip=false]:border-b-transparent data-[flip=true]:border-r-transparent data-[flip=true]:border-t-transparent',
+      'left top':
+        'data-[flip=false]:border-l-transparent data-[flip=false]:border-b-transparent data-[flip=true]:border-r-transparent data-[flip=true]:border-t-transparent',
+      'left bottom':
+        'data-[flip=false]:border-l-transparent data-[flip=false]:border-b-transparent data-[flip=true]:border-r-transparent data-[flip=true]:border-t-transparent',
+      'right':
+        'data-[flip=false]:border-r-transparent data-[flip=false]:border-t-transparent data-[flip=true]:border-l-transparent data-[flip=true]:border-b-transparent',
+      'right top':
+        'data-[flip=false]:border-r-transparent data-[flip=false]:border-t-transparent data-[flip=true]:border-l-transparent data-[flip=true]:border-b-transparent',
+      'right bottom':
+        'data-[flip=false]:border-r-transparent data-[flip=false]:border-t-transparent data-[flip=true]:border-l-transparent data-[flip=true]:border-b-transparent',
     },
   },
 });
 
 const popoverBackdropStyle = tva({
-  base: "absolute left-0 top-0 right-0 bottom-0 web:cursor-default",
+  base: 'absolute left-0 top-0 right-0 bottom-0 web:cursor-default',
 });
 
 const popoverCloseButtonStyle = tva({
-  base: "group/popover-close-button z-[1] rounded-sm data-[focus-visible=true]:web:bg-background-100 web:outline-0 web:cursor-pointer",
+  base: 'group/popover-close-button z-[1] rounded-sm data-[focus-visible=true]:web:bg-background-100 web:outline-0 web:cursor-pointer',
 });
 
 const popoverContentStyle = tva({
-  base: "bg-background-0 rounded-lg overflow-hidden border border-outline-100",
+  base: 'bg-background-0 rounded-lg overflow-hidden border border-outline-100',
   parentVariants: {
     size: {
-      xs: "max-w-[360px] p-3.5",
-      sm: "max-w-[420px] p-4",
-      md: "max-w-[510px] p-[18px]",
-      lg: "max-w-[640px] p-5",
-      full: "p-6",
+      xs: 'max-w-[360px] p-3.5',
+      sm: 'max-w-[420px] p-4',
+      md: 'max-w-[510px] p-[18px]',
+      lg: 'max-w-[640px] p-5',
+      full: 'p-6',
     },
   },
 });
 
 const popoverHeaderStyle = tva({
-  base: "flex-row justify-between items-center",
+  base: 'flex-row justify-between items-center',
 });
 
 const popoverBodyStyle = tva({
-  base: "",
+  base: '',
 });
 
 const popoverFooterStyle = tva({
-  base: "flex-row justify-between items-center",
+  base: 'flex-row justify-between items-center',
 });
 
 type IPopoverProps = React.ComponentProps<typeof UIPopover> &
@@ -159,13 +140,12 @@ type IPopoverCloseButtonProps = React.ComponentProps<
 const Popover = React.forwardRef<
   React.ElementRef<typeof UIPopover>,
   IPopoverProps
->(({ className, size = "md", placement = "bottom", ...props }, ref) => {
+>(({ className, size = 'md', placement = 'bottom', ...props }, ref) => {
   return (
     <UIPopover
       ref={ref}
       placement={placement}
       {...props}
-      // @ts-ignore
       className={popoverStyle({ size, class: className })}
       context={{ size, placement }}
       pointerEvents="box-none"
@@ -183,12 +163,12 @@ const PopoverContent = React.forwardRef<
     <UIPopover.Content
       ref={ref}
       transition={{
-        type: "spring",
+        type: 'spring',
         damping: 18,
         stiffness: 250,
         mass: 0.9,
         opacity: {
-          type: "timing",
+          type: 'timing',
           duration: 50,
           delay: 50,
         },
@@ -215,12 +195,12 @@ const PopoverArrow = React.forwardRef<
     <UIPopover.Arrow
       ref={ref}
       transition={{
-        type: "spring",
+        type: 'spring',
         damping: 18,
         stiffness: 250,
         mass: 0.9,
         opacity: {
-          type: "timing",
+          type: 'timing',
           duration: 50,
           delay: 50,
         },
@@ -252,12 +232,12 @@ const PopoverBackdrop = React.forwardRef<
         opacity: 0,
       }}
       transition={{
-        type: "spring",
+        type: 'spring',
         damping: 18,
         stiffness: 450,
         mass: 0.9,
         opacity: {
-          type: "timing",
+          type: 'timing',
           duration: 50,
           delay: 50,
         },
@@ -329,14 +309,14 @@ const PopoverHeader = React.forwardRef<
   );
 });
 
-Popover.displayName = "Popover";
-PopoverArrow.displayName = "PopoverArrow";
-PopoverBackdrop.displayName = "PopoverBackdrop";
-PopoverContent.displayName = "PopoverContent";
-PopoverHeader.displayName = "PopoverHeader";
-PopoverFooter.displayName = "PopoverFooter";
-PopoverBody.displayName = "PopoverBody";
-PopoverCloseButton.displayName = "PopoverCloseButton";
+Popover.displayName = 'Popover';
+PopoverArrow.displayName = 'PopoverArrow';
+PopoverBackdrop.displayName = 'PopoverBackdrop';
+PopoverContent.displayName = 'PopoverContent';
+PopoverHeader.displayName = 'PopoverHeader';
+PopoverFooter.displayName = 'PopoverFooter';
+PopoverBody.displayName = 'PopoverBody';
+PopoverCloseButton.displayName = 'PopoverCloseButton';
 
 export {
   Popover,
diff --git a/components/ui/pressable/index.tsx b/components/ui/pressable/index.tsx
index 9bfc0c7..e6e5e0b 100644
--- a/components/ui/pressable/index.tsx
+++ b/components/ui/pressable/index.tsx
@@ -1,27 +1,20 @@
 'use client';
 import React from 'react';
 import { createPressable } from '@gluestack-ui/pressable';
-import { Pressable as RNPressable, Platform } from 'react-native';
+import { Pressable as RNPressable } from 'react-native';
 
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
-import { cssInterop } from 'nativewind';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
 const UIPressable = createPressable({
-  Root:
-    Platform.OS === 'web'
-      ? withStyleContext(RNPressable)
-      : withStyleContextAndStates(RNPressable),
+  Root: withStyleContext(RNPressable),
 });
 
 const pressableStyle = tva({
   base: 'data-[focus-visible=true]:outline-none data-[focus-visible=true]:ring-indicator-info data-[focus-visible=true]:ring-2 data-[disabled=true]:opacity-40',
 });
 
-cssInterop(UIPressable, { className: 'style' });
-
 type IPressableProps = Omit<
   React.ComponentProps<typeof UIPressable>,
   'context'
diff --git a/components/ui/radio/index.tsx b/components/ui/radio/index.tsx
index b8de595..1a529f9 100644
--- a/components/ui/radio/index.tsx
+++ b/components/ui/radio/index.tsx
@@ -9,31 +9,8 @@ import {
   useStyleContext,
 } from '@gluestack-ui/nativewind-utils/withStyleContext';
 import { cssInterop } from 'nativewind';
-import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
-const IndicatorWrapper = React.forwardRef<
-  React.ElementRef<typeof View>,
-  React.ComponentProps<typeof View>
->(({ ...props }, ref) => {
-  return <View {...props} ref={ref} />;
-});
-
-const LabelWrapper = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  React.ComponentProps<typeof Text>
->(({ ...props }, ref) => {
-  return <Text {...props} ref={ref} />;
-});
-
-const IconWrapper = React.forwardRef<
-  React.ElementRef<typeof PrimitiveIcon>,
-  React.ComponentProps<typeof PrimitiveIcon>
->(({ ...props }, ref) => {
-  return <PrimitiveIcon {...props} ref={ref} />;
-});
-
 type IPrimitiveIcon = {
   height?: number | string;
   width?: number | string;
@@ -44,6 +21,7 @@ type IPrimitiveIcon = {
   as?: React.ElementType;
   className?: string;
   classNameColor?: string;
+  style?: any;
 };
 
 const PrimitiveIcon = React.forwardRef<
@@ -60,6 +38,7 @@ const PrimitiveIcon = React.forwardRef<
       size,
       stroke = 'currentColor',
       as: AsComp,
+      style,
       ...props
     },
     ref
@@ -84,7 +63,15 @@ const PrimitiveIcon = React.forwardRef<
     }
 
     if (AsComp) {
-      return <AsComp ref={ref} {...props} {...sizeProps} {...colorProps} />;
+      return (
+        <AsComp
+          ref={ref}
+          {...props}
+          style={style}
+          {...sizeProps}
+          {...colorProps}
+        />
+      );
     }
     return (
       <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
@@ -154,22 +141,16 @@ const SCOPE = 'Radio';
 const UIRadio = createRadio({
   Root: (Platform.OS === 'web'
     ? withStyleContext(View, SCOPE)
-    : withStyleContextAndStates(Pressable, SCOPE)) as ReturnType<
-    typeof withStyleContextAndStates<typeof Pressable>
+    : withStyleContext(Pressable, SCOPE)) as ReturnType<
+    typeof withStyleContext<typeof Pressable>
   >,
   Group: View,
-  Icon: Platform.OS === 'web' ? IconWrapper : withStates(IconWrapper),
-  Indicator:
-    Platform.OS === 'web' ? IndicatorWrapper : withStates(IndicatorWrapper),
-  Label: Platform.OS === 'web' ? LabelWrapper : withStates(LabelWrapper),
+  Icon: PrimitiveIcon,
+  Indicator: View,
+  Label: Text,
 });
 
-cssInterop(UIRadio, { className: 'style' });
-cssInterop(UIRadio.Group, { className: 'style' });
-cssInterop(IndicatorWrapper, { className: 'style' });
-cssInterop(LabelWrapper, { className: 'style' });
-//@ts-ignore
-cssInterop(IconWrapper, {
+cssInterop(PrimitiveIcon, {
   className: {
     target: 'style',
     nativeStyleToProp: {
diff --git a/components/ui/select/index.tsx b/components/ui/select/index.tsx
index 6e600d1..ba12cb8 100644
--- a/components/ui/select/index.tsx
+++ b/components/ui/select/index.tsx
@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { Svg } from 'react-native-svg';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
 import {
   withStyleContext,
   useStyleContext,
@@ -23,7 +22,7 @@ import {
   ActionsheetSectionList,
   ActionsheetSectionHeaderText,
 } from './select-actionsheet';
-import { Pressable, View, TextInput, Platform } from 'react-native';
+import { Pressable, View, TextInput } from 'react-native';
 
 const SelectTriggerWrapper = React.forwardRef<
   React.ElementRef<typeof Pressable>,
@@ -97,6 +96,7 @@ type IPrimitiveIcon = {
   as?: React.ElementType;
   className?: string;
   classNameColor?: string;
+  style?: any;
 };
 
 const PrimitiveIcon = React.forwardRef<
@@ -113,6 +113,7 @@ const PrimitiveIcon = React.forwardRef<
       size,
       stroke = 'currentColor',
       as: AsComp,
+      style,
       ...props
     },
     ref
@@ -137,7 +138,15 @@ const PrimitiveIcon = React.forwardRef<
     }
 
     if (AsComp) {
-      return <AsComp ref={ref} {...props} {...sizeProps} {...colorProps} />;
+      return (
+        <AsComp
+          ref={ref}
+          {...props}
+          style={style}
+          {...sizeProps}
+          {...colorProps}
+        />
+      );
     }
     return (
       <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
@@ -148,10 +157,7 @@ const PrimitiveIcon = React.forwardRef<
 const UISelect = createSelect(
   {
     Root: View,
-    Trigger:
-      Platform.OS === 'web'
-        ? withStyleContext(SelectTriggerWrapper)
-        : withStyleContextAndStates(SelectTriggerWrapper),
+    Trigger: withStyleContext(SelectTriggerWrapper),
     Input: TextInput,
     Icon: PrimitiveIcon,
   },
@@ -176,7 +182,7 @@ cssInterop(UISelect.Input, {
   className: { target: 'style', nativeStyleToProp: { textAlign: true } },
 });
 cssInterop(SelectTriggerWrapper, { className: 'style' });
-//@ts-ignore
+
 cssInterop(UISelect.Icon, {
   className: {
     target: 'style',
@@ -308,7 +314,6 @@ const SelectContent = UISelect.Content;
 const SelectDragIndicator = UISelect.DragIndicator;
 const SelectDragIndicatorWrapper = UISelect.DragIndicatorWrapper;
 const SelectItem = UISelect.Item;
-const SelectItemText = UISelect.ItemText;
 const SelectScrollView = UISelect.ScrollView;
 const SelectVirtualizedList = UISelect.VirtualizedList;
 const SelectFlatList = UISelect.FlatList;
@@ -326,7 +331,6 @@ export {
   SelectDragIndicator,
   SelectDragIndicatorWrapper,
   SelectItem,
-  SelectItemText,
   SelectScrollView,
   SelectVirtualizedList,
   SelectFlatList,
diff --git a/components/ui/select/select-actionsheet.tsx b/components/ui/select/select-actionsheet.tsx
index ee3f1eb..d96d783 100644
--- a/components/ui/select/select-actionsheet.tsx
+++ b/components/ui/select/select-actionsheet.tsx
@@ -8,13 +8,11 @@ import {
   VirtualizedList,
   FlatList,
   SectionList,
-  Platform,
 } from 'react-native';
 
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
 import { cssInterop } from 'nativewind';
 import {
   Motion,
@@ -36,45 +34,69 @@ type IPrimitiveIcon = {
   stroke?: string;
   as?: React.ElementType;
   className?: string;
+  classNameColor?: string;
+  style?: any;
 };
 
 const PrimitiveIcon = React.forwardRef<
   React.ElementRef<typeof Svg>,
   IPrimitiveIcon
->(({ height, width, fill, color, size, stroke, as: AsComp, ...props }, ref) => {
-  const sizeProps = useMemo(() => {
-    if (size) return { size };
-    if (height && width) return { height, width };
-    if (height) return { height };
-    if (width) return { width };
-    return {};
-  }, [size, height, width]);
-
-  let colorProps = {};
-  if (color) {
-    colorProps = { ...colorProps, color: color };
-  }
-  if (stroke) {
-    colorProps = { ...colorProps, stroke: stroke };
-  }
-  if (fill) {
-    colorProps = { ...colorProps, fill: fill };
-  }
-  if (AsComp) {
-    return <AsComp ref={ref} {...sizeProps} {...colorProps} {...props} />;
+>(
+  (
+    {
+      height,
+      width,
+      fill,
+      color,
+      classNameColor,
+      size,
+      stroke = 'currentColor',
+      as: AsComp,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    color = color ?? classNameColor;
+    const sizeProps = useMemo(() => {
+      if (size) return { size };
+      if (height && width) return { height, width };
+      if (height) return { height };
+      if (width) return { width };
+      return {};
+    }, [size, height, width]);
+
+    let colorProps = {};
+    if (fill) {
+      colorProps = { ...colorProps, fill: fill };
+    }
+    if (stroke !== 'currentColor') {
+      colorProps = { ...colorProps, stroke: stroke };
+    } else if (stroke === 'currentColor' && color !== undefined) {
+      colorProps = { ...colorProps, stroke: color };
+    }
+
+    if (AsComp) {
+      return (
+        <AsComp
+          ref={ref}
+          {...props}
+          style={style}
+          {...sizeProps}
+          {...colorProps}
+        />
+      );
+    }
+    return (
+      <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
+    );
   }
-  return (
-    <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
-  );
-});
+);
 
 export const UIActionsheet = createActionsheet({
   Root: View,
   Content: withStyleContext(Motion.View),
-  Item:
-    Platform.OS === 'web'
-      ? withStyleContext(Pressable)
-      : withStyleContextAndStates(Pressable),
+  Item: withStyleContext(Pressable),
   ItemText: Text,
   DragIndicator: View,
   IndicatorWrapper: View,
@@ -117,7 +139,18 @@ cssInterop(UIActionsheet.FlatList, {
 });
 cssInterop(UIActionsheet.SectionList, { className: 'style' });
 cssInterop(UIActionsheet.SectionHeaderText, { className: 'style' });
-cssInterop(UIActionsheet.Icon, { className: 'style' });
+cssInterop(UIActionsheet.Icon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      fill: true,
+      color: 'classNameColor',
+      stroke: true,
+    },
+  },
+});
 
 const actionsheetStyle = tva({ base: 'w-full h-full web:pointer-events-none' });
 
diff --git a/components/ui/slider/index.tsx b/components/ui/slider/index.tsx
index 455ccd2..0837a92 100644
--- a/components/ui/slider/index.tsx
+++ b/components/ui/slider/index.tsx
@@ -1,47 +1,27 @@
 'use client';
 import { createSlider } from '@gluestack-ui/slider';
 import { Pressable } from 'react-native';
-import { View, Platform } from 'react-native';
+import { View } from 'react-native';
 import React from 'react';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import {
   withStyleContext,
   useStyleContext,
 } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
-import { cssInterop } from 'nativewind';
-import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
-const ThumbWrapper = React.forwardRef<
-  React.ElementRef<typeof View>,
-  React.ComponentProps<typeof View>
->((props, ref) => <View ref={ref} {...props} />);
-
-const FilledTrackWrapper = React.forwardRef<
-  React.ElementRef<typeof View>,
-  React.ComponentProps<typeof View>
->((props, ref) => <View ref={ref} {...props} />);
-
 const SCOPE = 'SLIDER';
+const Root = withStyleContext(View, SCOPE);
 export const UISlider = createSlider({
-  Root:
-    Platform.OS === 'web'
-      ? withStyleContext(View, SCOPE)
-      : withStyleContextAndStates(View, SCOPE),
-  Thumb: Platform.OS === 'web' ? ThumbWrapper : withStates(View),
+  Root: Root,
+  Thumb: View,
   Track: Pressable,
-  FilledTrack: Platform.OS === 'web' ? FilledTrackWrapper : withStates(View),
+  FilledTrack: View,
   ThumbInteraction: View,
 });
 
-cssInterop(UISlider, { className: 'style' });
-cssInterop(ThumbWrapper, { className: 'style' });
-cssInterop(UISlider.Track, { className: 'style' });
-cssInterop(FilledTrackWrapper, { className: 'style' });
-
 const sliderStyle = tva({
-  base: 'justify-center items-center data-[disabled=true]:web:opacity-40 data-[disabled=true]:web:pointer-events-none',
+  base: 'justify-center items-center data-[disabled=true]:opacity-40 data-[disabled=true]:web:pointer-events-none',
   variants: {
     orientation: {
       horizontal: 'w-full',
@@ -213,7 +193,6 @@ export const SliderThumb = React.forwardRef<
 
   return (
     <UISlider.Thumb
-      //@ts-ignore
       ref={ref}
       {...props}
       className={sliderThumbStyle({
@@ -269,7 +248,6 @@ export const SliderFilledTrack = React.forwardRef<
 
   return (
     <UISlider.FilledTrack
-      //@ts-ignore
       ref={ref}
       {...props}
       className={sliderFilledTrackStyle({
diff --git a/components/ui/spinner/index.tsx b/components/ui/spinner/index.tsx
index 8f6a7c5..19e8820 100644
--- a/components/ui/spinner/index.tsx
+++ b/components/ui/spinner/index.tsx
@@ -1,33 +1,41 @@
 'use client';
 import { ActivityIndicator } from 'react-native';
 import React from 'react';
-import { createSpinner } from '@gluestack-ui/spinner';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { cssInterop } from 'nativewind';
 
-const UISpinner = createSpinner({ Root: ActivityIndicator });
-
-cssInterop(UISpinner, {
+cssInterop(ActivityIndicator, {
   className: { target: 'style', nativeStyleToProp: { color: true } },
 });
 
 const spinnerStyle = tva({});
 
-type ISpinnerProps = React.ComponentProps<typeof UISpinner>;
-
 const Spinner = React.forwardRef<
-  React.ElementRef<typeof UISpinner>,
-  ISpinnerProps
->(({ className, color, ...props }, ref) => {
-  return (
-    <UISpinner
-      ref={ref}
-      {...props}
-      color={color}
-      className={spinnerStyle({ class: className })}
-    />
-  );
-});
+  React.ElementRef<typeof ActivityIndicator>,
+  React.ComponentProps<typeof ActivityIndicator>
+>(
+  (
+    {
+      className,
+      color,
+      focusable = false,
+      'aria-label': ariaLabel = 'loading',
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <ActivityIndicator
+        ref={ref}
+        focusable={focusable}
+        aria-label={ariaLabel}
+        {...props}
+        color={color}
+        className={spinnerStyle({ class: className })}
+      />
+    );
+  }
+);
 
 Spinner.displayName = 'Spinner';
 
diff --git a/components/ui/switch/index.tsx b/components/ui/switch/index.tsx
index 85d3e6d..c70e666 100644
--- a/components/ui/switch/index.tsx
+++ b/components/ui/switch/index.tsx
@@ -1,29 +1,15 @@
 'use client';
 import React from 'react';
-import { Switch as RNSwitch, Platform } from 'react-native';
+import { Switch as RNSwitch } from 'react-native';
 import { createSwitch } from '@gluestack-ui/switch';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
-import { cssInterop } from 'nativewind';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
-const SwitchWrapper = React.forwardRef<
-  React.ElementRef<typeof RNSwitch>,
-  React.ComponentProps<typeof RNSwitch>
->(({ ...props }, ref) => {
-  return <RNSwitch {...props} ref={ref} />;
-});
-
 const UISwitch = createSwitch({
-  Root:
-    Platform.OS === 'web'
-      ? withStyleContext(SwitchWrapper)
-      : withStyleContextAndStates(SwitchWrapper),
+  Root: withStyleContext(RNSwitch),
 });
 
-cssInterop(SwitchWrapper, { className: 'style' });
-
 const switchStyle = tva({
   base: 'data-[focus=true]:outline-0 data-[focus=true]:ring-2 data-[focus=true]:ring-indicator-primary web:cursor-pointer disabled:cursor-not-allowed data-[disabled=true]:opacity-40 data-[invalid=true]:border-error-700 data-[invalid=true]:rounded-xl data-[invalid=true]:border-2',
 
diff --git a/components/ui/table/index.tsx b/components/ui/table/index.tsx
index 9cdd0f0..10fbd67 100644
--- a/components/ui/table/index.tsx
+++ b/components/ui/table/index.tsx
@@ -7,6 +7,7 @@ import {
   TR as ExpoTR,
   Caption as ExpoTCaption,
 } from '@expo/html-elements';
+
 import {
   tableStyle,
   tableHeaderStyle,
@@ -19,8 +20,16 @@ import {
 } from './styles';
 import { Text, View } from 'react-native';
 
-const TableHeaderContext = createContext<any>({});
-const TableFooterContext = createContext<any>({});
+const TableHeaderContext = createContext<{
+  isHeaderRow: boolean;
+}>({
+  isHeaderRow: false,
+});
+const TableFooterContext = createContext<{
+  isFooterRow: boolean;
+}>({
+  isFooterRow: false,
+});
 
 type ITableProps = React.ComponentProps<typeof ExpoTable>;
 type ITableHeaderProps = React.ComponentProps<typeof ExpoTHead>;
@@ -39,6 +48,7 @@ const Table = React.forwardRef<React.ElementRef<typeof ExpoTable>, ITableProps>(
   ({ className, ...props }, ref) => {
     return (
       <ExpoTable
+        // @ts-expect-error
         ref={ref}
         className={tableStyle({ class: className })}
         {...props}
@@ -59,6 +69,7 @@ const TableHeader = React.forwardRef<
   return (
     <TableHeaderContext.Provider value={contextValue}>
       <ExpoTHead
+        // @ts-expect-error
         ref={ref}
         className={tableHeaderStyle({ class: className })}
         {...props}
@@ -73,6 +84,7 @@ const TableBody = React.forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <ExpoTBody
+      // @ts-expect-error
       ref={ref}
       className={tableBodyStyle({ class: className })}
       {...props}
@@ -92,6 +104,7 @@ const TableFooter = React.forwardRef<
   return (
     <TableFooterContext.Provider value={contextValue}>
       <ExpoTFoot
+        // @ts-expect-error
         ref={ref}
         className={tableFooterStyle({ class: className })}
         {...props}
@@ -132,6 +145,7 @@ const TableRow = React.forwardRef<
 
   return (
     <ExpoTR
+      // @ts-expect-error
       ref={ref}
       className={tableRowStyleStyle({
         isHeaderRow,
@@ -172,6 +186,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <ExpoTCaption
+      // @ts-expect-error
       ref={ref}
       className={tableCaptionStyle({ class: className })}
       {...props}
diff --git a/components/ui/table/index.web.tsx b/components/ui/table/index.web.tsx
index a6a3a79..e8c848f 100644
--- a/components/ui/table/index.web.tsx
+++ b/components/ui/table/index.web.tsx
@@ -10,8 +10,16 @@ import {
   tableCaptionStyle,
 } from './styles';
 
-const TableHeaderContext = createContext<any>({});
-const TableFooterContext = createContext<any>({});
+const TableHeaderContext = createContext<{
+  isHeaderRow: boolean;
+}>({
+  isHeaderRow: false,
+});
+const TableFooterContext = createContext<{
+  isFooterRow: boolean;
+}>({
+  isFooterRow: false,
+});
 
 const Table = React.forwardRef(({ className, ...props }: any, ref?: any) => {
   return (
diff --git a/components/ui/textarea/index.tsx b/components/ui/textarea/index.tsx
index 4a5fd19..0a9b0d9 100644
--- a/components/ui/textarea/index.tsx
+++ b/components/ui/textarea/index.tsx
@@ -1,36 +1,18 @@
 'use client';
 import React from 'react';
 import { createTextarea } from '@gluestack-ui/textarea';
-import { View, TextInput, Platform } from 'react-native';
+import { View, TextInput } from 'react-native';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import {
   withStyleContext,
   useStyleContext,
 } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
-import { cssInterop } from 'nativewind';
-import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
-const TextareaWrapper = React.forwardRef<
-  React.ElementRef<typeof View>,
-  React.ComponentProps<typeof View>
->(({ ...props }, ref) => {
-  return <View {...props} ref={ref} />;
-});
-
 const SCOPE = 'TEXTAREA';
 const UITextarea = createTextarea({
-  Root:
-    Platform.OS === 'web'
-      ? withStyleContext(TextareaWrapper, SCOPE)
-      : withStyleContextAndStates(TextareaWrapper, SCOPE),
-  Input: Platform.OS === 'web' ? TextInput : withStates(TextInput),
-});
-
-cssInterop(TextareaWrapper, { className: 'style' });
-cssInterop(UITextarea.Input, {
-  className: { target: 'style', nativeStyleToProp: { textAlign: true } },
+  Root: withStyleContext(View, SCOPE),
+  Input: TextInput,
 });
 
 const textareaStyle = tva({
diff --git a/components/ui/toast/index.tsx b/components/ui/toast/index.tsx
index 21c1f66..43f6f7e 100644
--- a/components/ui/toast/index.tsx
+++ b/components/ui/toast/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
-import { createToast, createToastHook } from '@gluestack-ui/toast';
-import { Text, View, Platform } from 'react-native';
+import { createToastHook } from '@gluestack-ui/toast';
+import { AccessibilityInfo, Text, View } from 'react-native';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { cssInterop } from 'nativewind';
 import { Motion, AnimatePresence } from '@legendapp/motion';
@@ -9,24 +9,12 @@ import {
   withStyleContext,
   useStyleContext,
 } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
 export const useToast = createToastHook(Motion.View, AnimatePresence);
 const SCOPE = 'TOAST';
-export const UIToast = createToast({
-  Root:
-    Platform.OS === 'web'
-      ? withStyleContext(View, SCOPE)
-      : withStyleContextAndStates(View, SCOPE),
-  Title: Text,
-  Description: Text,
-});
 
 cssInterop(Motion.View, { className: 'style' });
-cssInterop(UIToast, { className: 'style' });
-cssInterop(UIToast.Title, { className: 'style' });
-cssInterop(UIToast.Description, { className: 'style' });
 
 const toastStyle = tva({
   base: 'p-4 m-1 rounded-md gap-1 web:pointer-events-auto shadow-hard-5 border-outline-100',
@@ -154,16 +142,17 @@ const toastDescriptionStyle = tva({
   },
 });
 
-type IToastProps = React.ComponentProps<typeof UIToast> & {
+const Root = withStyleContext(View, SCOPE);
+type IToastProps = React.ComponentProps<typeof Root> & {
   className?: string;
 } & VariantProps<typeof toastStyle>;
 
 export const Toast = React.forwardRef<
-  React.ElementRef<typeof UIToast>,
+  React.ElementRef<typeof Root>,
   IToastProps
 >(({ className, variant = 'solid', action = 'muted', ...props }, ref) => {
   return (
-    <UIToast
+    <Root
       ref={ref}
       className={toastStyle({ variant, action, class: className })}
       context={{ variant, action }}
@@ -172,20 +161,29 @@ export const Toast = React.forwardRef<
   );
 });
 
-type IToastTitleProps = React.ComponentProps<typeof UIToast.Title> & {
+type IToastTitleProps = React.ComponentProps<typeof Text> & {
   className?: string;
 } & VariantProps<typeof toastTitleStyle>;
 
 export const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof UIToast.Title>,
+  React.ElementRef<typeof Text>,
   IToastTitleProps
->(({ className, size = 'md', ...props }, ref) => {
+>(({ className, size = 'md', children, ...props }, ref) => {
   const { variant: parentVariant, action: parentAction } =
     useStyleContext(SCOPE);
+  React.useEffect(() => {
+    // Issue from react-native side
+    // Hack for now, will fix this later
+    AccessibilityInfo.announceForAccessibility(children as string);
+  }, [children]);
+
   return (
-    <UIToast.Title
-      ref={ref}
+    <Text
       {...props}
+      ref={ref}
+      aria-live="assertive"
+      aria-atomic="true"
+      role="alert"
       className={toastTitleStyle({
         size,
         class: className,
@@ -194,23 +192,23 @@ export const ToastTitle = React.forwardRef<
           action: parentAction,
         },
       })}
-    />
+    >
+      {children}
+    </Text>
   );
 });
 
-type IToastDescriptionProps = React.ComponentProps<
-  typeof UIToast.Description
-> & {
+type IToastDescriptionProps = React.ComponentProps<typeof Text> & {
   className?: string;
 } & VariantProps<typeof toastDescriptionStyle>;
 
 export const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof UIToast.Description>,
+  React.ElementRef<typeof Text>,
   IToastDescriptionProps
 >(({ className, size = 'md', ...props }, ref) => {
   const { variant: parentVariant } = useStyleContext(SCOPE);
   return (
-    <UIToast.Description
+    <Text
       ref={ref}
       {...props}
       className={toastDescriptionStyle({
diff --git a/components/ui/tooltip/index.tsx b/components/ui/tooltip/index.tsx
index 1231598..b3995f9 100644
--- a/components/ui/tooltip/index.tsx
+++ b/components/ui/tooltip/index.tsx
@@ -1,80 +1,73 @@
-'use client';
-import React from 'react';
-import { createTooltip } from '@gluestack-ui/tooltip';
-import { View, Text, Platform } from 'react-native';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { cssInterop } from 'nativewind';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
-
-import { Motion, AnimatePresence } from '@legendapp/motion';
+"use client";
+import React from "react";
+import { createTooltip } from "@gluestack-ui/tooltip";
+import { View, Text } from "react-native";
+import type { VariantProps } from "@gluestack-ui/nativewind-utils";
+import { tva } from "@gluestack-ui/nativewind-utils/tva";
+import { withStyleContext } from "@gluestack-ui/nativewind-utils/withStyleContext";
+import { Motion, AnimatePresence } from "@legendapp/motion";
+import { cssInterop } from "nativewind";
 
 export const UITooltip = createTooltip({
-  Root:
-    Platform.OS === 'web'
-      ? withStyleContext(View)
-      : withStyleContextAndStates(View),
+  Root: withStyleContext(View),
   Content: Motion.View,
   Text: Text,
   AnimatePresence: AnimatePresence,
 });
 
+cssInterop(Motion.View, { className: "style" });
+
 const tooltipStyle = tva({
-  base: 'w-full h-full web:pointer-events-none',
+  base: "w-full h-full web:pointer-events-none",
 });
 
 const tooltipContentStyle = tva({
-  base: 'py-1 px-3 rounded-sm bg-background-900 web:pointer-events-auto',
+  base: "py-1 px-3 rounded-sm bg-background-900 web:pointer-events-auto",
 });
 
 const tooltipTextStyle = tva({
-  base: 'font-normal tracking-normal web:select-none text-xs text-typography-50',
+  base: "font-normal tracking-normal web:select-none text-xs text-typography-50",
 
   variants: {
     isTruncated: {
       true: {
-        props: 'line-clamp-1 truncate',
+        props: "line-clamp-1 truncate",
       },
     },
     bold: {
-      true: 'font-bold',
+      true: "font-bold",
     },
     underline: {
-      true: 'underline',
+      true: "underline",
     },
     strikeThrough: {
-      true: 'line-through',
+      true: "line-through",
     },
     size: {
-      '2xs': 'text-2xs',
-      'xs': 'text-xs',
-      'sm': 'text-sm',
-      'md': 'text-base',
-      'lg': 'text-lg',
-      'xl': 'text-xl',
-      '2xl': 'text-2xl',
-      '3xl': 'text-3xl',
-      '4xl': 'text-4xl',
-      '5xl': 'text-5xl',
-      '6xl': 'text-6xl',
+      "2xs": "text-2xs",
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "6xl": "text-6xl",
     },
     sub: {
-      true: 'text-xs',
+      true: "text-xs",
     },
     italic: {
-      true: 'italic',
+      true: "italic",
     },
     highlight: {
-      true: 'bg-yellow-500',
+      true: "bg-yellow-500",
     },
   },
 });
 
-cssInterop(UITooltip, { className: 'style' });
-cssInterop(UITooltip.Content, { className: 'style' });
-cssInterop(UITooltip.Text, { className: 'style' });
-
 type ITooltipProps = React.ComponentProps<typeof UITooltip> &
   VariantProps<typeof tooltipStyle> & { className?: string };
 type ITooltipContentProps = React.ComponentProps<typeof UITooltip.Content> &
diff --git a/package-lock.json b/package-lock.json
index ced769a..b682114 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
         "@gluestack-ui/link": "^0.1.22",
         "@gluestack-ui/menu": "^0.2.36",
         "@gluestack-ui/modal": "^0.1.34",
-        "@gluestack-ui/nativewind-utils": "^1.0.24",
+        "@gluestack-ui/nativewind-utils": "1.0.24",
         "@gluestack-ui/overlay": "^0.1.15",
         "@gluestack-ui/popover": "^0.1.39",
         "@gluestack-ui/pressable": "^0.1.16",
@@ -54,7 +54,7 @@
         "expo-web-browser": "~13.0.3",
         "lucide-react": "^0.446.0",
         "lucide-react-native": "^0.445.0",
-        "nativewind": "4.0.36",
+        "nativewind": "^4.1.23",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-native": "0.74.5",
@@ -8401,6 +8401,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/array-timsort": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-timsort/-/array-timsort-1.0.3.tgz",
+      "integrity": "sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ=="
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -8831,38 +8836,6 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.19.12.tgz",
       "integrity": "sha512-eYZ4+P6jNcB37lObWIg0pUbi7+3PKoU1Oie2j0C8UF3cXyXoR74tO2NBjI/FORb2LJyItJZEAmjU5pSaJYEL1w=="
     },
-    "node_modules/babel-plugin-tester": {
-      "version": "11.0.4",
-      "resolved": "https://registry.npmjs.org/babel-plugin-tester/-/babel-plugin-tester-11.0.4.tgz",
-      "integrity": "sha512-cqswtpSPo0e++rZB0l/54EG17LL25l9gLgh59yXfnmNxX+2lZTIOpx2zt4YI9QIClVXc8xf63J6yWwKkzy0jNg==",
-      "dependencies": {
-        "core-js": "^3.27.2",
-        "debug": "^4.3.4",
-        "lodash.mergewith": "^4.6.2",
-        "prettier": "^2.8.3",
-        "strip-indent": "^3.0.0"
-      },
-      "engines": {
-        "node": "^14.20.0 || ^16.16.0 || >=18.5.0"
-      },
-      "peerDependencies": {
-        "@babel/core": ">=7.11.6"
-      }
-    },
-    "node_modules/babel-plugin-tester/node_modules/prettier": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
-      "bin": {
-        "prettier": "bin-prettier.js"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
-      }
-    },
     "node_modules/babel-plugin-transform-flow-enums": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-flow-enums/-/babel-plugin-transform-flow-enums-0.0.2.tgz",
@@ -9583,6 +9556,21 @@
         "node": ">= 10"
       }
     },
+    "node_modules/comment-json": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/comment-json/-/comment-json-4.2.5.tgz",
+      "integrity": "sha512-bKw/r35jR3HGt5PEPm1ljsQQGyCrR8sFGNiN5L+ykDHdpO8Smxkrkla9Yi6NkQyUrb8V54PGhfMs6NrIwtxtdw==",
+      "dependencies": {
+        "array-timsort": "^1.0.3",
+        "core-util-is": "^1.0.3",
+        "esprima": "^4.0.1",
+        "has-own-prop": "^2.0.0",
+        "repeat-string": "^1.6.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -9690,16 +9678,6 @@
         "node": ">=6.6.0"
       }
     },
-    "node_modules/core-js": {
-      "version": "3.38.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
-      "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
-      "hasInstallScript": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/core-js"
-      }
-    },
     "node_modules/core-js-compat": {
       "version": "3.38.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.1.tgz",
@@ -11982,6 +11960,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/has-own-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-own-prop/-/has-own-prop-2.0.0.tgz",
+      "integrity": "sha512-Pq0h+hvsVm6dDEa8x82GnLSYHOzNDt7f0ddFa3FqcQlgzEiptPqL+XrOJNavjOzSYiYWIrgeVYYgGlLmnxwilQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/has-property-descriptors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
@@ -15602,9 +15588,9 @@
       }
     },
     "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.22.0.tgz",
-      "integrity": "sha512-xaYL3xperGwD85rQioDb52ozF3NAJb+9wrge3jD9lxGffplu0Mn35rXMptB8Uc2N9Mw1i3Bvl7+z1evlqVl7ww==",
+      "version": "1.28.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.28.1.tgz",
+      "integrity": "sha512-b7sF89B31kYYijxVcFO7l5u6UNA862YstNu+3YbLl/IQKzveL4a5cwR5cdpG+OOhErg/c2u9WCmzZoX2I5GBvw==",
       "cpu": [
         "x64"
       ],
@@ -15715,6 +15701,25 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.28.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.28.1.tgz",
+      "integrity": "sha512-Erm72kHmMg/3h350PTseskz+eEGBM17Fuu79WW2Qqt0BfWSF1jHHc12lkJCWMYl5jcBHPs5yZdgNHtJ7IJS3Uw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/lightningcss-win32-x64-msvc": {
       "version": "1.19.0",
       "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.19.0.tgz",
@@ -15771,11 +15776,6 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
-    "node_modules/lodash.mergewith": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",
-      "integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ=="
-    },
     "node_modules/lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
@@ -16565,14 +16565,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/min-indent": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -16745,11 +16737,13 @@
       }
     },
     "node_modules/nativewind": {
-      "version": "4.0.36",
-      "resolved": "https://registry.npmjs.org/nativewind/-/nativewind-4.0.36.tgz",
-      "integrity": "sha512-nd0Xgjzaq0ISvUAjibZXcuSvvpX1BGX2mfOGBPZpjGfHL3By6fwLGsNhrKU6mi2FF30c+kdok3e2I4k/O0UO1Q==",
+      "version": "4.1.23",
+      "resolved": "https://registry.npmjs.org/nativewind/-/nativewind-4.1.23.tgz",
+      "integrity": "sha512-oLX3suGI6ojQqWxdQezOSM5GmJ4KvMnMtmaSMN9Ggb5j7ysFt4nHxb1xs8RDjZR7BWc+bsetNJU8IQdQMHqRpg==",
       "dependencies": {
-        "react-native-css-interop": "0.0.36"
+        "comment-json": "^4.2.5",
+        "debug": "^4.3.7",
+        "react-native-css-interop": "0.1.22"
       },
       "engines": {
         "node": ">=16"
@@ -18220,15 +18214,16 @@
       }
     },
     "node_modules/react-native-css-interop": {
-      "version": "0.0.36",
-      "resolved": "https://registry.npmjs.org/react-native-css-interop/-/react-native-css-interop-0.0.36.tgz",
-      "integrity": "sha512-ZWoKQlq6XrI5DB4BdPk5ABvJQsX7zls1SQYWuYXOQB8u5QE0KH3OfOGAGRZPekTjgkhjqGO4Bf8G2JTSWAYMSg==",
+      "version": "0.1.22",
+      "resolved": "https://registry.npmjs.org/react-native-css-interop/-/react-native-css-interop-0.1.22.tgz",
+      "integrity": "sha512-Mu01e+H9G+fxSWvwtgWlF5MJBJC4VszTCBXopIpeR171lbeBInHb8aHqoqRPxmJpi3xIHryzqKFOJYAdk7PBxg==",
       "dependencies": {
         "@babel/helper-module-imports": "^7.22.15",
         "@babel/traverse": "^7.23.0",
         "@babel/types": "^7.23.0",
-        "babel-plugin-tester": "^11.0.4",
-        "lightningcss": "1.22.0"
+        "debug": "^4.3.7",
+        "lightningcss": "^1.27.0",
+        "semver": "^7.6.3"
       },
       "engines": {
         "node": ">=18"
@@ -18249,9 +18244,9 @@
       }
     },
     "node_modules/react-native-css-interop/node_modules/lightningcss": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.22.0.tgz",
-      "integrity": "sha512-+z0qvwRVzs4XGRXelnWRNwqsXUx8k3bSkbP8vD42kYKSk3z9OM2P3e/gagT7ei/gwh8DTS80LZOFZV6lm8Z8Fg==",
+      "version": "1.28.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.28.1.tgz",
+      "integrity": "sha512-KRDkHlLlNj3DWh79CDt93fPlRJh2W1AuHV0ZSZAMMuN7lqlsZTV5842idfS1urWG8q9tc17velp1gCXhY7sLnQ==",
       "dependencies": {
         "detect-libc": "^1.0.3"
       },
@@ -18263,21 +18258,22 @@
         "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.22.0",
-        "lightningcss-darwin-x64": "1.22.0",
-        "lightningcss-freebsd-x64": "1.22.0",
-        "lightningcss-linux-arm-gnueabihf": "1.22.0",
-        "lightningcss-linux-arm64-gnu": "1.22.0",
-        "lightningcss-linux-arm64-musl": "1.22.0",
-        "lightningcss-linux-x64-gnu": "1.22.0",
-        "lightningcss-linux-x64-musl": "1.22.0",
-        "lightningcss-win32-x64-msvc": "1.22.0"
+        "lightningcss-darwin-arm64": "1.28.1",
+        "lightningcss-darwin-x64": "1.28.1",
+        "lightningcss-freebsd-x64": "1.28.1",
+        "lightningcss-linux-arm-gnueabihf": "1.28.1",
+        "lightningcss-linux-arm64-gnu": "1.28.1",
+        "lightningcss-linux-arm64-musl": "1.28.1",
+        "lightningcss-linux-x64-gnu": "1.28.1",
+        "lightningcss-linux-x64-musl": "1.28.1",
+        "lightningcss-win32-arm64-msvc": "1.28.1",
+        "lightningcss-win32-x64-msvc": "1.28.1"
       }
     },
     "node_modules/react-native-css-interop/node_modules/lightningcss-darwin-arm64": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.22.0.tgz",
-      "integrity": "sha512-aH2be3nNny+It5YEVm8tBSSdRlBVWQV8m2oJ7dESiYRzyY/E/bQUe2xlw5caaMuhlM9aoTMtOH25yzMhir0qPg==",
+      "version": "1.28.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.28.1.tgz",
+      "integrity": "sha512-VG3vvzM0m/rguCdm76DdobNeNJnHK+jWcdkNLFWHLh9YCotRvbRIt45JxwcHlIF8TDqWStVLTdghq5NaigVCBQ==",
       "cpu": [
         "arm64"
       ],
@@ -18294,9 +18290,9 @@
       }
     },
     "node_modules/react-native-css-interop/node_modules/lightningcss-darwin-x64": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.22.0.tgz",
-      "integrity": "sha512-9KHRFA0Y6mNxRHeoQMp0YaI0R0O2kOgUlYPRjuasU4d+pI8NRhVn9bt0yX9VPs5ibWX1RbDViSPtGJvYYrfVAQ==",
+      "version": "1.28.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.28.1.tgz",
+      "integrity": "sha512-O7ORdislvKfMohFl4Iq7fxKqdJOuuxArcglVI3amuFO5DJ0wfV3Gxgi1JRo49slfr7OVzJQEHLG4muTWYM5cTQ==",
       "cpu": [
         "x64"
       ],
@@ -18313,9 +18309,9 @@
       }
     },
     "node_modules/react-native-css-interop/node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.22.0.tgz",
-      "integrity": "sha512-epQGvXIjOuxrZpMpMnRjK54ZqzhiHhCPLtHvw2fb6NeK2kK9YtF0wqmeTBiQ1AkbWfnnXGTstYaFNiadNK+StQ==",
+      "version": "1.28.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.28.1.tgz",
+      "integrity": "sha512-p61kXwvhUDLLzkWHjzSFfUBW/F0iy3jr3CWi3k8SKULtJEsJXTI9DqRm9EixxMSe2AMBQBt4auTYiQL4B1N51A==",
       "cpu": [
         "arm"
       ],
@@ -18332,9 +18328,9 @@
       }
     },
     "node_modules/react-native-css-interop/node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.22.0.tgz",
-      "integrity": "sha512-AArGtKSY4DGTA8xP8SDyNyKtpsUl1Rzq6FW4JomeyUQ4nBrR71uPChksTpj3gmWuGhZeRKLeCUI1DBid/zhChg==",
+      "version": "1.28.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.28.1.tgz",
+      "integrity": "sha512-iO+fN9hOMmzfwqcG2/BgUtMKD48H2JO/SXU44fyIwpY2veb65QF5xiRrQ9l1FwIxbGK3231KBYCtAqv+xf+NsQ==",
       "cpu": [
         "arm64"
       ],
@@ -18351,9 +18347,9 @@
       }
     },
     "node_modules/react-native-css-interop/node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.22.0.tgz",
-      "integrity": "sha512-RRraNgP8hnBPhInTTUdlFm+z16C/ghbxBG51Sw00hd7HUyKmEUKRozyc5od+/N6pOrX/bIh5vIbtMXIxsos0lg==",
+      "version": "1.28.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.28.1.tgz",
+      "integrity": "sha512-dnMHeXEmCUzHHZjaDpQBYuBKcN9nPC3nPFKl70bcj5Bkn5EmkcgEqm5p035LKOgvAwk1XwLpQCML6pXmCwz0NQ==",
       "cpu": [
         "arm64"
       ],
@@ -18370,9 +18366,9 @@
       }
     },
     "node_modules/react-native-css-interop/node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.22.0.tgz",
-      "integrity": "sha512-grdrhYGRi2KrR+bsXJVI0myRADqyA7ekprGxiuK5QRNkv7kj3Yq1fERDNyzZvjisHwKUi29sYMClscbtl+/Zpw==",
+      "version": "1.28.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.28.1.tgz",
+      "integrity": "sha512-7vWDISaMUn+oo2TwRdf2hl/BLdPxvywv9JKEqNZB/0K7bXwV4XE9wN/C2sAp1gGuh6QBA8lpjF4JIPt3HNlCHA==",
       "cpu": [
         "x64"
       ],
@@ -18389,9 +18385,9 @@
       }
     },
     "node_modules/react-native-css-interop/node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.22.0.tgz",
-      "integrity": "sha512-t5f90X+iQUtIyR56oXIHMBUyQFX/zwmPt72E6Dane3P8KNGlkijTg2I75XVQS860gNoEFzV7Mm5ArRRA7u5CAQ==",
+      "version": "1.28.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.28.1.tgz",
+      "integrity": "sha512-IHCu9tVGP+x5BCpA2rF3D04DBokcBza/a8AuHQU+1AiMKubuMegPwcL7RatBgK4ztFHeYnnD5NdhwhRfYMAtNA==",
       "cpu": [
         "x64"
       ],
@@ -18408,9 +18404,9 @@
       }
     },
     "node_modules/react-native-css-interop/node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.22.0.tgz",
-      "integrity": "sha512-64HTDtOOZE9PUCZJiZZQpyqXBbdby1lnztBccnqh+NtbKxjnGzP92R2ngcgeuqMPecMNqNWxgoWgTGpC+yN5Sw==",
+      "version": "1.28.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.28.1.tgz",
+      "integrity": "sha512-ZPQtvx+uQBzrSdHH8p4H3M9Alue+x369TPZAA3b4K3d92FPhpZCuBG04+HQzspam9sVeID9mI6f3VRAs2ezaEA==",
       "cpu": [
         "x64"
       ],
@@ -18426,6 +18422,17 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/react-native-css-interop/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-native-helmet-async": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/react-native-helmet-async/-/react-native-helmet-async-2.0.4.tgz",
@@ -18891,6 +18898,14 @@
       "resolved": "https://registry.npmjs.org/remove-trailing-slash/-/remove-trailing-slash-0.1.1.tgz",
       "integrity": "sha512-o4S4Qh6L2jpnCy83ysZDau+VORNvnFw07CKSAymkd6ICNVEPisMyzlc00KlvvicsxKck94SEwhDnMNdICzO+tA=="
     },
+    "node_modules/repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -19856,17 +19871,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/strip-indent": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
-      "dependencies": {
-        "min-indent": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
diff --git a/package.json b/package.json
index 40d1f43..1d1eca9 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "@gluestack-ui/link": "^0.1.22",
     "@gluestack-ui/menu": "^0.2.36",
     "@gluestack-ui/modal": "^0.1.34",
-    "@gluestack-ui/nativewind-utils": "^1.0.24",
+    "@gluestack-ui/nativewind-utils": "1.0.24",
     "@gluestack-ui/overlay": "^0.1.15",
     "@gluestack-ui/popover": "^0.1.39",
     "@gluestack-ui/pressable": "^0.1.16",
@@ -49,15 +49,17 @@
     "babel-plugin-module-resolver": "^5.0.2",
     "expo": "~51.0.37",
     "expo-font": "~12.0.9",
+    "expo-image": "~1.13.0",
     "expo-linking": "~6.3.1",
     "expo-router": "~3.5.23",
     "expo-splash-screen": "~0.27.5",
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.7",
+    "expo-updates": "~0.25.27",
     "expo-web-browser": "~13.0.3",
     "lucide-react": "^0.446.0",
     "lucide-react-native": "^0.445.0",
-    "nativewind": "4.0.36",
+    "nativewind": "^4.1.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.5",
@@ -66,9 +68,7 @@
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",
     "react-native-web": "~0.19.10",
-    "tailwindcss": "^3.4.13",
-    "expo-updates": "~0.25.27",
-    "expo-image": "~1.13.0"
+    "tailwindcss": "^3.4.13"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/tailwind.config.js b/tailwind.config.js
index 497be2c..f20a88d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,196 +1,191 @@
-const gluestackPlugin = require('@gluestack-ui/nativewind-utils/tailwind-plugin');
+const gluestackPlugin = require("@gluestack-ui/nativewind-utils/tailwind-plugin");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: "media",
   content: ["./app/**/*.{tsx,jsx,ts,js}", "./components/**/*.{tsx,jsx,ts,js}"],
-  presets: [require('nativewind/preset')],
-  safelist: [
-    {
-      pattern:
-        /(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/,
-    },
-  ],
+  presets: [require("nativewind/preset")],
+  safelist: [],
   theme: {
     extend: {
       colors: {
         primary: {
-          0: 'rgb(var(--color-primary-0)/<alpha-value>)',
-          50: 'rgb(var(--color-primary-50)/<alpha-value>)',
-          100: 'rgb(var(--color-primary-100)/<alpha-value>)',
-          200: 'rgb(var(--color-primary-200)/<alpha-value>)',
-          300: 'rgb(var(--color-primary-300)/<alpha-value>)',
-          400: 'rgb(var(--color-primary-400)/<alpha-value>)',
-          500: 'rgb(var(--color-primary-500)/<alpha-value>)',
-          600: 'rgb(var(--color-primary-600)/<alpha-value>)',
-          700: 'rgb(var(--color-primary-700)/<alpha-value>)',
-          800: 'rgb(var(--color-primary-800)/<alpha-value>)',
-          900: 'rgb(var(--color-primary-900)/<alpha-value>)',
-          950: 'rgb(var(--color-primary-950)/<alpha-value>)',
+          0: "rgb(var(--color-primary-0)/<alpha-value>)",
+          50: "rgb(var(--color-primary-50)/<alpha-value>)",
+          100: "rgb(var(--color-primary-100)/<alpha-value>)",
+          200: "rgb(var(--color-primary-200)/<alpha-value>)",
+          300: "rgb(var(--color-primary-300)/<alpha-value>)",
+          400: "rgb(var(--color-primary-400)/<alpha-value>)",
+          500: "rgb(var(--color-primary-500)/<alpha-value>)",
+          600: "rgb(var(--color-primary-600)/<alpha-value>)",
+          700: "rgb(var(--color-primary-700)/<alpha-value>)",
+          800: "rgb(var(--color-primary-800)/<alpha-value>)",
+          900: "rgb(var(--color-primary-900)/<alpha-value>)",
+          950: "rgb(var(--color-primary-950)/<alpha-value>)",
         },
         secondary: {
-          0: 'rgb(var(--color-secondary-0)/<alpha-value>)',
-          50: 'rgb(var(--color-secondary-50)/<alpha-value>)',
-          100: 'rgb(var(--color-secondary-100)/<alpha-value>)',
-          200: 'rgb(var(--color-secondary-200)/<alpha-value>)',
-          300: 'rgb(var(--color-secondary-300)/<alpha-value>)',
-          400: 'rgb(var(--color-secondary-400)/<alpha-value>)',
-          500: 'rgb(var(--color-secondary-500)/<alpha-value>)',
-          600: 'rgb(var(--color-secondary-600)/<alpha-value>)',
-          700: 'rgb(var(--color-secondary-700)/<alpha-value>)',
-          800: 'rgb(var(--color-secondary-800)/<alpha-value>)',
-          900: 'rgb(var(--color-secondary-900)/<alpha-value>)',
-          950: 'rgb(var(--color-secondary-950)/<alpha-value>)',
+          0: "rgb(var(--color-secondary-0)/<alpha-value>)",
+          50: "rgb(var(--color-secondary-50)/<alpha-value>)",
+          100: "rgb(var(--color-secondary-100)/<alpha-value>)",
+          200: "rgb(var(--color-secondary-200)/<alpha-value>)",
+          300: "rgb(var(--color-secondary-300)/<alpha-value>)",
+          400: "rgb(var(--color-secondary-400)/<alpha-value>)",
+          500: "rgb(var(--color-secondary-500)/<alpha-value>)",
+          600: "rgb(var(--color-secondary-600)/<alpha-value>)",
+          700: "rgb(var(--color-secondary-700)/<alpha-value>)",
+          800: "rgb(var(--color-secondary-800)/<alpha-value>)",
+          900: "rgb(var(--color-secondary-900)/<alpha-value>)",
+          950: "rgb(var(--color-secondary-950)/<alpha-value>)",
         },
         tertiary: {
-          50: 'rgb(var(--color-tertiary-50)/<alpha-value>)',
-          100: 'rgb(var(--color-tertiary-100)/<alpha-value>)',
-          200: 'rgb(var(--color-tertiary-200)/<alpha-value>)',
-          300: 'rgb(var(--color-tertiary-300)/<alpha-value>)',
-          400: 'rgb(var(--color-tertiary-400)/<alpha-value>)',
-          500: 'rgb(var(--color-tertiary-500)/<alpha-value>)',
-          600: 'rgb(var(--color-tertiary-600)/<alpha-value>)',
-          700: 'rgb(var(--color-tertiary-700)/<alpha-value>)',
-          800: 'rgb(var(--color-tertiary-800)/<alpha-value>)',
-          900: 'rgb(var(--color-tertiary-900)/<alpha-value>)',
-          950: 'rgb(var(--color-tertiary-950)/<alpha-value>)',
+          50: "rgb(var(--color-tertiary-50)/<alpha-value>)",
+          100: "rgb(var(--color-tertiary-100)/<alpha-value>)",
+          200: "rgb(var(--color-tertiary-200)/<alpha-value>)",
+          300: "rgb(var(--color-tertiary-300)/<alpha-value>)",
+          400: "rgb(var(--color-tertiary-400)/<alpha-value>)",
+          500: "rgb(var(--color-tertiary-500)/<alpha-value>)",
+          600: "rgb(var(--color-tertiary-600)/<alpha-value>)",
+          700: "rgb(var(--color-tertiary-700)/<alpha-value>)",
+          800: "rgb(var(--color-tertiary-800)/<alpha-value>)",
+          900: "rgb(var(--color-tertiary-900)/<alpha-value>)",
+          950: "rgb(var(--color-tertiary-950)/<alpha-value>)",
         },
         error: {
-          0: 'rgb(var(--color-error-0)/<alpha-value>)',
-          50: 'rgb(var(--color-error-50)/<alpha-value>)',
-          100: 'rgb(var(--color-error-100)/<alpha-value>)',
-          200: 'rgb(var(--color-error-200)/<alpha-value>)',
-          300: 'rgb(var(--color-error-300)/<alpha-value>)',
-          400: 'rgb(var(--color-error-400)/<alpha-value>)',
-          500: 'rgb(var(--color-error-500)/<alpha-value>)',
-          600: 'rgb(var(--color-error-600)/<alpha-value>)',
-          700: 'rgb(var(--color-error-700)/<alpha-value>)',
-          800: 'rgb(var(--color-error-800)/<alpha-value>)',
-          900: 'rgb(var(--color-error-900)/<alpha-value>)',
-          950: 'rgb(var(--color-error-950)/<alpha-value>)',
+          0: "rgb(var(--color-error-0)/<alpha-value>)",
+          50: "rgb(var(--color-error-50)/<alpha-value>)",
+          100: "rgb(var(--color-error-100)/<alpha-value>)",
+          200: "rgb(var(--color-error-200)/<alpha-value>)",
+          300: "rgb(var(--color-error-300)/<alpha-value>)",
+          400: "rgb(var(--color-error-400)/<alpha-value>)",
+          500: "rgb(var(--color-error-500)/<alpha-value>)",
+          600: "rgb(var(--color-error-600)/<alpha-value>)",
+          700: "rgb(var(--color-error-700)/<alpha-value>)",
+          800: "rgb(var(--color-error-800)/<alpha-value>)",
+          900: "rgb(var(--color-error-900)/<alpha-value>)",
+          950: "rgb(var(--color-error-950)/<alpha-value>)",
         },
         success: {
-          0: 'rgb(var(--color-success-0)/<alpha-value>)',
-          50: 'rgb(var(--color-success-50)/<alpha-value>)',
-          100: 'rgb(var(--color-success-100)/<alpha-value>)',
-          200: 'rgb(var(--color-success-200)/<alpha-value>)',
-          300: 'rgb(var(--color-success-300)/<alpha-value>)',
-          400: 'rgb(var(--color-success-400)/<alpha-value>)',
-          500: 'rgb(var(--color-success-500)/<alpha-value>)',
-          600: 'rgb(var(--color-success-600)/<alpha-value>)',
-          700: 'rgb(var(--color-success-700)/<alpha-value>)',
-          800: 'rgb(var(--color-success-800)/<alpha-value>)',
-          900: 'rgb(var(--color-success-900)/<alpha-value>)',
-          950: 'rgb(var(--color-success-950)/<alpha-value>)',
+          0: "rgb(var(--color-success-0)/<alpha-value>)",
+          50: "rgb(var(--color-success-50)/<alpha-value>)",
+          100: "rgb(var(--color-success-100)/<alpha-value>)",
+          200: "rgb(var(--color-success-200)/<alpha-value>)",
+          300: "rgb(var(--color-success-300)/<alpha-value>)",
+          400: "rgb(var(--color-success-400)/<alpha-value>)",
+          500: "rgb(var(--color-success-500)/<alpha-value>)",
+          600: "rgb(var(--color-success-600)/<alpha-value>)",
+          700: "rgb(var(--color-success-700)/<alpha-value>)",
+          800: "rgb(var(--color-success-800)/<alpha-value>)",
+          900: "rgb(var(--color-success-900)/<alpha-value>)",
+          950: "rgb(var(--color-success-950)/<alpha-value>)",
         },
         warning: {
-          0: 'rgb(var(--color-warning-0)/<alpha-value>)',
-          50: 'rgb(var(--color-warning-50)/<alpha-value>)',
-          100: 'rgb(var(--color-warning-100)/<alpha-value>)',
-          200: 'rgb(var(--color-warning-200)/<alpha-value>)',
-          300: 'rgb(var(--color-warning-300)/<alpha-value>)',
-          400: 'rgb(var(--color-warning-400)/<alpha-value>)',
-          500: 'rgb(var(--color-warning-500)/<alpha-value>)',
-          600: 'rgb(var(--color-warning-600)/<alpha-value>)',
-          700: 'rgb(var(--color-warning-700)/<alpha-value>)',
-          800: 'rgb(var(--color-warning-800)/<alpha-value>)',
-          900: 'rgb(var(--color-warning-900)/<alpha-value>)',
-          950: 'rgb(var(--color-warning-950)/<alpha-value>)',
+          0: "rgb(var(--color-warning-0)/<alpha-value>)",
+          50: "rgb(var(--color-warning-50)/<alpha-value>)",
+          100: "rgb(var(--color-warning-100)/<alpha-value>)",
+          200: "rgb(var(--color-warning-200)/<alpha-value>)",
+          300: "rgb(var(--color-warning-300)/<alpha-value>)",
+          400: "rgb(var(--color-warning-400)/<alpha-value>)",
+          500: "rgb(var(--color-warning-500)/<alpha-value>)",
+          600: "rgb(var(--color-warning-600)/<alpha-value>)",
+          700: "rgb(var(--color-warning-700)/<alpha-value>)",
+          800: "rgb(var(--color-warning-800)/<alpha-value>)",
+          900: "rgb(var(--color-warning-900)/<alpha-value>)",
+          950: "rgb(var(--color-warning-950)/<alpha-value>)",
         },
         info: {
-          0: 'rgb(var(--color-info-0)/<alpha-value>)',
-          50: 'rgb(var(--color-info-50)/<alpha-value>)',
-          100: 'rgb(var(--color-info-100)/<alpha-value>)',
-          200: 'rgb(var(--color-info-200)/<alpha-value>)',
-          300: 'rgb(var(--color-info-300)/<alpha-value>)',
-          400: 'rgb(var(--color-info-400)/<alpha-value>)',
-          500: 'rgb(var(--color-info-500)/<alpha-value>)',
-          600: 'rgb(var(--color-info-600)/<alpha-value>)',
-          700: 'rgb(var(--color-info-700)/<alpha-value>)',
-          800: 'rgb(var(--color-info-800)/<alpha-value>)',
-          900: 'rgb(var(--color-info-900)/<alpha-value>)',
-          950: 'rgb(var(--color-info-950)/<alpha-value>)',
+          0: "rgb(var(--color-info-0)/<alpha-value>)",
+          50: "rgb(var(--color-info-50)/<alpha-value>)",
+          100: "rgb(var(--color-info-100)/<alpha-value>)",
+          200: "rgb(var(--color-info-200)/<alpha-value>)",
+          300: "rgb(var(--color-info-300)/<alpha-value>)",
+          400: "rgb(var(--color-info-400)/<alpha-value>)",
+          500: "rgb(var(--color-info-500)/<alpha-value>)",
+          600: "rgb(var(--color-info-600)/<alpha-value>)",
+          700: "rgb(var(--color-info-700)/<alpha-value>)",
+          800: "rgb(var(--color-info-800)/<alpha-value>)",
+          900: "rgb(var(--color-info-900)/<alpha-value>)",
+          950: "rgb(var(--color-info-950)/<alpha-value>)",
         },
         typography: {
-          0: 'rgb(var(--color-typography-0)/<alpha-value>)',
-          50: 'rgb(var(--color-typography-50)/<alpha-value>)',
-          100: 'rgb(var(--color-typography-100)/<alpha-value>)',
-          200: 'rgb(var(--color-typography-200)/<alpha-value>)',
-          300: 'rgb(var(--color-typography-300)/<alpha-value>)',
-          400: 'rgb(var(--color-typography-400)/<alpha-value>)',
-          500: 'rgb(var(--color-typography-500)/<alpha-value>)',
-          600: 'rgb(var(--color-typography-600)/<alpha-value>)',
-          700: 'rgb(var(--color-typography-700)/<alpha-value>)',
-          800: 'rgb(var(--color-typography-800)/<alpha-value>)',
-          900: 'rgb(var(--color-typography-900)/<alpha-value>)',
-          950: 'rgb(var(--color-typography-950)/<alpha-value>)',
-          white: '#FFFFFF',
-          gray: '#D4D4D4',
-          black: '#181718',
+          0: "rgb(var(--color-typography-0)/<alpha-value>)",
+          50: "rgb(var(--color-typography-50)/<alpha-value>)",
+          100: "rgb(var(--color-typography-100)/<alpha-value>)",
+          200: "rgb(var(--color-typography-200)/<alpha-value>)",
+          300: "rgb(var(--color-typography-300)/<alpha-value>)",
+          400: "rgb(var(--color-typography-400)/<alpha-value>)",
+          500: "rgb(var(--color-typography-500)/<alpha-value>)",
+          600: "rgb(var(--color-typography-600)/<alpha-value>)",
+          700: "rgb(var(--color-typography-700)/<alpha-value>)",
+          800: "rgb(var(--color-typography-800)/<alpha-value>)",
+          900: "rgb(var(--color-typography-900)/<alpha-value>)",
+          950: "rgb(var(--color-typography-950)/<alpha-value>)",
+          white: "#FFFFFF",
+          gray: "#D4D4D4",
+          black: "#181718",
         },
         outline: {
-          0: 'rgb(var(--color-outline-0)/<alpha-value>)',
-          50: 'rgb(var(--color-outline-50)/<alpha-value>)',
-          100: 'rgb(var(--color-outline-100)/<alpha-value>)',
-          200: 'rgb(var(--color-outline-200)/<alpha-value>)',
-          300: 'rgb(var(--color-outline-300)/<alpha-value>)',
-          400: 'rgb(var(--color-outline-400)/<alpha-value>)',
-          500: 'rgb(var(--color-outline-500)/<alpha-value>)',
-          600: 'rgb(var(--color-outline-600)/<alpha-value>)',
-          700: 'rgb(var(--color-outline-700)/<alpha-value>)',
-          800: 'rgb(var(--color-outline-800)/<alpha-value>)',
-          900: 'rgb(var(--color-outline-900)/<alpha-value>)',
-          950: 'rgb(var(--color-outline-950)/<alpha-value>)',
+          0: "rgb(var(--color-outline-0)/<alpha-value>)",
+          50: "rgb(var(--color-outline-50)/<alpha-value>)",
+          100: "rgb(var(--color-outline-100)/<alpha-value>)",
+          200: "rgb(var(--color-outline-200)/<alpha-value>)",
+          300: "rgb(var(--color-outline-300)/<alpha-value>)",
+          400: "rgb(var(--color-outline-400)/<alpha-value>)",
+          500: "rgb(var(--color-outline-500)/<alpha-value>)",
+          600: "rgb(var(--color-outline-600)/<alpha-value>)",
+          700: "rgb(var(--color-outline-700)/<alpha-value>)",
+          800: "rgb(var(--color-outline-800)/<alpha-value>)",
+          900: "rgb(var(--color-outline-900)/<alpha-value>)",
+          950: "rgb(var(--color-outline-950)/<alpha-value>)",
         },
         background: {
-          0: 'rgb(var(--color-background-0)/<alpha-value>)',
-          50: 'rgb(var(--color-background-50)/<alpha-value>)',
-          100: 'rgb(var(--color-background-100)/<alpha-value>)',
-          200: 'rgb(var(--color-background-200)/<alpha-value>)',
-          300: 'rgb(var(--color-background-300)/<alpha-value>)',
-          400: 'rgb(var(--color-background-400)/<alpha-value>)',
-          500: 'rgb(var(--color-background-500)/<alpha-value>)',
-          600: 'rgb(var(--color-background-600)/<alpha-value>)',
-          700: 'rgb(var(--color-background-700)/<alpha-value>)',
-          800: 'rgb(var(--color-background-800)/<alpha-value>)',
-          900: 'rgb(var(--color-background-900)/<alpha-value>)',
-          950: 'rgb(var(--color-background-950)/<alpha-value>)',
-          error: 'rgb(var(--color-background-error)/<alpha-value>)',
-          warning: 'rgb(var(--color-background-warning)/<alpha-value>)',
-          muted: 'rgb(var(--color-background-muted)/<alpha-value>)',
-          success: 'rgb(var(--color-background-success)/<alpha-value>)',
-          info: 'rgb(var(--color-background-info)/<alpha-value>)',
-          light: '#FBFBFB',
-          dark: '#181719',
+          0: "rgb(var(--color-background-0)/<alpha-value>)",
+          50: "rgb(var(--color-background-50)/<alpha-value>)",
+          100: "rgb(var(--color-background-100)/<alpha-value>)",
+          200: "rgb(var(--color-background-200)/<alpha-value>)",
+          300: "rgb(var(--color-background-300)/<alpha-value>)",
+          400: "rgb(var(--color-background-400)/<alpha-value>)",
+          500: "rgb(var(--color-background-500)/<alpha-value>)",
+          600: "rgb(var(--color-background-600)/<alpha-value>)",
+          700: "rgb(var(--color-background-700)/<alpha-value>)",
+          800: "rgb(var(--color-background-800)/<alpha-value>)",
+          900: "rgb(var(--color-background-900)/<alpha-value>)",
+          950: "rgb(var(--color-background-950)/<alpha-value>)",
+          error: "rgb(var(--color-background-error)/<alpha-value>)",
+          warning: "rgb(var(--color-background-warning)/<alpha-value>)",
+          muted: "rgb(var(--color-background-muted)/<alpha-value>)",
+          success: "rgb(var(--color-background-success)/<alpha-value>)",
+          info: "rgb(var(--color-background-info)/<alpha-value>)",
+          light: "#FBFBFB",
+          dark: "#181719",
         },
         indicator: {
-          primary: 'rgb(var(--color-indicator-primary)/<alpha-value>)',
-          info: 'rgb(var(--color-indicator-info)/<alpha-value>)',
-          error: 'rgb(var(--color-indicator-error)/<alpha-value>)',
+          primary: "rgb(var(--color-indicator-primary)/<alpha-value>)",
+          info: "rgb(var(--color-indicator-info)/<alpha-value>)",
+          error: "rgb(var(--color-indicator-error)/<alpha-value>)",
         },
       },
       fontFamily: {
         heading: undefined,
         body: undefined,
         mono: undefined,
-        roboto: ['Roboto', 'sans-serif'],
+        roboto: ["Roboto", "sans-serif"],
       },
       fontWeight: {
-        extrablack: '950',
+        extrablack: "950",
       },
       fontSize: {
-        '2xs': '10px',
+        "2xs": "10px",
       },
       boxShadow: {
-        'hard-1': '-2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
-        'hard-2': '0px 3px 10px 0px rgba(38, 38, 38, 0.20)',
-        'hard-3': '2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
-        'hard-4': '0px -3px 10px 0px rgba(38, 38, 38, 0.20)',
-        'hard-5': '0px 2px 10px 0px rgba(38, 38, 38, 0.10)',
-        'soft-1': '0px 0px 10px rgba(38, 38, 38, 0.1)',
-        'soft-2': '0px 0px 20px rgba(38, 38, 38, 0.2)',
-        'soft-3': '0px 0px 30px rgba(38, 38, 38, 0.1)',
-        'soft-4': '0px 0px 40px rgba(38, 38, 38, 0.1)',
+        "hard-1": "-2px 2px 8px 0px rgba(38, 38, 38, 0.20)",
+        "hard-2": "0px 3px 10px 0px rgba(38, 38, 38, 0.20)",
+        "hard-3": "2px 2px 8px 0px rgba(38, 38, 38, 0.20)",
+        "hard-4": "0px -3px 10px 0px rgba(38, 38, 38, 0.20)",
+        "hard-5": "0px 2px 10px 0px rgba(38, 38, 38, 0.10)",
+        "soft-1": "0px 0px 10px rgba(38, 38, 38, 0.1)",
+        "soft-2": "0px 0px 20px rgba(38, 38, 38, 0.2)",
+        "soft-3": "0px 0px 30px rgba(38, 38, 38, 0.1)",
+        "soft-4": "0px 0px 40px rgba(38, 38, 38, 0.1)",
       },
     },
   },