diff --git a/example/storybook/stories/components/Wrapper.tsx b/example/storybook/stories/components/Wrapper.tsx
index a6dd265fe..bc318cefe 100644
--- a/example/storybook/stories/components/Wrapper.tsx
+++ b/example/storybook/stories/components/Wrapper.tsx
@@ -22,6 +22,11 @@ const myTheme = extendTheme({
   space: {
     mySpace: '29px',
   },
+  colors: {
+    blue1: {
+      '100': 'blue',
+    },
+  },
 
   components: {
     Link: {
diff --git a/example/storybook/stories/components/primitives/ButtonGroup/variants.tsx b/example/storybook/stories/components/primitives/ButtonGroup/variants.tsx
index 14bf122f8..504613c10 100644
--- a/example/storybook/stories/components/primitives/ButtonGroup/variants.tsx
+++ b/example/storybook/stories/components/primitives/ButtonGroup/variants.tsx
@@ -12,7 +12,6 @@ export const Example = () => {
         justifyContent="center"
       >
         {/* Solid */}
-
         <Heading size="md">Solid</Heading>
         <Button.Group variant="solid" mb="2.5" mt="1.5">
           <Button colorScheme="teal">Save</Button>
@@ -21,9 +20,17 @@ export const Example = () => {
 
         <Divider />
 
-        <Heading size="md">Outline</Heading>
+        {/* Subtle */}
+        <Heading size="md">Subtle</Heading>
+        <Button.Group mb="2.5" mt="1.5" variant="subtle">
+          <Button colorScheme="teal">Save</Button>
+          <Button colorScheme="danger">Cancel</Button>
+        </Button.Group>
+
+        <Divider />
 
         {/* Outline */}
+        <Heading size="md">Outline</Heading>
         <Button.Group mb="2.5" mt="1.5" variant="outline">
           <Button colorScheme="teal">Save</Button>
           <Button colorScheme="danger">Cancel</Button>
@@ -31,9 +38,8 @@ export const Example = () => {
 
         <Divider />
 
-        <Heading size="md">Link</Heading>
-
         {/* Link */}
+        <Heading size="md">Link</Heading>
         <Button.Group mb="2.5" mt="1.5" variant="link">
           <Button colorScheme="teal">Save</Button>
           <Button colorScheme="danger">Cancel</Button>
@@ -41,9 +47,8 @@ export const Example = () => {
 
         <Divider />
 
-        <Heading size="md">Ghost</Heading>
-
         {/* Ghost */}
+        <Heading size="md">Ghost</Heading>
         <Button.Group mb="2.5" mt="1.5" variant="ghost">
           <Button colorScheme="teal">Save</Button>
           <Button colorScheme="danger">Cancel</Button>
@@ -51,9 +56,8 @@ export const Example = () => {
 
         <Divider />
 
-        <Heading size="md">Unstyled</Heading>
-
         {/* Unstyled */}
+        <Heading size="md">Unstyled</Heading>
         <Button.Group mb="2.5" mt="1.5" variant="unstyled">
           <Button colorScheme="teal">Save</Button>
           <Button colorScheme="danger">Cancel</Button>
diff --git a/package.json b/package.json
index 962553da5..4d2ddd9ab 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.0-rc.3",
+  "version": "3.4.0-rc.4",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",
diff --git a/src/components/composites/Alert/types.tsx b/src/components/composites/Alert/types.tsx
index 6f31ee5b3..2b7749366 100644
--- a/src/components/composites/Alert/types.tsx
+++ b/src/components/composites/Alert/types.tsx
@@ -1,7 +1,7 @@
 import type { MutableRefObject } from 'react';
 import type { InterfaceBoxProps } from '../../../components/primitives/Box';
 import type { IIconProps } from '../../primitives';
-import type { CustomProps, VariantType } from '../../types';
+import type { ColorSchemeType, CustomProps, VariantType } from '../../types';
 
 export interface InterfaceAlertProps extends InterfaceBoxProps<IAlertProps> {
   /** The status of the alert
@@ -15,7 +15,7 @@ export interface InterfaceAlertProps extends InterfaceBoxProps<IAlertProps> {
 
   /** The colorScheme of the Alert.
    */
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
 }
 export type IAlertContext = {
   status?: string;
diff --git a/src/components/composites/AppBar/types.tsx b/src/components/composites/AppBar/types.tsx
index 596c3bb5b..664a3615b 100644
--- a/src/components/composites/AppBar/types.tsx
+++ b/src/components/composites/AppBar/types.tsx
@@ -1,7 +1,8 @@
+import type { ColorSchemeType } from '../../../components/types';
 import type { InterfaceStackProps } from '../../primitives/Stack/Stack';
 
 export type IAppBarProps = InterfaceStackProps & {
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   statusBarHeight?: number;
   space?: number;
 };
diff --git a/src/components/composites/Badge/types.tsx b/src/components/composites/Badge/types.tsx
index 94f3d0d2f..98f086a84 100644
--- a/src/components/composites/Badge/types.tsx
+++ b/src/components/composites/Badge/types.tsx
@@ -2,6 +2,7 @@ import type { ITextProps } from '../../primitives/Text/types';
 import type { IIconProps } from '../../primitives/Icon';
 import type { CustomProps, VariantType } from '../../types';
 import type { InterfaceBoxProps } from '../../primitives/Box';
+import type { ColorSchemeType } from '../../../components/types';
 
 export interface InterfaceBadgeProps extends InterfaceBoxProps<IBadgeProps> {
   /**
@@ -12,7 +13,7 @@ export interface InterfaceBadgeProps extends InterfaceBoxProps<IBadgeProps> {
   /**
    * The color scheme to use for the badge. Must be a key in theme.colors.
    */
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   /**
    * The right icon element to use in the button.
    */
diff --git a/src/components/composites/CircularProgress/types.ts b/src/components/composites/CircularProgress/types.ts
index c6bacc346..e890b4dea 100644
--- a/src/components/composites/CircularProgress/types.ts
+++ b/src/components/composites/CircularProgress/types.ts
@@ -4,6 +4,7 @@ import type { CustomProps, ResponsiveValue } from '../../../components/types';
 import type { ISizes } from '../../../theme/base/sizes';
 import type { IColors } from '../../../theme/base/colors';
 import type { InterfaceBoxProps } from '../../../components/primitives/Box/types';
+import type { ColorSchemeType } from '../../../components/types';
 
 export type InterfaceCircularProgressProps = InterfaceBoxProps<ICircularProgressProps> & {
   style?: ViewStyle;
@@ -11,7 +12,7 @@ export type InterfaceCircularProgressProps = InterfaceBoxProps<ICircularProgress
   value: number;
   size?: ResponsiveValue<ISizes | (string & {}) | number>;
   thickness?: number;
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   color?: ResponsiveValue<IColors | (string & {})>;
   trackColor?: ResponsiveValue<IColors | (string & {})>;
   isIndeterminate?: boolean;
diff --git a/src/components/composites/Code/types.ts b/src/components/composites/Code/types.ts
index 666d614f2..41a1c0523 100644
--- a/src/components/composites/Code/types.ts
+++ b/src/components/composites/Code/types.ts
@@ -1,8 +1,9 @@
 import type { CustomProps } from '../../../components/types/utils';
 import type { InterfaceBoxProps } from '../../primitives/Box';
+import type { ColorSchemeType } from '../../../components/types';
 
 export type InterfaceCodeProps = InterfaceBoxProps<ICodeProps> & {
-  colorScheme?: string | undefined;
+  colorScheme?: ColorSchemeType;
 };
 
 export type ICodeProps = InterfaceCodeProps & CustomProps<'Code'>;
diff --git a/src/components/composites/IconButton/types.ts b/src/components/composites/IconButton/types.ts
index e9cdd61fa..c62b8db88 100644
--- a/src/components/composites/IconButton/types.ts
+++ b/src/components/composites/IconButton/types.ts
@@ -1,5 +1,7 @@
 import type { InterfacePressableProps } from '../../primitives/Pressable/types';
 import type { IIconProps } from '../../primitives/Icon';
+import type { ColorSchemeType } from '../../../components/types';
+
 import type { CustomProps, VariantType } from '../../types';
 import type { ThemeComponentSizeType } from '../../../components/types/utils';
 export interface InterfaceIconButtonProps
@@ -25,7 +27,7 @@ export interface InterfaceIconButtonProps
    * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
    * @default 'primary'
    */
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   /**
    * The variant of the button style to use.
    * @default 'ghost'
diff --git a/src/components/composites/Popover/Popover.tsx b/src/components/composites/Popover/Popover.tsx
index dc1c2e6b3..4ecd9d811 100644
--- a/src/components/composites/Popover/Popover.tsx
+++ b/src/components/composites/Popover/Popover.tsx
@@ -95,6 +95,7 @@ const Popover = (
                 bodyMounted,
                 setBodyMounted,
                 setHeaderMounted,
+                isOpen,
               }}
             >
               <FocusScope contain={trapFocus} restoreFocus autoFocus>
diff --git a/src/components/composites/Popover/PopoverContent.tsx b/src/components/composites/Popover/PopoverContent.tsx
index 0fc76a302..722507ff6 100644
--- a/src/components/composites/Popover/PopoverContent.tsx
+++ b/src/components/composites/Popover/PopoverContent.tsx
@@ -21,6 +21,7 @@ export const PopoverContent = React.forwardRef(
       bodyMounted,
       bodyId,
       headerId,
+      isOpen,
     } = React.useContext(PopoverContext);
     const resolvedProps = usePropsResolution('PopoverContent', props);
 
@@ -81,6 +82,7 @@ export const PopoverContent = React.forwardRef(
         {...accessibilityProps}
         {...resolvedProps}
         ref={ref}
+        isOpen={isOpen}
       >
         {arrowElement}
         {restChildren}
diff --git a/src/components/composites/Popover/PopoverContext.ts b/src/components/composites/Popover/PopoverContext.ts
index dc7b5de0a..fe400259b 100644
--- a/src/components/composites/Popover/PopoverContext.ts
+++ b/src/components/composites/Popover/PopoverContext.ts
@@ -11,4 +11,5 @@ export const PopoverContext = React.createContext({
   setBodyMounted: (() => {}) as any,
   headerMounted: false,
   bodyMounted: false,
+  isOpen: false,
 });
diff --git a/src/components/composites/Popper/Popper.tsx b/src/components/composites/Popper/Popper.tsx
index b498d8b81..3f6d31fc2 100644
--- a/src/components/composites/Popper/Popper.tsx
+++ b/src/components/composites/Popper/Popper.tsx
@@ -40,7 +40,7 @@ const Popper = (
 };
 
 const PopperContent = React.forwardRef(
-  ({ children, style, ...rest }: IBoxProps, ref: any) => {
+  ({ children, style, ...rest }: IBoxProps & { isOpen: boolean }, ref: any) => {
     const {
       triggerRef,
       shouldFlip,
@@ -52,6 +52,7 @@ const PopperContent = React.forwardRef(
       setOverlayRef,
     } = usePopperContext('PopperContent');
     const overlayRef = React.useRef(null);
+
     // const { top } = useSafeAreaInsets();
     const {
       overlayProps,
@@ -63,7 +64,7 @@ const PopperContent = React.forwardRef(
       overlayRef,
       shouldFlip: shouldFlip,
       crossOffset: crossOffset,
-      isOpen: true,
+      isOpen: rest.isOpen,
       offset: offset,
       placement: placementProp as any,
       containerPadding: 0,
diff --git a/src/components/composites/Progress/index.tsx b/src/components/composites/Progress/index.tsx
index b6dadb36f..5b5997f3e 100644
--- a/src/components/composites/Progress/index.tsx
+++ b/src/components/composites/Progress/index.tsx
@@ -3,6 +3,7 @@ import { Box } from '../../primitives';
 import type { InterfaceBoxProps } from '../../primitives/Box';
 import { usePropsResolution } from '../../../hooks/useThemeProps';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import type { ColorSchemeType } from '../../../components/types';
 import type {
   CustomProps,
   ThemeComponentSizeType,
@@ -25,7 +26,7 @@ export interface InterfaceProgressProps
    * The color scheme of the progress. This should be one of the color keys in the theme (e.g."green", "red").
    * @default primary
    */
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   // /**
   //  * Whether progress is indeterminate
   //  * @default false
diff --git a/src/components/composites/Tabs/types.tsx b/src/components/composites/Tabs/types.tsx
index aa67faec4..06b57faeb 100644
--- a/src/components/composites/Tabs/types.tsx
+++ b/src/components/composites/Tabs/types.tsx
@@ -2,11 +2,12 @@ import type { RefObject } from 'react';
 import type { ViewProps } from 'react-native';
 import type { InterfaceBoxProps } from '../../primitives/Box';
 import type { InterfaceIconProps } from '../../primitives/Icon/types';
+import type { ColorSchemeType } from '../../../components/types';
 
 export type ITabsProps = InterfaceBoxProps<ITabsProps> & {
   align?: 'center' | 'end' | 'start';
   id?: string;
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   index?: number;
   defaultIndex?: number;
   isFitted?: boolean;
diff --git a/src/components/composites/Tag/types.ts b/src/components/composites/Tag/types.ts
index e3f27bc5f..6c1e75e39 100644
--- a/src/components/composites/Tag/types.ts
+++ b/src/components/composites/Tag/types.ts
@@ -1,9 +1,10 @@
 import type { CustomProps } from '../../../components/types';
 import type { InterfaceBoxProps } from '../../primitives/Box';
+import type { ColorSchemeType } from '../../../components/types';
 
 export interface InterfaceTagProps extends InterfaceBoxProps<ITagProps> {
   variant?: 'solid' | 'subtle' | 'outline';
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   size?: string | number;
 }
 
diff --git a/src/components/primitives/Button/Button.tsx b/src/components/primitives/Button/Button.tsx
index 7c971327a..705efd051 100644
--- a/src/components/primitives/Button/Button.tsx
+++ b/src/components/primitives/Button/Button.tsx
@@ -104,7 +104,7 @@ const Button = (
   );
 
   const boxChildren = (child: any) => {
-    return <Box _text={_text}>{child}</Box>;
+    return child ? <Box _text={_text}>{child}</Box> : null;
   };
 
   return (
diff --git a/src/components/primitives/Button/ButtonGroup.tsx b/src/components/primitives/Button/ButtonGroup.tsx
index 0a1e84ae3..b2f2eb002 100644
--- a/src/components/primitives/Button/ButtonGroup.tsx
+++ b/src/components/primitives/Button/ButtonGroup.tsx
@@ -6,11 +6,14 @@ import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 
 export default memo(
   forwardRef(
-    ({ children, divider, ...props }: IButtonGroupProps, ref?: any) => {
+    (
+      { children, divider, variant, ...props }: IButtonGroupProps,
+      ref?: any
+    ) => {
       const {
         space,
         direction,
-        variant,
+
         size,
         colorScheme,
         isDisabled,
diff --git a/src/components/primitives/Button/types.ts b/src/components/primitives/Button/types.ts
index e27eb19e2..ac9513526 100644
--- a/src/components/primitives/Button/types.ts
+++ b/src/components/primitives/Button/types.ts
@@ -13,6 +13,7 @@ import type {
 import type { ISpinnerProps } from '../Spinner/types';
 import type { IIconProps } from '../Icon';
 import type { InterfacePressableProps } from '../Pressable/types';
+import type { ColorSchemeType } from '../../../components/types';
 
 // const myFunction = ({ a, b }) => {
 //   return { a: a, b: b };
@@ -34,7 +35,7 @@ export interface InterfaceButtonProps
    * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
    * @default 'primary'
    */
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   /**
    * The variant of the button style to use.
    * @default 'solid'
@@ -149,7 +150,9 @@ export interface IButtonGroupProps extends IStackProps {
    * The variant of the button style to use.
    * @default 'solid'
    */
-  variant?: 'ghost' | 'outline' | 'solid' | 'link' | 'unstyled';
+  variant?: ResponsiveValue<
+    'ghost' | 'outline' | 'solid' | 'link' | 'unstyled' | 'subtle'
+  >;
   /**
    * The start icon element to use in the button.
    */
@@ -160,7 +163,7 @@ export interface IButtonGroupProps extends IStackProps {
    * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
    * @default 'primary'
    */
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   /**
    * If true, the button will be disabled.
    */
diff --git a/src/components/primitives/Checkbox/types.tsx b/src/components/primitives/Checkbox/types.tsx
index 59732ec65..21894678c 100644
--- a/src/components/primitives/Checkbox/types.tsx
+++ b/src/components/primitives/Checkbox/types.tsx
@@ -10,6 +10,7 @@ import type {
   ResponsiveValue,
   ThemeComponentSizeType,
 } from '../../../components/types';
+import type { ColorSchemeType } from '../../../components/types';
 
 export type ICheckboxValue = string;
 
@@ -29,7 +30,7 @@ export interface InterfaceCheckbox extends InterfaceBoxProps<ICheckboxProps> {
   /**
    * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
    */
-  colorScheme?: string | 'default';
+  colorScheme?: ColorSchemeType & ResponsiveValue<'default'>;
   /**
    * If true, the checkbox will be initially checked. (use defaultValue prop if using it inside Checkbox.Group)
    */
@@ -154,7 +155,7 @@ export interface ICheckboxGroupProps
   /**
    * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
    */
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   /**
    * The size (width and height) of the checkbox.
    */
@@ -169,7 +170,7 @@ export interface ICheckboxGroupProps
   _checkbox?: Partial<ICheckboxProps>;
 }
 export interface ICheckboxContext extends IFormControlContext {
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   size?: ResponsiveValue<'sm' | 'md' | 'lg'>;
   state: CheckboxGroupState;
 }
diff --git a/src/components/primitives/Radio/types.tsx b/src/components/primitives/Radio/types.tsx
index 27d1ddd97..a0af51e8b 100644
--- a/src/components/primitives/Radio/types.tsx
+++ b/src/components/primitives/Radio/types.tsx
@@ -9,6 +9,7 @@ import type { ISizes } from '../../../theme/base/sizes';
 export type IRadioValue = string;
 import type { CustomProps, ThemeComponentSizeType } from '../../types';
 import type { IIconProps } from '../Icon';
+import type { ColorSchemeType } from '../../../components/types';
 
 export type IRadioGroupOnChangeHandler = (value: IRadioValue) => any;
 
@@ -21,7 +22,7 @@ export interface InterfaceRadioProps extends InterfaceBoxProps<IRadioProps> {
    * The color of the radio. This should be one of the color keys in the theme (e.g."green", "red").
    * @default 'primary'
    */
-  colorScheme?: string | 'default';
+  colorScheme?: ColorSchemeType & ResponsiveValue<'default'>;
   /**
    * 	If true, the radio will be disabled
    */
@@ -123,7 +124,7 @@ export interface IRadioGroupProps extends IStackProps {
    * The color of the radios. This should be one of the color keys in the theme (e.g."green", "red").
    * @default 'primary'
    */
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   /**
    * 	The size (width and height) of the radio.
    */
@@ -145,7 +146,7 @@ export interface IRadioGroupProps extends IStackProps {
   _radio?: IRadioProps;
 }
 export interface IRadioContext extends IFormControlContext {
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   size?: ResponsiveValue<ISizes | (string & {}) | number>;
   state: RadioGroupState;
 }
diff --git a/src/components/primitives/Slider/types.tsx b/src/components/primitives/Slider/types.tsx
index f9fd852a5..bd4968e96 100644
--- a/src/components/primitives/Slider/types.tsx
+++ b/src/components/primitives/Slider/types.tsx
@@ -1,6 +1,7 @@
 import type { MutableRefObject } from 'react';
 import type { CustomProps } from '../../../components/types';
 import type { InterfaceBoxProps } from '../Box';
+import type { ColorSchemeType } from '../../../components/types';
 
 export interface InterfaceSliderProps extends InterfaceBoxProps<ISliderProps> {
   /** The current value of the Slider */
@@ -12,7 +13,7 @@ export interface InterfaceSliderProps extends InterfaceBoxProps<ISliderProps> {
   /**
    * Color scheme of the slider
    */
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   /**
    * Text description of slider. This will be announced by screen reader/
    */
diff --git a/src/components/primitives/Switch/types.ts b/src/components/primitives/Switch/types.ts
index 35bfddf39..101841fc2 100644
--- a/src/components/primitives/Switch/types.ts
+++ b/src/components/primitives/Switch/types.ts
@@ -6,6 +6,7 @@ import type {
 } from '../../../components/types';
 import type { IColors } from '../../../theme/base/colors';
 import type { InterfaceBoxProps } from '../Box';
+import type { ColorSchemeType } from '../../../components/types';
 
 export interface InterfaceSwitchProps
   extends Omit<SwitchProps, 'tintColor'>,
@@ -62,7 +63,7 @@ export interface InterfaceSwitchProps
   /**
    * Color scheme to be used for the Switch
    */
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   /**
    * Props when Switch is hovered. Accepts all the Switch props.
    */
diff --git a/src/components/types/utils.ts b/src/components/types/utils.ts
index 3d58d422c..0f7d733d9 100644
--- a/src/components/types/utils.ts
+++ b/src/components/types/utils.ts
@@ -34,6 +34,10 @@ export type ColorType = ResponsiveValue<
   Leaves<ITheme['colors']> | (string & {})
 >;
 
+export type ColorSchemeType = ResponsiveValue<
+  Exclude<keyof ITheme['colors'], 'contrastThreshold'> | (string & {})
+>;
+
 type ComponentType<T extends keyof ITheme['components']> = {
   [Property in keyof ITheme['components'][T]]: ITheme['components'][T][Property];
 };