diff --git a/example/next-project/package.json b/example/next-project/package.json
index 9bdbf3dea9..bfd7abd455 100644
--- a/example/next-project/package.json
+++ b/example/next-project/package.json
@@ -21,7 +21,7 @@
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.1",
     "typescript": "5.0.4",
-    "@gluestack-style/react": "latest",
+    "@gluestack-style/react": "^0.1.33",
     "@gluestack-ui/provider": "latest",
     "@gluestack-style/animation-plugin": "latest",
     "@gluestack/ui-next-adapter": "latest",
diff --git a/example/storybook/.ondevice/storybook.requires.js b/example/storybook/.ondevice/storybook.requires.js
index 7efba2feb0..1f00d211eb 100644
--- a/example/storybook/.ondevice/storybook.requires.js
+++ b/example/storybook/.ondevice/storybook.requires.js
@@ -63,7 +63,7 @@ const getStories = () => {
     require('../src/components/Forms/FormControl/FormControl.stories.tsx'),
     require('../src/components/Typography/Heading/Heading.stories.tsx'),
     require('../src/components/Layout/HStack/HStack.stories.tsx'),
-    require('../src/components/MediaAndIcons/Icon/Icons.stories.tsx'),
+    // require('../src/components/MediaAndIcons/Icon/Icons.stories.tsx'),
     require('../src/components/Forms/Input/Input.stories.tsx'),
     require('../src/components/Forms/Link/Link.stories.tsx'),
     require('../src/components/Overlay/Menu/Menu.stories.tsx'),
diff --git a/example/storybook/__tests__/__snapshots__/Box.test.js.snap b/example/storybook/__tests__/__snapshots__/Box.test.js.snap
index 3aef1120e2..1c076c5f00 100644
--- a/example/storybook/__tests__/__snapshots__/Box.test.js.snap
+++ b/example/storybook/__tests__/__snapshots__/Box.test.js.snap
@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
diff --git a/example/storybook/__tests__/__snapshots__/Button.test.js.snap b/example/storybook/__tests__/__snapshots__/Button.test.js.snap
index a86aa14921..8f4057a9cb 100644
--- a/example/storybook/__tests__/__snapshots__/Button.test.js.snap
+++ b/example/storybook/__tests__/__snapshots__/Button.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Button component action negative 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -38,7 +38,7 @@ exports[`Button component action negative 1`] = `
 exports[`Button component action positive 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -73,7 +73,7 @@ exports[`Button component action positive 1`] = `
 exports[`Button component action primary 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -108,7 +108,7 @@ exports[`Button component action primary 1`] = `
 exports[`Button component action secondary 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -143,7 +143,7 @@ exports[`Button component action secondary 1`] = `
 exports[`Button component size lg 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -178,7 +178,7 @@ exports[`Button component size lg 1`] = `
 exports[`Button component size md 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -213,7 +213,7 @@ exports[`Button component size md 1`] = `
 exports[`Button component size sm 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -248,7 +248,7 @@ exports[`Button component size sm 1`] = `
 exports[`Button component size xl 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -283,7 +283,7 @@ exports[`Button component size xl 1`] = `
 exports[`Button component size xs 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -318,7 +318,7 @@ exports[`Button component size xs 1`] = `
 exports[`Button component variant link 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -353,7 +353,7 @@ exports[`Button component variant link 1`] = `
 exports[`Button component variant outline 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -388,7 +388,7 @@ exports[`Button component variant outline 1`] = `
 exports[`Button component variant solid 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
diff --git a/example/storybook/__tests__/__snapshots__/Checkbox.test.js.snap b/example/storybook/__tests__/__snapshots__/Checkbox.test.js.snap
index 6c97a35c1f..ff3fa63f57 100644
--- a/example/storybook/__tests__/__snapshots__/Checkbox.test.js.snap
+++ b/example/storybook/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Checkbox component isDisabled 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -180,7 +180,7 @@ exports[`Checkbox component isDisabled 1`] = `
 exports[`Checkbox component isInvalid 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -356,7 +356,7 @@ exports[`Checkbox component isInvalid 1`] = `
 exports[`Checkbox component isReadOnly 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -534,7 +534,7 @@ exports[`Checkbox component isReadOnly 1`] = `
 exports[`Checkbox component size lg 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -710,7 +710,7 @@ exports[`Checkbox component size lg 1`] = `
 exports[`Checkbox component size md 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -886,7 +886,7 @@ exports[`Checkbox component size md 1`] = `
 exports[`Checkbox component size sm 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
diff --git a/example/storybook/junit.xml b/example/storybook/junit.xml
index 8de05731c4..eb9c03d4a0 100644
--- a/example/storybook/junit.xml
+++ b/example/storybook/junit.xml
@@ -1,47 +1,47 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<testsuites name="jest tests" tests="19" failures="0" errors="0" time="13.454">
-  <testsuite name="undefined" errors="0" failures="0" skipped="0" timestamp="2023-07-20T14:46:22" time="9.921" tests="1">
-    <testcase classname=" renders correctly" name=" renders correctly" time="0.037">
+<testsuites name="jest tests" tests="19" failures="0" errors="0" time="7.566">
+  <testsuite name="undefined" errors="0" failures="0" skipped="0" timestamp="2023-07-24T13:14:09" time="5.36" tests="1">
+    <testcase classname=" renders correctly" name=" renders correctly" time="0.047">
     </testcase>
   </testsuite>
-  <testsuite name="Checkbox component" errors="0" failures="0" skipped="0" timestamp="2023-07-20T14:46:22" time="10.032" tests="6">
-    <testcase classname="Checkbox component size sm" name="Checkbox component size sm" time="0.063">
+  <testsuite name="Checkbox component" errors="0" failures="0" skipped="0" timestamp="2023-07-24T13:14:09" time="5.5" tests="6">
+    <testcase classname="Checkbox component size sm" name="Checkbox component size sm" time="0.083">
     </testcase>
-    <testcase classname="Checkbox component size md" name="Checkbox component size md" time="0.019">
+    <testcase classname="Checkbox component size md" name="Checkbox component size md" time="0.022">
     </testcase>
-    <testcase classname="Checkbox component size lg" name="Checkbox component size lg" time="0.017">
+    <testcase classname="Checkbox component size lg" name="Checkbox component size lg" time="0.023">
     </testcase>
-    <testcase classname="Checkbox component isInvalid" name="Checkbox component isInvalid" time="0.017">
+    <testcase classname="Checkbox component isInvalid" name="Checkbox component isInvalid" time="0.02">
     </testcase>
-    <testcase classname="Checkbox component isDisabled" name="Checkbox component isDisabled" time="0.016">
+    <testcase classname="Checkbox component isDisabled" name="Checkbox component isDisabled" time="0.019">
     </testcase>
-    <testcase classname="Checkbox component isReadOnly" name="Checkbox component isReadOnly" time="0.016">
+    <testcase classname="Checkbox component isReadOnly" name="Checkbox component isReadOnly" time="0.02">
     </testcase>
   </testsuite>
-  <testsuite name="Button component" errors="0" failures="0" skipped="0" timestamp="2023-07-20T14:46:22" time="12.473" tests="12">
-    <testcase classname="Button component action primary" name="Button component action primary" time="0.074">
+  <testsuite name="Button component" errors="0" failures="0" skipped="0" timestamp="2023-07-24T13:14:09" time="6.641" tests="12">
+    <testcase classname="Button component action primary" name="Button component action primary" time="0.057">
     </testcase>
-    <testcase classname="Button component action secondary" name="Button component action secondary" time="0.025">
+    <testcase classname="Button component action secondary" name="Button component action secondary" time="0.007">
     </testcase>
-    <testcase classname="Button component action positive" name="Button component action positive" time="0.016">
+    <testcase classname="Button component action positive" name="Button component action positive" time="0.008">
     </testcase>
-    <testcase classname="Button component action negative" name="Button component action negative" time="0.019">
+    <testcase classname="Button component action negative" name="Button component action negative" time="0.005">
     </testcase>
-    <testcase classname="Button component variant link" name="Button component variant link" time="0.017">
+    <testcase classname="Button component variant link" name="Button component variant link" time="0.004">
     </testcase>
-    <testcase classname="Button component variant outline" name="Button component variant outline" time="0.016">
+    <testcase classname="Button component variant outline" name="Button component variant outline" time="0.006">
     </testcase>
-    <testcase classname="Button component variant solid" name="Button component variant solid" time="0.015">
+    <testcase classname="Button component variant solid" name="Button component variant solid" time="0.004">
     </testcase>
-    <testcase classname="Button component size xs" name="Button component size xs" time="0.009">
+    <testcase classname="Button component size xs" name="Button component size xs" time="0.004">
     </testcase>
-    <testcase classname="Button component size sm" name="Button component size sm" time="0.009">
+    <testcase classname="Button component size sm" name="Button component size sm" time="0.006">
     </testcase>
-    <testcase classname="Button component size md" name="Button component size md" time="0.01">
+    <testcase classname="Button component size md" name="Button component size md" time="0.005">
     </testcase>
-    <testcase classname="Button component size lg" name="Button component size lg" time="0.005">
+    <testcase classname="Button component size lg" name="Button component size lg" time="0.004">
     </testcase>
-    <testcase classname="Button component size xl" name="Button component size xl" time="0.005">
+    <testcase classname="Button component size xl" name="Button component size xl" time="0.006">
     </testcase>
   </testsuite>
 </testsuites>
\ No newline at end of file
diff --git a/example/storybook/package.json b/example/storybook/package.json
index 617858f569..bebe40b5a2 100644
--- a/example/storybook/package.json
+++ b/example/storybook/package.json
@@ -24,7 +24,7 @@
     "@expo/html-elements": "^0.4.2",
     "@gluestack-style/animation-plugin": "latest",
     "@gluestack-style/react": "0.1.34-alpha.1",
-    "@gluestack-ui/actionsheet": "^0.2.11",
+    "@gluestack-ui/actionsheet": "^0.2.12",
     "@gluestack-ui/alert-dialog": "^0.1.11",
     "@gluestack-ui/pressable": "^0.1.9",
     "@gluestack/design-system": "^0.4.28",
diff --git a/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.tsx b/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.tsx
index 76a624b87a..52dbfef491 100644
--- a/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.tsx
+++ b/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.tsx
@@ -32,7 +32,7 @@ function ActionsheetStory({
         <Actionsheet.DragIndicatorWrapper>
           <Actionsheet.DragIndicator />
         </Actionsheet.DragIndicatorWrapper>
-        <Actionsheet.Item onPress={handleClose}>
+        <Actionsheet.Item onPress={handleClose} isDisabled>
           <Actionsheet.ItemText>Delete</Actionsheet.ItemText>
         </Actionsheet.Item>
         <Actionsheet.Item onPress={handleClose}>
diff --git a/example/storybook/src/components/Forms/Select/Select.tsx b/example/storybook/src/components/Forms/Select/Select.tsx
index e621a985ca..c631864911 100644
--- a/example/storybook/src/components/Forms/Select/Select.tsx
+++ b/example/storybook/src/components/Forms/Select/Select.tsx
@@ -4,9 +4,9 @@ import { Center, ChevronDownIcon, Select, Icon } from '../../../ui-components';
 
 const SelectStory = ({ size = 'md', variant = 'outline', ...props }: any) => {
   return (
-    <Select {...props} placeholder="Select option">
+    <Select {...props}>
       <Select.Trigger size={size} variant={variant}>
-        <Select.Input />
+        <Select.Input placeholder="Select option" />
         <Select.Icon
           mr={variant === 'underlined' ? 0 : '$3'}
           ml={variant === 'underlined' ? '$3' : 0}
diff --git a/example/storybook/src/components/Forms/Select/index.stories.mdx b/example/storybook/src/components/Forms/Select/index.stories.mdx
index 55a704ed53..3d783551d0 100644
--- a/example/storybook/src/components/Forms/Select/index.stories.mdx
+++ b/example/storybook/src/components/Forms/Select/index.stories.mdx
@@ -37,18 +37,18 @@ Following is the default implementation of the **Select** component without any
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
-    showArgsController={false}
+    showArgsController={true}
     metaData={{
       code: `
-        <Select placeholder="Select option" >
-          <Select.Trigger>
-            <Select.Input/>
+        <Select>
+          <Select.Trigger {...props}>
+            <Select.Input placeholder="Select option" />
             <Select.Icon mr="$3">
               <Icon as={ChevronDownIcon} />
             </Select.Icon>
           </Select.Trigger>
           <Select.Portal>
-            <Select.Backdrop />
+            <Select.Backdrop/>
             <Select.Content>
               <Select.DragIndicatorWrapper>
                 <Select.DragIndicator />
@@ -81,7 +81,18 @@ Following is the default implementation of the **Select** component without any
         Icon,
         ChevronDownIcon,
       },
-      argsType: {},
+      argsType: {
+        variant: {
+          control: 'select',
+          options: ['rounded', 'outline', 'underlined'],
+          default: 'outline',
+        },
+        size: {
+          control: 'select',
+          options: ['sm', 'md', 'lg', 'xl'],
+          default: 'md',
+        },
+      },
     }}
   />
 </AppProvider>
@@ -129,7 +140,7 @@ export default () => (
         <Select.DragIndicatorWrapper>
           <Select.DragIndicator />
         </Select.DragIndicatorWrapper>
-        <Select.Item label="UX Research" value="ux" />
+        <Select.Item />
       </Select.Content>
     </Select.Portal>
   </Select>
@@ -263,22 +274,6 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
             <Table.TText>{`When true, the select displays a focus state.`}</Table.TText>
           </Table.TD>
         </Table.TR>
-        <Table.TR>
-          <Table.TD>
-            <Table.TText>
-              <InlineCode>placeholder</InlineCode>
-            </Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>string</Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>-</Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>{`It provides the placeholder.`}</Table.TText>
-          </Table.TD>
-        </Table.TR>
         <Table.TR>
           <Table.TD>
             <Table.TText>
@@ -525,7 +520,7 @@ The following are the lists of all the libraries and packages the component reli
 - `@gluestack-ui/utils`
 - `@react-native-aria/focus`
 - `@gluestack-ui/hooks`
-- `@gluestack-ui/form-control
+- `@gluestack-ui/form-control`
 
 ### Examples
 
@@ -547,9 +542,9 @@ The Select component with FormControl example demonstrates how to manage its sta
               Choose your favorite color
             </FormControl.Label.Text>
           </FormControl.Label>
-          <Select placeholder="Select option" >
+          <Select>
             <Select.Trigger>
-              <Select.Input/>
+              <Select.Input placeholder="Select option"/>
               <Select.Icon mr="$3">
                 <Icon as={ChevronDownIcon} />
               </Select.Icon>
diff --git a/example/storybook/src/components/Overlay/Menu/Menu.tsx b/example/storybook/src/components/Overlay/Menu/Menu.tsx
index cf04931dd4..cf90ded2a9 100644
--- a/example/storybook/src/components/Overlay/Menu/Menu.tsx
+++ b/example/storybook/src/components/Overlay/Menu/Menu.tsx
@@ -35,11 +35,11 @@ const MenuStory = ({ placement = 'bottom' }: any) => {
           <Menu.ItemLabel size="sm">Community</Menu.ItemLabel>
         </Menu.Item>
         <Menu.Item key="Plugins" textValue="Plugins">
-          <Icon as={PuzzleIcon} size="sm" mr="$2" />
+          <Icon as={PuzzleIcon} size={16} mr="$2" />
           <Menu.ItemLabel size="sm">Plugins</Menu.ItemLabel>
         </Menu.Item>
         <Menu.Item key="Theme" textValue="Theme">
-          <Icon as={PaintBucket} size="sm" mr="$2" />
+          <Icon as={PaintBucket} size={16} mr="$2" />
           <Menu.ItemLabel size="sm">Theme</Menu.ItemLabel>
         </Menu.Item>
         <Menu.Item key="Settings" textValue="Settings">
diff --git a/example/storybook/src/gluestack-ui.config.ts b/example/storybook/src/gluestack-ui.config.ts
index 7c5df4416c..338d85cb76 100644
--- a/example/storybook/src/gluestack-ui.config.ts
+++ b/example/storybook/src/gluestack-ui.config.ts
@@ -422,7 +422,7 @@ export const config = {
         borderLight950: '#171717',
         backgroundDark0: '#FCFCFC',
         backgroundDark50: '#F5F5F5',
-        backgroundDark100: '#E5E5E5',
+        backgroundDark100: '#F1F1F1',
         backgroundDark200: '#DBDBDB',
         backgroundDark300: '#D4D4D4',
         backgroundDark400: '#A3A3A3',
@@ -434,7 +434,7 @@ export const config = {
         backgroundDark950: '#171717',
         backgroundLight0: '#FCFCFC',
         backgroundLight50: '#F5F5F5',
-        backgroundLight100: '#E5E5E5',
+        backgroundLight100: '#F1F1F1',
         backgroundLight200: '#DBDBDB',
         backgroundLight300: '#D4D4D4',
         backgroundLight400: '#A3A3A3',
diff --git a/example/storybook/src/ui-components/Actionsheet/styled-components/Backdrop.tsx b/example/storybook/src/ui-components/Actionsheet/styled-components/Backdrop.tsx
index b1c0e0bea0..4d8794142c 100644
--- a/example/storybook/src/ui-components/Actionsheet/styled-components/Backdrop.tsx
+++ b/example/storybook/src/ui-components/Actionsheet/styled-components/Backdrop.tsx
@@ -13,7 +13,7 @@ export default styled(
       opacity: 0,
     },
     ':animate': {
-      opacity: 0.3,
+      opacity: 0.5,
     },
     ':exit': {
       opacity: 0,
@@ -23,9 +23,12 @@ export default styled(
     'top': 0,
     'right': 0,
     'bottom': 0,
-    'bg': '$backgroundLight800',
+    'bg': '$backgroundLight950',
     '_dark': {
-      bg: '$backgroundDark800',
+      bg: '$backgroundDark950',
+    },
+    '_web': {
+      cursor: 'default',
     },
   },
   {}
diff --git a/example/storybook/src/ui-components/Actionsheet/styled-components/Content.tsx b/example/storybook/src/ui-components/Actionsheet/styled-components/Content.tsx
index e4c4c8d933..c2a61b1155 100644
--- a/example/storybook/src/ui-components/Actionsheet/styled-components/Content.tsx
+++ b/example/storybook/src/ui-components/Actionsheet/styled-components/Content.tsx
@@ -6,10 +6,10 @@ export default styled(
   Motion.View,
   {
     alignItems: 'center',
-    borderTopLeftRadius: '$2xl',
-    borderTopRightRadius: '$2xl',
-    maxHeight: '80%',
-    px: '$2',
+    borderTopLeftRadius: '$3xl',
+    borderTopRightRadius: '$3xl',
+    maxHeight: '70%',
+    p: '$2',
     bg: '$backgroundLight0',
     _sectionHeaderBackground: {
       bg: '$backgroundLight0',
@@ -23,6 +23,9 @@ export default styled(
     _web: {
       userSelect: 'none',
     },
+    defaultProps: {
+      hardShadow: '5',
+    },
   },
   {
     descendantStyle: ['_sectionHeaderBackground'],
diff --git a/example/storybook/src/ui-components/Actionsheet/styled-components/DragIndicator.tsx b/example/storybook/src/ui-components/Actionsheet/styled-components/DragIndicator.tsx
index ca1e041979..d83094debd 100644
--- a/example/storybook/src/ui-components/Actionsheet/styled-components/DragIndicator.tsx
+++ b/example/storybook/src/ui-components/Actionsheet/styled-components/DragIndicator.tsx
@@ -5,9 +5,9 @@ export default styled(
   View,
   {
     height: '$1',
-    width: '$12',
-    rounded: '$full',
+    width: '$16',
     bg: '$backgroundLight400',
+    rounded: '$full',
     _dark: {
       bg: '$backgroundDark500',
     },
diff --git a/example/storybook/src/ui-components/Actionsheet/styled-components/Icon.tsx b/example/storybook/src/ui-components/Actionsheet/styled-components/Icon.tsx
index 69951df31b..5ef7cdbf35 100644
--- a/example/storybook/src/ui-components/Actionsheet/styled-components/Icon.tsx
+++ b/example/storybook/src/ui-components/Actionsheet/styled-components/Icon.tsx
@@ -5,9 +5,9 @@ import { View } from 'react-native';
 export default styled(
   View,
   {
-    w: 16,
-    h: 16,
-    mx: '$2',
+    w: '$4',
+    h: '$4',
+    mr: '$2',
     _icon: {
       color: '$backgroundLight500',
       _dark: {
diff --git a/example/storybook/src/ui-components/Actionsheet/styled-components/IndicatorWrapper.tsx b/example/storybook/src/ui-components/Actionsheet/styled-components/IndicatorWrapper.tsx
index deb8580b94..aada4bb451 100644
--- a/example/storybook/src/ui-components/Actionsheet/styled-components/IndicatorWrapper.tsx
+++ b/example/storybook/src/ui-components/Actionsheet/styled-components/IndicatorWrapper.tsx
@@ -4,7 +4,7 @@ import { styled } from '../../styled';
 export default styled(
   View,
   {
-    py: '$3',
+    py: '$1',
     w: '100%',
     alignItems: 'center',
   },
diff --git a/example/storybook/src/ui-components/Actionsheet/styled-components/Item.tsx b/example/storybook/src/ui-components/Actionsheet/styled-components/Item.tsx
index 0561e36eaa..1e328bb6a9 100644
--- a/example/storybook/src/ui-components/Actionsheet/styled-components/Item.tsx
+++ b/example/storybook/src/ui-components/Actionsheet/styled-components/Item.tsx
@@ -4,14 +4,19 @@ import { Pressable } from 'react-native';
 export default styled(
   Pressable,
   {
-    'py': '$3',
-    'px': '$3',
+    'p': '$3',
     'flexDirection': 'row',
     'alignItems': 'center',
     'rounded': '$sm',
     'w': '100%',
+
     ':disabled': {
       opacity: 0.4,
+      _web: {
+        // @ts-ignore
+        pointerEvents: 'all !important',
+        cursor: 'not-allowed',
+      },
     },
 
     ':hover': {
diff --git a/example/storybook/src/ui-components/Actionsheet/styled-components/ItemText.tsx b/example/storybook/src/ui-components/Actionsheet/styled-components/ItemText.tsx
index ef7c69cccb..b7598fcc4f 100644
--- a/example/storybook/src/ui-components/Actionsheet/styled-components/ItemText.tsx
+++ b/example/storybook/src/ui-components/Actionsheet/styled-components/ItemText.tsx
@@ -4,9 +4,11 @@ import { styled } from '../../styled';
 export default styled(
   Text,
   {
+    mx: '$2',
     fontSize: '$md',
     fontFamily: '$body',
     fontWeight: '$normal',
+    lineHeight: '$md',
     color: '$textLight800',
     _dark: {
       color: '$textDark100',
diff --git a/example/storybook/src/ui-components/Actionsheet/styled-components/SectionHeaderText.tsx b/example/storybook/src/ui-components/Actionsheet/styled-components/SectionHeaderText.tsx
index 6b73f07a8b..63f7dda90f 100644
--- a/example/storybook/src/ui-components/Actionsheet/styled-components/SectionHeaderText.tsx
+++ b/example/storybook/src/ui-components/Actionsheet/styled-components/SectionHeaderText.tsx
@@ -8,6 +8,7 @@ export default styled(
     fontSize: '$sm',
     fontFamily: '$body',
     fontWeight: '$bold',
+    lineHeight: '$xs',
     textTransform: 'uppercase',
     p: '$3',
     _dark: {
diff --git a/example/storybook/src/ui-components/AlertDialog/styled-components/Backdrop.tsx b/example/storybook/src/ui-components/AlertDialog/styled-components/Backdrop.tsx
index 63484e5e13..f812508ae7 100644
--- a/example/storybook/src/ui-components/AlertDialog/styled-components/Backdrop.tsx
+++ b/example/storybook/src/ui-components/AlertDialog/styled-components/Backdrop.tsx
@@ -13,7 +13,7 @@ export default styled(
       opacity: 0,
     },
     ':animate': {
-      opacity: 0.3,
+      opacity: 0.5,
     },
     ':exit': {
       opacity: 0,
diff --git a/example/storybook/src/ui-components/Icons/index.tsx b/example/storybook/src/ui-components/Icons/index.tsx
index 70200edaca..e24153a054 100644
--- a/example/storybook/src/ui-components/Icons/index.tsx
+++ b/example/storybook/src/ui-components/Icons/index.tsx
@@ -12,24 +12,24 @@ const StyledIcon: any = styled(
     variants: {
       size: {
         xs: {
-          h: 12,
-          w: 12,
+          h: '$3.5',
+          w: '$3.5',
         },
         sm: {
-          h: 16,
-          w: 16,
+          h: '$4',
+          w: '$4',
         },
         md: {
-          h: 18,
-          w: 18,
+          h: '$3.5',
+          w: '$3.5',
         },
         lg: {
-          h: 20,
-          w: 20,
+          h: '$5',
+          w: '$5',
         },
         xl: {
-          h: 24,
-          w: 24,
+          h: '$6',
+          w: '$6',
         },
       },
     },
diff --git a/example/storybook/src/ui-components/Input/styled-components/Root.tsx b/example/storybook/src/ui-components/Input/styled-components/Root.tsx
index f2f62cdff8..687701fa95 100644
--- a/example/storybook/src/ui-components/Input/styled-components/Root.tsx
+++ b/example/storybook/src/ui-components/Input/styled-components/Root.tsx
@@ -64,8 +64,8 @@ export default styled(
             fontSize: '$xl',
           },
           _icon: {
-            h: '$4.5',
-            w: '$4.5',
+            h: '$6',
+            w: '$6',
           },
         },
         lg: {
@@ -74,8 +74,8 @@ export default styled(
             fontSize: '$lg',
           },
           _icon: {
-            h: '$4',
-            w: '$4',
+            h: '$5',
+            w: '$5',
           },
         },
         md: {
@@ -84,8 +84,8 @@ export default styled(
             fontSize: '$md',
           },
           _icon: {
-            h: '$3.5',
-            w: '$3.5',
+            h: '$4',
+            w: '$4',
           },
         },
         sm: {
@@ -94,8 +94,8 @@ export default styled(
             fontSize: '$sm',
           },
           _icon: {
-            h: '$3',
-            w: '$3',
+            h: '$3.5',
+            w: '$3.5',
           },
         },
       },
@@ -127,10 +127,11 @@ export default styled(
               borderBottomColor: '$error700',
             },
             ':focus': {
+              'borderBottomColor': '$error700',
               ':hover': {
-                borderBottomColor: '$primary700',
+                borderBottomColor: '$error700',
                 _web: {
-                  boxShadow: 'inset 0 -1px 0 0 $primary700',
+                  boxShadow: 'inset 0 -1px 0 0 $error700',
                 },
               },
             },
@@ -159,10 +160,11 @@ export default styled(
                 borderBottomColor: '$error400',
               },
               ':focus': {
+                'borderBottomColor': '$error400',
                 ':hover': {
-                  borderBottomColor: '$primary400',
+                  borderBottomColor: '$error400',
                   _web: {
-                    boxShadow: 'inset 0 -1px 0 0 $primary400',
+                    boxShadow: 'inset 0 -1px 0 0 $error400',
                   },
                 },
               },
@@ -200,10 +202,11 @@ export default styled(
               borderColor: '$error700',
             },
             ':focus': {
+              'borderColor': '$error700',
               ':hover': {
-                borderColor: '$primary700',
+                borderColor: '$error700',
                 _web: {
-                  boxShadow: 'inset 0 0 0 1px $primary700',
+                  boxShadow: 'inset 0 0 0 1px $error700',
                 },
               },
             },
@@ -232,10 +235,11 @@ export default styled(
                 borderColor: '$error400',
               },
               ':focus': {
+                'borderColor': '$error400',
                 ':hover': {
-                  borderColor: '$primary400',
+                  borderColor: '$error400',
                   _web: {
-                    boxShadow: 'inset 0 0 0 1px $primary400',
+                    boxShadow: 'inset 0 0 0 1px $error400',
                   },
                 },
               },
@@ -275,10 +279,11 @@ export default styled(
               borderColor: '$error700',
             },
             ':focus': {
+              'borderColor': '$error700',
               ':hover': {
-                borderColor: '$primary700',
+                borderColor: '$error700',
                 _web: {
-                  boxShadow: 'inset 0 0 0 1px $primary700',
+                  boxShadow: 'inset 0 0 0 1px $error700',
                 },
               },
             },
@@ -308,10 +313,11 @@ export default styled(
                 borderColor: '$error400',
               },
               ':focus': {
+                'borderColor': '$error400',
                 ':hover': {
-                  borderColor: '$primary400',
+                  borderColor: '$error400',
                   _web: {
-                    boxShadow: 'inset 0 0 0 1px $primary400',
+                    boxShadow: 'inset 0 0 0 1px $error400',
                   },
                 },
               },
diff --git a/example/storybook/src/ui-components/Menu/styled-components/Backdrop.tsx b/example/storybook/src/ui-components/Menu/styled-components/Backdrop.tsx
index 9a3b86a920..3962ef76a8 100644
--- a/example/storybook/src/ui-components/Menu/styled-components/Backdrop.tsx
+++ b/example/storybook/src/ui-components/Menu/styled-components/Backdrop.tsx
@@ -10,7 +10,7 @@ export const Backdrop = styled(
     left: 0,
     right: 0,
     // use this for when you want to give background colour to backdrop
-    // opacity: 0.6,
+    // opacity: 0.5,
     // bg: '$backgroundLight500',
     _web: {
       cursor: 'default',
diff --git a/example/storybook/src/ui-components/Menu/styled-components/Item.tsx b/example/storybook/src/ui-components/Menu/styled-components/Item.tsx
index 2a542eaac7..1c85066872 100644
--- a/example/storybook/src/ui-components/Menu/styled-components/Item.tsx
+++ b/example/storybook/src/ui-components/Menu/styled-components/Item.tsx
@@ -7,11 +7,11 @@ export const Item = styled(
     'flexDirection': 'row',
     'alignItems': 'center',
     ':hover': {
-      bg: '$backgroundLight50',
+      bg: '$backgroundLight100',
     },
 
     ':active': {
-      bg: '$backgroundLight100',
+      bg: '$backgroundLight200',
     },
 
     ':focus': {
@@ -28,12 +28,15 @@ export const Item = styled(
       },
 
       ':focus': {
-        bg: '$backgroundDark700',
+        bg: '$backgroundDark800',
       },
     },
 
     ':disabled': {
-      opacity: 0.4,
+      'opacity': 0.4,
+      ':focus': {
+        bg: 'transparent',
+      },
     },
   },
   {
diff --git a/example/storybook/src/ui-components/Menu/styled-components/Item.web.tsx b/example/storybook/src/ui-components/Menu/styled-components/Item.web.tsx
index d783653263..62c5be1aec 100644
--- a/example/storybook/src/ui-components/Menu/styled-components/Item.web.tsx
+++ b/example/storybook/src/ui-components/Menu/styled-components/Item.web.tsx
@@ -7,17 +7,25 @@ export const Item = styled(
     'flexDirection': 'row',
     'alignItems': 'center',
     ':hover': {
-      bg: '$backgroundLight50',
+      bg: '$backgroundLight100',
     },
 
     ':disabled': {
-      opacity: 0.4,
+      'opacity': 0.4,
       // @ts-ignore
-      cursor: 'not-allowed',
+      'cursor': 'not-allowed',
+      ':focus': {
+        bg: 'transparent',
+      },
+      '_dark': {
+        ':focus': {
+          bg: 'transparent',
+        },
+      },
     },
 
     ':active': {
-      bg: '$backgroundLight100',
+      bg: '$backgroundLight200',
     },
 
     ':focus': {
@@ -37,7 +45,7 @@ export const Item = styled(
       },
 
       ':focus': {
-        bg: '$backgroundDark700',
+        bg: '$backgroundDark800',
       },
     },
     ':focusVisible': {
diff --git a/example/storybook/src/ui-components/Menu/styled-components/ItemLabel.tsx b/example/storybook/src/ui-components/Menu/styled-components/ItemLabel.tsx
index 6de444c245..27e265c5c9 100644
--- a/example/storybook/src/ui-components/Menu/styled-components/ItemLabel.tsx
+++ b/example/storybook/src/ui-components/Menu/styled-components/ItemLabel.tsx
@@ -4,7 +4,7 @@ import { styled } from '../../styled';
 export const Label = styled(
   Text,
   {
-    color: '$textLight800',
+    color: '$textLight700',
     fontWeight: '$normal',
     fontFamily: '$body',
     fontStyle: 'normal',
@@ -69,7 +69,7 @@ export const Label = styled(
     },
 
     _dark: {
-      color: '$textDark100',
+      color: '$textDark200',
     },
   },
   {
diff --git a/example/storybook/src/ui-components/Menu/styled-components/Root.tsx b/example/storybook/src/ui-components/Menu/styled-components/Root.tsx
index 56c7ee91b7..3733afe06e 100644
--- a/example/storybook/src/ui-components/Menu/styled-components/Root.tsx
+++ b/example/storybook/src/ui-components/Menu/styled-components/Root.tsx
@@ -21,7 +21,7 @@ export const Root = styled(
       stiffness: 250,
       opacity: {
         type: 'timing',
-        duration: 250,
+        duration: 200,
       },
     },
     'minWidth': 200,
diff --git a/example/storybook/src/ui-components/Modal/styled-components/Backdrop.tsx b/example/storybook/src/ui-components/Modal/styled-components/Backdrop.tsx
index 4fdec300bb..09b38f2c9f 100644
--- a/example/storybook/src/ui-components/Modal/styled-components/Backdrop.tsx
+++ b/example/storybook/src/ui-components/Modal/styled-components/Backdrop.tsx
@@ -13,7 +13,7 @@ export default styled(
       opacity: 0,
     },
     ':animate': {
-      opacity: 0.3,
+      opacity: 0.5,
     },
     ':exit': {
       opacity: 0,
diff --git a/example/storybook/src/ui-components/Popover/styled-components/Backdrop.tsx b/example/storybook/src/ui-components/Popover/styled-components/Backdrop.tsx
index 4fdec300bb..09b38f2c9f 100644
--- a/example/storybook/src/ui-components/Popover/styled-components/Backdrop.tsx
+++ b/example/storybook/src/ui-components/Popover/styled-components/Backdrop.tsx
@@ -13,7 +13,7 @@ export default styled(
       opacity: 0,
     },
     ':animate': {
-      opacity: 0.3,
+      opacity: 0.5,
     },
     ':exit': {
       opacity: 0,
diff --git a/example/storybook/src/ui-components/Select/styled-components-actionsheet/Backdrop.tsx b/example/storybook/src/ui-components/Select/styled-components-actionsheet/Backdrop.tsx
index b1c0e0bea0..4d8794142c 100644
--- a/example/storybook/src/ui-components/Select/styled-components-actionsheet/Backdrop.tsx
+++ b/example/storybook/src/ui-components/Select/styled-components-actionsheet/Backdrop.tsx
@@ -13,7 +13,7 @@ export default styled(
       opacity: 0,
     },
     ':animate': {
-      opacity: 0.3,
+      opacity: 0.5,
     },
     ':exit': {
       opacity: 0,
@@ -23,9 +23,12 @@ export default styled(
     'top': 0,
     'right': 0,
     'bottom': 0,
-    'bg': '$backgroundLight800',
+    'bg': '$backgroundLight950',
     '_dark': {
-      bg: '$backgroundDark800',
+      bg: '$backgroundDark950',
+    },
+    '_web': {
+      cursor: 'default',
     },
   },
   {}
diff --git a/example/storybook/src/ui-components/Select/styled-components-actionsheet/Content.tsx b/example/storybook/src/ui-components/Select/styled-components-actionsheet/Content.tsx
index 5167e22fa7..c2a61b1155 100644
--- a/example/storybook/src/ui-components/Select/styled-components-actionsheet/Content.tsx
+++ b/example/storybook/src/ui-components/Select/styled-components-actionsheet/Content.tsx
@@ -6,15 +6,14 @@ export default styled(
   Motion.View,
   {
     alignItems: 'center',
-    rounded: 0,
-    borderTopLeftRadius: '$2xl',
-    borderTopRightRadius: '$2xl',
+    borderTopLeftRadius: '$3xl',
+    borderTopRightRadius: '$3xl',
+    maxHeight: '70%',
+    p: '$2',
     bg: '$backgroundLight0',
     _sectionHeaderBackground: {
       bg: '$backgroundLight0',
     },
-    maxHeight: '80%',
-    px: '$2',
     _dark: {
       bg: '$backgroundDark900',
       _sectionHeaderBackground: {
@@ -24,6 +23,9 @@ export default styled(
     _web: {
       userSelect: 'none',
     },
+    defaultProps: {
+      hardShadow: '5',
+    },
   },
   {
     descendantStyle: ['_sectionHeaderBackground'],
diff --git a/example/storybook/src/ui-components/Select/styled-components-actionsheet/DragIndicator.tsx b/example/storybook/src/ui-components/Select/styled-components-actionsheet/DragIndicator.tsx
index cf9d166aa9..d83094debd 100644
--- a/example/storybook/src/ui-components/Select/styled-components-actionsheet/DragIndicator.tsx
+++ b/example/storybook/src/ui-components/Select/styled-components-actionsheet/DragIndicator.tsx
@@ -5,7 +5,7 @@ export default styled(
   View,
   {
     height: '$1',
-    width: '$12',
+    width: '$16',
     bg: '$backgroundLight400',
     rounded: '$full',
     _dark: {
diff --git a/example/storybook/src/ui-components/Select/styled-components-actionsheet/Icon.tsx b/example/storybook/src/ui-components/Select/styled-components-actionsheet/Icon.tsx
index f56d049172..5ef7cdbf35 100644
--- a/example/storybook/src/ui-components/Select/styled-components-actionsheet/Icon.tsx
+++ b/example/storybook/src/ui-components/Select/styled-components-actionsheet/Icon.tsx
@@ -5,13 +5,13 @@ import { View } from 'react-native';
 export default styled(
   View,
   {
-    w: 16,
-    h: 16,
-    mx: '$2',
+    w: '$4',
+    h: '$4',
+    mr: '$2',
     _icon: {
-      color: '$textLight900',
+      color: '$backgroundLight500',
       _dark: {
-        color: '$textDark50',
+        color: '$backgroundDark400',
       },
     },
   },
diff --git a/example/storybook/src/ui-components/Select/styled-components-actionsheet/IndicatorWrapper.tsx b/example/storybook/src/ui-components/Select/styled-components-actionsheet/IndicatorWrapper.tsx
index 0930c5a1fb..aada4bb451 100644
--- a/example/storybook/src/ui-components/Select/styled-components-actionsheet/IndicatorWrapper.tsx
+++ b/example/storybook/src/ui-components/Select/styled-components-actionsheet/IndicatorWrapper.tsx
@@ -4,8 +4,7 @@ import { styled } from '../../styled';
 export default styled(
   View,
   {
-    py: '$3',
-    mt: -4,
+    py: '$1',
     w: '100%',
     alignItems: 'center',
   },
diff --git a/example/storybook/src/ui-components/Select/styled-components-actionsheet/Item.tsx b/example/storybook/src/ui-components/Select/styled-components-actionsheet/Item.tsx
index e0a0bb68d5..8c154b9f75 100644
--- a/example/storybook/src/ui-components/Select/styled-components-actionsheet/Item.tsx
+++ b/example/storybook/src/ui-components/Select/styled-components-actionsheet/Item.tsx
@@ -4,8 +4,7 @@ import { Pressable } from 'react-native';
 export default styled(
   Pressable,
   {
-    'py': '$3',
-    'px': '$1',
+    'p': '$3',
     'flexDirection': 'row',
     'alignItems': 'center',
     'rounded': '$sm',
@@ -13,14 +12,19 @@ export default styled(
 
     ':disabled': {
       opacity: 0.4,
+      _web: {
+        // @ts-ignore
+        pointerEvents: 'all !important',
+        cursor: 'not-allowed',
+      },
     },
 
     ':hover': {
-      bg: '$backgroundLight50',
+      bg: '$backgroundLight100',
     },
 
     ':active': {
-      bg: '$backgroundLight100',
+      bg: '$backgroundLight200',
     },
 
     ':focus': {
@@ -37,7 +41,7 @@ export default styled(
       },
 
       ':focus': {
-        bg: '$backgroundDark700',
+        bg: '$backgroundDark800',
       },
     },
 
diff --git a/example/storybook/src/ui-components/Select/styled-components-actionsheet/ItemText.tsx b/example/storybook/src/ui-components/Select/styled-components-actionsheet/ItemText.tsx
index d661b1c168..66c47f9ae2 100644
--- a/example/storybook/src/ui-components/Select/styled-components-actionsheet/ItemText.tsx
+++ b/example/storybook/src/ui-components/Select/styled-components-actionsheet/ItemText.tsx
@@ -6,10 +6,12 @@ export default styled(
   {
     mx: '$2',
     fontSize: '$md',
+    fontFamily: '$body',
     fontWeight: '$normal',
-    color: '$textLight800',
+    lineHeight: '$md',
+    color: '$textLight700',
     _dark: {
-      color: '$textDark100',
+      color: '$textDark200',
     },
   },
   { ancestorStyle: ['_text'] }
diff --git a/example/storybook/src/ui-components/Select/styled-components-actionsheet/SectionHeaderText.tsx b/example/storybook/src/ui-components/Select/styled-components-actionsheet/SectionHeaderText.tsx
index e8a0173f48..63f7dda90f 100644
--- a/example/storybook/src/ui-components/Select/styled-components-actionsheet/SectionHeaderText.tsx
+++ b/example/storybook/src/ui-components/Select/styled-components-actionsheet/SectionHeaderText.tsx
@@ -6,7 +6,9 @@ export default styled(
   {
     color: '$textLight500',
     fontSize: '$sm',
+    fontFamily: '$body',
     fontWeight: '$bold',
+    lineHeight: '$xs',
     textTransform: 'uppercase',
     p: '$3',
     _dark: {
diff --git a/example/storybook/src/ui-components/Select/styled-components/Input.tsx b/example/storybook/src/ui-components/Select/styled-components/Input.tsx
index d25cfe8fe8..ca01b521ec 100644
--- a/example/storybook/src/ui-components/Select/styled-components/Input.tsx
+++ b/example/storybook/src/ui-components/Select/styled-components/Input.tsx
@@ -8,14 +8,14 @@ export default styled(
       w: '$full',
     },
     flex: 1,
+    h: '100%',
     color: '$textLight900',
     props: {
-      placeholderTextColor: '$textLight400',
+      placeholderTextColor: '$textLight500',
     },
     _dark: {
       color: '$textDark50',
       props: {
-        color: '$amber100',
         placeholderTextColor: '$textDark400',
       },
     },
diff --git a/example/storybook/src/ui-components/Select/styled-components/Root.tsx b/example/storybook/src/ui-components/Select/styled-components/Root.tsx
index c873bc270c..b69f697976 100644
--- a/example/storybook/src/ui-components/Select/styled-components/Root.tsx
+++ b/example/storybook/src/ui-components/Select/styled-components/Root.tsx
@@ -1,11 +1,4 @@
 import { styled } from '../../styled';
 import { View } from 'react-native';
 
-export default styled(
-  View,
-  {
-    // TODO: style will be changed in review of select
-    // w: '$full',
-  },
-  {}
-);
+export default styled(View, {}, {});
diff --git a/example/storybook/src/ui-components/Select/styled-components/Trigger.tsx b/example/storybook/src/ui-components/Select/styled-components/Trigger.tsx
index 5e6a19841a..8d21eb5459 100644
--- a/example/storybook/src/ui-components/Select/styled-components/Trigger.tsx
+++ b/example/storybook/src/ui-components/Select/styled-components/Trigger.tsx
@@ -33,7 +33,10 @@ export default styled(
     },
 
     '_icon': {
-      color: '$textLight400',
+      color: '$backgroundLight500',
+      _dark: {
+        color: '$backgroundLight500',
+      },
     },
 
     '_dark': {
@@ -59,8 +62,8 @@ export default styled(
             fontSize: '$xl',
           },
           _icon: {
-            h: '$4.5',
-            w: '$4.5',
+            h: '$6',
+            w: '$6',
           },
         },
         lg: {
@@ -69,8 +72,8 @@ export default styled(
             fontSize: '$lg',
           },
           _icon: {
-            h: '$4',
-            w: '$4',
+            h: '$5',
+            w: '$5',
           },
         },
         md: {
@@ -79,8 +82,8 @@ export default styled(
             fontSize: '$md',
           },
           _icon: {
-            h: '$3.5',
-            w: '$3.5',
+            h: '$4',
+            w: '$4',
           },
         },
         sm: {
@@ -89,8 +92,8 @@ export default styled(
             fontSize: '$sm',
           },
           _icon: {
-            h: '$3',
-            w: '$3',
+            h: '$3.5',
+            w: '$3.5',
           },
         },
       },
@@ -112,7 +115,7 @@ export default styled(
               boxShadow: 'inset 0 -1px 0 0 $primary700',
             },
             ':hover': {
-              borderColor: '$primary600',
+              borderColor: '$primary700',
               _web: {
                 boxShadow: 'inset 0 -1px 0 0 $primary600',
               },
@@ -120,26 +123,27 @@ export default styled(
           },
           ':invalid': {
             'borderBottomWidth': 2,
-            'borderBottomColor': '$error600',
+            'borderBottomColor': '$error700',
             '_web': {
-              boxShadow: 'inset 0 -1px 0 0 $error600',
+              boxShadow: 'inset 0 -1px 0 0 $error700',
             },
             ':hover': {
-              borderBottomColor: '$error600',
+              borderBottomColor: '$error700',
             },
             ':focus': {
+              'borderBottomColor': '$error700',
               ':hover': {
-                borderBottomColor: '$primary600',
+                borderBottomColor: '$error700',
                 _web: {
-                  boxShadow: 'inset 0 -1px 0 0 $primary600',
+                  boxShadow: 'inset 0 -1px 0 0 $error700',
                 },
               },
             },
             ':disabled': {
               ':hover': {
-                borderBottomColor: '$error600',
+                borderBottomColor: '$error700',
                 _web: {
-                  boxShadow: 'inset 0 -1px 0 0 $error600',
+                  boxShadow: 'inset 0 -1px 0 0 $error700',
                 },
               },
             },
@@ -160,10 +164,11 @@ export default styled(
                 borderBottomColor: '$error400',
               },
               ':focus': {
+                'borderBottomColor': '$error400',
                 ':hover': {
-                  borderBottomColor: '$primary400',
+                  borderBottomColor: '$error400',
                   _web: {
-                    boxShadow: 'inset 0 -1px 0 0 $primary400',
+                    boxShadow: 'inset 0 -1px 0 0 $error400',
                   },
                 },
               },
@@ -192,33 +197,34 @@ export default styled(
               boxShadow: 'inset 0 0 0 1px $primary700',
             },
             ':hover': {
-              borderColor: '$primary600',
+              borderColor: '$primary700',
               _web: {
                 boxShadow: 'inset 0 0 0 1px $primary600',
               },
             },
           },
           ':invalid': {
-            'borderColor': '$error600',
+            'borderColor': '$error700',
             '_web': {
-              boxShadow: 'inset 0 0 0 1px $error600',
+              boxShadow: 'inset 0 0 0 1px $error700',
             },
             ':hover': {
-              borderColor: '$error600',
+              borderColor: '$error700',
             },
             ':focus': {
+              'borderColor': '$error700',
               ':hover': {
-                borderColor: '$primary600',
+                borderColor: '$error700',
                 _web: {
-                  boxShadow: 'inset 0 0 0 1px $primary600',
+                  boxShadow: 'inset 0 0 0 1px $error700',
                 },
               },
             },
             ':disabled': {
               ':hover': {
-                borderColor: '$error600',
+                borderColor: '$error700',
                 _web: {
-                  boxShadow: 'inset 0 0 0 1px $error600',
+                  boxShadow: 'inset 0 0 0 1px $error700',
                 },
               },
             },
@@ -239,10 +245,11 @@ export default styled(
                 borderColor: '$error400',
               },
               ':focus': {
+                'borderColor': '$error400',
                 ':hover': {
-                  borderColor: '$primary400',
+                  borderColor: '$error400',
                   _web: {
-                    boxShadow: 'inset 0 0 0 1px $primary400',
+                    boxShadow: 'inset 0 0 0 1px $error400',
                   },
                 },
               },
@@ -272,33 +279,34 @@ export default styled(
               boxShadow: 'inset 0 0 0 1px $primary700',
             },
             ':hover': {
-              borderColor: '$primary600',
+              borderColor: '$primary700',
               _web: {
                 boxShadow: 'inset 0 0 0 1px $primary600',
               },
             },
           },
           ':invalid': {
-            'borderColor': '$error600',
+            'borderColor': '$error700',
             '_web': {
-              boxShadow: 'inset 0 0 0 1px $error600',
+              boxShadow: 'inset 0 0 0 1px $error700',
             },
             ':hover': {
-              borderColor: '$error600',
+              borderColor: '$error700',
             },
             ':focus': {
+              'borderColor': '$error700',
               ':hover': {
-                borderColor: '$primary600',
+                borderColor: '$error700',
                 _web: {
-                  boxShadow: 'inset 0 0 0 1px $primary600',
+                  boxShadow: 'inset 0 0 0 1px $error700',
                 },
               },
             },
             ':disabled': {
               ':hover': {
-                borderColor: '$error600',
+                borderColor: '$error700',
                 _web: {
-                  boxShadow: 'inset 0 0 0 1px $error600',
+                  boxShadow: 'inset 0 0 0 1px $error700',
                 },
               },
             },
@@ -320,10 +328,11 @@ export default styled(
                 borderColor: '$error400',
               },
               ':focus': {
+                'borderColor': '$error400',
                 ':hover': {
-                  borderColor: '$primary400',
+                  borderColor: '$error400',
                   _web: {
-                    boxShadow: 'inset 0 0 0 1px $primary400',
+                    boxShadow: 'inset 0 0 0 1px $error400',
                   },
                 },
               },
diff --git a/packages/actionsheet/CHANGELOG.md b/packages/actionsheet/CHANGELOG.md
index f081c5c9ab..ca83491a8b 100644
--- a/packages/actionsheet/CHANGELOG.md
+++ b/packages/actionsheet/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @gluestack-ui/actionsheet
 
+## 0.2.12
+
+### Patch Changes
+
+- placeholder in select and animation speed in actionsheet
+
 ## 0.2.11
 
 ### Patch Changes
diff --git a/packages/actionsheet/package.json b/packages/actionsheet/package.json
index 5c3b92bedb..3624e78eaa 100644
--- a/packages/actionsheet/package.json
+++ b/packages/actionsheet/package.json
@@ -15,7 +15,7 @@
     "ios",
     "nextjs"
   ],
-  "version": "0.2.11",
+  "version": "0.2.12",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",
diff --git a/packages/actionsheet/src/ActionsheetContent.tsx b/packages/actionsheet/src/ActionsheetContent.tsx
index 799c903932..5c902d5e75 100644
--- a/packages/actionsheet/src/ActionsheetContent.tsx
+++ b/packages/actionsheet/src/ActionsheetContent.tsx
@@ -48,7 +48,7 @@ function ActionsheetContent<T>(
 
       const animationDefaultConfig = {
         type: 'timing',
-        duration: 300,
+        duration: 200,
       };
 
       const handleCloseCallback = React.useCallback(handleClose, [
diff --git a/packages/select/CHANGELOG.md b/packages/select/CHANGELOG.md
index 49d3dfa284..7062065d3e 100644
--- a/packages/select/CHANGELOG.md
+++ b/packages/select/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @gluestack-ui/select
 
+## 0.1.13
+
+### Patch Changes
+
+- placeholder in select and animation speed in actionsheet
+
 ## 0.1.12
 
 ### Patch Changes
diff --git a/packages/select/package.json b/packages/select/package.json
index 1de2564bc3..6f1c865b8f 100644
--- a/packages/select/package.json
+++ b/packages/select/package.json
@@ -15,7 +15,7 @@
     "ios",
     "nextjs"
   ],
-  "version": "0.1.12",
+  "version": "0.1.13",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",
diff --git a/packages/select/src/Select.tsx b/packages/select/src/Select.tsx
index a4e66da298..a70ebb409a 100644
--- a/packages/select/src/Select.tsx
+++ b/packages/select/src/Select.tsx
@@ -21,7 +21,6 @@ export const Select = (StyledSelect: any) =>
         selectedLabel: selectedLabel,
         onValueChange,
         defaultValue,
-        placeholder,
         onClose,
         onOpen,
         closeOnOverlayClick,
@@ -29,6 +28,7 @@ export const Select = (StyledSelect: any) =>
       }: any,
       ref?: any
     ) => {
+      const [placeholderState, setPlaceholderState] = React.useState('');
       const [isFocused, setIsFocused] = React.useState(false);
       const { isFocusVisible, focusProps } = useFocusRing();
 
@@ -73,7 +73,8 @@ export const Select = (StyledSelect: any) =>
           value: value,
           label: label,
           setLabel: setLabel,
-          placeholder: placeholder,
+          placeholder: placeholderState,
+          setPlaceholder: setPlaceholderState,
           setFocused: setIsFocused,
           focusProps: focusProps,
         };
@@ -95,21 +96,17 @@ export const Select = (StyledSelect: any) =>
         value,
         setLabel,
         label,
-        placeholder,
         setIsFocused,
         focusProps,
         isRequired,
         inputProps,
         isReadOnly,
+        setPlaceholderState,
+        placeholderState,
       ]);
 
       return (
-        <StyledSelect
-          ref={ref}
-          accessibilityRole="button"
-          focusable={false}
-          {...props}
-        >
+        <StyledSelect ref={ref} focusable={false} {...props}>
           <SelectContext.Provider value={contextValue}>
             {children}
           </SelectContext.Provider>
diff --git a/packages/select/src/SelectInput.tsx b/packages/select/src/SelectInput.tsx
index c37fb650d8..f656709a4b 100644
--- a/packages/select/src/SelectInput.tsx
+++ b/packages/select/src/SelectInput.tsx
@@ -1,11 +1,15 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect } from 'react';
 import { SelectContext } from './SelectContext';
 
 export const SelectInput = (StyledSelectInput: any) =>
   forwardRef(({ placeholder: placeholderProp, ...props }: any, ref?: any) => {
-    const { setValue, value, label, isDisabled, placeholder } =
+    const { setValue, value, label, isDisabled, placeholder, setPlaceholder } =
       React.useContext(SelectContext);
 
+    useEffect(() => {
+      setPlaceholder && setPlaceholder(placeholderProp);
+    }, [placeholderProp, setPlaceholder]);
+
     return (
       <StyledSelectInput
         ref={ref}
@@ -17,7 +21,7 @@ export const SelectInput = (StyledSelectInput: any) =>
         editable={false}
         focusable={false}
         importantForAccessibility="no"
-        placeholder={placeholderProp ?? placeholder ?? ''}
+        placeholder={placeholder}
         value={label ? label : value ? value : ''}
         pointerEvents="none"
         onChangeText={(text: string) => setValue(text)}
diff --git a/packages/select/src/SelectPortal.tsx b/packages/select/src/SelectPortal.tsx
index c095d5752f..98c507557d 100644
--- a/packages/select/src/SelectPortal.tsx
+++ b/packages/select/src/SelectPortal.tsx
@@ -50,6 +50,7 @@ export const SelectPortal = (StyledSelectPortal: any) =>
               isReadOnly,
               setFocused,
               onValueChange,
+              placeholder,
               ...portalProps,
             }}
           >
diff --git a/yarn.lock b/yarn.lock
index 879fe87615..9b6b04dbc9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2382,7 +2382,7 @@
     "@babel/traverse" "^7.20.5"
     lodash.merge "^4.6.2"
 
-"@gluestack-style/react@0.1.34-alpha.1", "@gluestack-style/react@latest":
+"@gluestack-style/react@0.1.34-alpha.1":
   version "0.1.34-alpha.1"
   resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-0.1.34-alpha.1.tgz#cbe4cd0669d1bf20e74c28f3aa5454bdd8055f3b"
   integrity sha512-bol721NWD5vpIfjiIgVWRFG/eO7UjerQLYnuBHqDWhwL0GHhfGWF3VLOLvPO/yLUP90SFlNvjDno8fO53MWN1Q==
@@ -2390,7 +2390,7 @@
     inline-style-prefixer "^6.0.1"
     normalize-css-color "^1.0.2"
 
-"@gluestack-style/react@^0.1.28":
+"@gluestack-style/react@^0.1.28", "@gluestack-style/react@^0.1.33":
   version "0.1.33"
   resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-0.1.33.tgz#cd18f38bf359527e4f79d223bb07e9024f40ba4f"
   integrity sha512-wBdoOA3i/cp0EcgJnwJgL1a8BATjbX/pCZgWm31N6sZOgCB4Phq7m0bDjfSpeJ8sKpOEDlUP5wYCo7Yww0mbqA==