diff --git a/example/storybook/stories/components/composites/Actionsheet/Icon.tsx b/example/storybook/stories/components/composites/Actionsheet/Icon.tsx
index 7ede85c57..ce1450555 100644
--- a/example/storybook/stories/components/composites/Actionsheet/Icon.tsx
+++ b/example/storybook/stories/components/composites/Actionsheet/Icon.tsx
@@ -24,68 +24,28 @@ export function Example() {
             </Text>
           </Box>
           <Actionsheet.Item
-            startIcon={
-              <Icon
-                as={MaterialIcons}
-                color="trueGray.400"
-                mr="1"
-                size="6"
-                name="delete"
-              />
-            }
+            startIcon={<Icon as={MaterialIcons} size="6" name="delete" />}
           >
             Delete
           </Actionsheet.Item>
           <Actionsheet.Item
-            startIcon={
-              <Icon
-                as={MaterialIcons}
-                name="share"
-                color="trueGray.400"
-                mr="1"
-                size="6"
-              />
-            }
+            startIcon={<Icon as={MaterialIcons} name="share" size="6" />}
           >
             Share
           </Actionsheet.Item>
           <Actionsheet.Item
-            startIcon={
-              <Icon
-                as={Ionicons}
-                name="play-circle"
-                color="trueGray.400"
-                mr="1"
-                size="6"
-              />
-            }
+            startIcon={<Icon as={Ionicons} name="play-circle" size="6" />}
           >
             Play
           </Actionsheet.Item>
           <Actionsheet.Item
-            startIcon={
-              <Icon
-                as={MaterialIcons}
-                color="trueGray.400"
-                mr="1"
-                size="6"
-                name="favorite"
-              />
-            }
+            startIcon={<Icon as={MaterialIcons} size="6" name="favorite" />}
           >
             Favourite
           </Actionsheet.Item>
           <Actionsheet.Item
-            p={3}
             startIcon={
-              <Icon
-                color="trueGray.400"
-                mr="1"
-                h="24"
-                w="24"
-                viewBox="0 0 24 24"
-                fill="none"
-              >
+              <Icon viewBox="0 0 24 24" size="6" fill="none">
                 <Path d="M12.0007 10.5862L16.9507 5.63623L18.3647 7.05023L13.4147 12.0002L18.3647 16.9502L16.9507 18.3642L12.0007 13.4142L7.05072 18.3642L5.63672 16.9502L10.5867 12.0002L5.63672 7.05023L7.05072 5.63623L12.0007 10.5862Z" />
               </Icon>
             }
diff --git a/example/storybook/stories/components/composites/Actionsheet/Usage.tsx b/example/storybook/stories/components/composites/Actionsheet/Usage.tsx
index cef175086..8c85ab566 100644
--- a/example/storybook/stories/components/composites/Actionsheet/Usage.tsx
+++ b/example/storybook/stories/components/composites/Actionsheet/Usage.tsx
@@ -21,7 +21,7 @@ export function Example() {
             </Text>
           </Box>
           <Actionsheet.Item>Delete</Actionsheet.Item>
-          <Actionsheet.Item>Share</Actionsheet.Item>
+          <Actionsheet.Item isDisabled>Share</Actionsheet.Item>
           <Actionsheet.Item>Play</Actionsheet.Item>
           <Actionsheet.Item>Favourite</Actionsheet.Item>
           <Actionsheet.Item>Cancel</Actionsheet.Item>
diff --git a/package.json b/package.json
index 1170ad83e..ebe8165ae 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.0-rc.7",
+  "version": "3.4.0-rc.10",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",
diff --git a/src/components/composites/Actionsheet/ActionsheetItem.tsx b/src/components/composites/Actionsheet/ActionsheetItem.tsx
index 0b3106918..5c2240272 100644
--- a/src/components/composites/Actionsheet/ActionsheetItem.tsx
+++ b/src/components/composites/Actionsheet/ActionsheetItem.tsx
@@ -1,24 +1,99 @@
 import React, { memo, forwardRef } from 'react';
-import { Button } from '../../primitives/Button';
-import type { IActionsheetItemProps } from './types';
+import { Pressable } from '../../primitives/Pressable';
+import Box from '../../primitives/Box';
+import { HStack } from '../../primitives/Stack';
+import Spinner from '../../primitives/Spinner';
 import { usePropsResolution } from '../../../hooks';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import type { IActionsheetItemProps } from './types';
 
-const ActionsheetItem = (props: IActionsheetItemProps, ref?: any) => {
-  const resolvedProps = usePropsResolution(
-    'ActionsheetItem',
-    props,
-    undefined,
-    {
-      cascadePseudoProps: true,
-    }
-  );
+const ActionsheetItem = (
+  {
+    //@ts-ignore
+    children,
+    startIcon,
+    rightIcon,
+    leftIcon,
+    endIcon,
+    spinner,
+    isDisabled,
+    isLoading,
+    spinnerPlacement = 'start',
+    ...props
+  }: IActionsheetItemProps,
+  ref: any
+) => {
+  const {
+    _text,
+    _stack,
+    _icon,
+    _spinner,
+    isLoadingText,
+    ...resolvedProps
+  } = usePropsResolution('ActionsheetItem', props, undefined, {
+    cascadePseudoProps: true,
+  });
   //TODO: refactor for responsive prop
   if (useHasResponsiveProps(props)) {
     return null;
   }
 
-  return <Button {...resolvedProps} ref={ref} />;
+  if (leftIcon) {
+    startIcon = leftIcon;
+  }
+  if (rightIcon) {
+    endIcon = rightIcon;
+  }
+  if (endIcon && React.isValidElement(endIcon)) {
+    endIcon = React.Children.map(
+      endIcon,
+      (child: JSX.Element, index: number) => {
+        return React.cloneElement(child, {
+          key: `button-end-icon-${index}`,
+          ..._icon,
+          ...child.props,
+        });
+      }
+    );
+  }
+  if (startIcon && React.isValidElement(startIcon)) {
+    startIcon = React.Children.map(
+      startIcon,
+      (child: JSX.Element, index: number) => {
+        return React.cloneElement(child, {
+          key: `button-start-icon-${index}`,
+          ..._icon,
+          ...child.props,
+        });
+      }
+    );
+  }
+  const spinnerElement = spinner ? (
+    spinner
+  ) : (
+    <Spinner color={_text?.color} {..._spinner} />
+  );
+
+  const boxChildren = (child: any) => {
+    return child ? <Box _text={_text}>{child}</Box> : null;
+  };
+
+  return (
+    <Pressable disabled={isDisabled || isLoading} {...resolvedProps} ref={ref}>
+      <HStack {..._stack} test={true}>
+        {startIcon && !isLoading ? startIcon : null}
+        {isLoading && spinnerPlacement === 'start' ? spinnerElement : null}
+        {isLoading
+          ? isLoadingText
+            ? boxChildren(isLoadingText)
+            : null
+          : boxChildren(children)}
+
+        {endIcon && !isLoading ? endIcon : null}
+        {isLoading && spinnerPlacement === 'end' ? spinnerElement : null}
+      </HStack>
+    </Pressable>
+  );
 };
 
 export default memo(forwardRef(ActionsheetItem));
diff --git a/src/components/composites/Actionsheet/types.tsx b/src/components/composites/Actionsheet/types.tsx
index ebf0ea912..0a55333cd 100644
--- a/src/components/composites/Actionsheet/types.tsx
+++ b/src/components/composites/Actionsheet/types.tsx
@@ -48,7 +48,8 @@ export interface IActionsheetFooterProps
   extends InterfaceBoxProps<IActionsheetFooterProps> {}
 export interface IActionsheetHeaderProps
   extends InterfaceBoxProps<IActionsheetHeaderProps> {}
-export interface IActionsheetItemProps extends InterfaceButtonProps {}
+export interface IActionsheetItemProps
+  extends Omit<InterfaceButtonProps, 'variant' | 'size' | 'colorScheme'> {}
 
 export type IActionsheetComponentType = ((
   props: IActionsheetProps & { ref?: MutableRefObject<any> }
diff --git a/src/components/primitives/index.ts b/src/components/primitives/index.ts
index f33ba3feb..9033f9bf9 100644
--- a/src/components/primitives/index.ts
+++ b/src/components/primitives/index.ts
@@ -68,4 +68,6 @@ export { VisuallyHidden } from './VisuallyHidden';
 export { default as ZStack } from './ZStack';
 export type { IZStackProps } from './ZStack';
 
-export { Overlay, IOverlayProps } from './Overlay';
+export { Overlay } from './Overlay';
+
+export type { IOverlayProps } from './Overlay';
diff --git a/src/hooks/useThemeProps/usePropsResolution.tsx b/src/hooks/useThemeProps/usePropsResolution.tsx
index 0ec7972d7..c1b245b56 100644
--- a/src/hooks/useThemeProps/usePropsResolution.tsx
+++ b/src/hooks/useThemeProps/usePropsResolution.tsx
@@ -342,7 +342,9 @@ export const usePropsResolutionWithComponentTheme = (
       'background: #4b5563; color: #FFF; font-weight: 700; padding: 2px 8px;'
     );
   }
-  let [flattenProps, specificityMap] = callPropsFlattener(
+  //TODO: hack
+  let flattenProps: any, specificityMap;
+  [flattenProps, specificityMap] = callPropsFlattener(
     incomingWithDefaultProps,
     {},
     2
diff --git a/src/theme/components/actionsheet.ts b/src/theme/components/actionsheet.ts
index 6891c0db7..f350a4b02 100644
--- a/src/theme/components/actionsheet.ts
+++ b/src/theme/components/actionsheet.ts
@@ -50,13 +50,22 @@ export const ActionsheetItem = {
   baseStyle: () => ({
     width: '100%',
     justifyContent: 'flex-start',
+    _stack: {
+      space: 4,
+    },
     p: 4,
     _text: {
-      fontSize: 16,
+      fontSize: 'md',
       fontWeight: 'normal',
     },
+    _disabled: {
+      opacity: 40,
+    },
     _light: {
       bg: 'muted.50',
+      _icon: {
+        color: 'muted.500',
+      },
       _text: {
         color: 'text.900',
       },
@@ -77,6 +86,9 @@ export const ActionsheetItem = {
     },
     _dark: {
       bg: 'muted.800',
+      _icon: {
+        color: 'muted.400',
+      },
       _text: {
         color: 'muted.50',
       },
@@ -95,7 +107,4 @@ export const ActionsheetItem = {
       },
     },
   }),
-  defaultProps: {
-    variant: 'unstyled',
-  },
 };