snackplayer automation fixes

docs/FAB.md

@@ -17,19 +17,19 @@ import { Fab } from 'native-base';
 
 ### Basic
 
-```ComponentSnackPlayer path=composites,Fab,Basic.tsx
+```ComponentSnackPlayer path=components,composites,Fab,Basic.tsx
 
 ```
 
 ### Placement
 
-```ComponentSnackPlayer path=composites,Fab,Placement.tsx
+```ComponentSnackPlayer path=components,composites,Fab,Placement.tsx
 
 ```
 
 ### Custom Position
 
-```ComponentSnackPlayer path=composites,Fab,CustomPosition.tsx
+```ComponentSnackPlayer path=components,composites,Fab,CustomPosition.tsx
 
 ```
 

docs/VStack.md

@@ -13,7 +13,7 @@ import { VStack } from 'native-base';
 
 ## Usage
 
-```ComponentSnackPlayer path=primitives,VStack,basic.tsx
+```ComponentSnackPlayer path=components,primitives,VStack,basic.tsx
 
 ```
 

docs/ZStack.md

@@ -9,15 +9,15 @@ title: ZStack
 
 ### Basic
 
-```ComponentSnackPlayer path=primitives,ZStack,example.tsx
+```ComponentSnackPlayer path=components,primitives,ZStack,example.tsx
 
 ```
 
 ### Items Centered
 
 You can pass `alignItems="center"` `justifyContent="center"` to vertically and horizontally center the children.
 
-```ComponentSnackPlayer path=primitives,ZStack,CenterStack.tsx
+```ComponentSnackPlayer path=components,primitives,ZStack,CenterStack.tsx
 
 ```
 

docs/actionSheet.md

@@ -23,25 +23,25 @@ import { Actionsheet } from 'native-base';
 
 ### Usage
 
-```ComponentSnackPlayer path=composites,Actionsheet,Usage.tsx
+```ComponentSnackPlayer path=components,composites,Actionsheet,Usage.tsx
 
 ```
 
 ### Composition
 
-```ComponentSnackPlayer path=composites,Actionsheet,Composition.tsx
+```ComponentSnackPlayer path=components,composites,Actionsheet,Composition.tsx
 
 ```
 
 ### DisableOverlay
 
-```ComponentSnackPlayer path=composites,Actionsheet,DisableOverlay.tsx
+```ComponentSnackPlayer path=components,composites,Actionsheet,DisableOverlay.tsx
 
 ```
 
 ### Icons
 
-```ComponentSnackPlayer path=composites,Actionsheet,Icon.tsx
+```ComponentSnackPlayer path=components,composites,Actionsheet,Icon.tsx
 
 ```
 

docs/alert.md

@@ -13,8 +13,8 @@ NativeBase exports 5 Alert related components:
 
 - `Alert`: The wrapper for alert components.
 - `Alert.Icon`: The visual icon for the alert that changes based on the `status` prop.
-<!-- - `Alert.Title`: The title of the alert to be announced by screen readers. -->
-<!-- - `Alert.Description`: The description of the alert to be announced by screen readers. -->
+  <!-- - `Alert.Title`: The title of the alert to be announced by screen readers. -->
+  <!-- - `Alert.Description`: The description of the alert to be announced by screen readers. -->
 
 ```jsx
 import { Alert } from 'native-base';
@@ -24,31 +24,31 @@ import { Alert } from 'native-base';
 
 ### Basic
 
-```ComponentSnackPlayer path=composites,Alert,usage.tsx
+```ComponentSnackPlayer path=components,composites,Alert,usage.tsx
 
 ```
 
 ### Status
 
-```ComponentSnackPlayer path=composites,Alert,status.tsx
+```ComponentSnackPlayer path=components,composites,Alert,status.tsx
 
 ```
 
 ### Variant
 
-```ComponentSnackPlayer path=composites,Alert,variant.tsx
+```ComponentSnackPlayer path=components,composites,Alert,variant.tsx
 
 ```
 
 ### Composition
 
-```ComponentSnackPlayer path=composites,Alert,composition.tsx
+```ComponentSnackPlayer path=components,composites,Alert,composition.tsx
 
 ```
 
 ### Action
 
-```ComponentSnackPlayer path=composites,Alert,action.tsx
+```ComponentSnackPlayer path=components,composites,Alert,action.tsx
 
 ```
 

docs/alertDialog.md

@@ -24,7 +24,7 @@ import { AlertDialog } from 'native-base';
 
 ### Basic
 
-```ComponentSnackPlayer path=composites,AlertDialog,Basic.tsx
+```ComponentSnackPlayer path=components,composites,AlertDialog,Basic.tsx
 
 ```
 
@@ -40,7 +40,6 @@ AlertDialog and its components compose the **[Modal](modal.md)** component, so a
 | ------------------- | --------- | -------------------------------------------------------------- | ------- |
 | leastDestructiveRef | React.Ref | The least destructive action to get focus when dialog is open. | -       |
 
-
 ## Accessibility
 
 Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog)
@@ -54,5 +53,3 @@ Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.
 | Tab         | Moves focus to the next focusable element.                |
 | Shift + Tab | Moves focus to the previous focusable element.            |
 | Esc         | Closes the dialog and moves focus to AlertDialog.Trigger. |
-
-

docs/avatar.md

@@ -23,31 +23,31 @@ import { Avatar } from 'native-base';
 
 ### Basic
 
-```ComponentSnackPlayer path=composites,Avatar,usage.tsx
+```ComponentSnackPlayer path=components,composites,Avatar,usage.tsx
 
 ```
 
 ### Sizes
 
-```ComponentSnackPlayer path=composites,Avatar,size.tsx
+```ComponentSnackPlayer path=components,composites,Avatar,size.tsx
 
 ```
 
 ### Fallbacks
 
-```ComponentSnackPlayer path=composites,Avatar,Fallback.tsx
+```ComponentSnackPlayer path=components,composites,Avatar,Fallback.tsx
 
 ```
 
 ### Avatar Badge
 
-```ComponentSnackPlayer path=composites,Avatar,AvatarBadge.tsx
+```ComponentSnackPlayer path=components,composites,Avatar,AvatarBadge.tsx
 
 ```
 
 ### Avatar Group
 
-```ComponentSnackPlayer path=composites,Avatar,AvatarGroup.tsx
+```ComponentSnackPlayer path=components,composites,Avatar,AvatarGroup.tsx
 
 ```
 

docs/badge.md

@@ -17,25 +17,25 @@ import { Badge } from 'native-base';
 
 ### Basic
 
-```ComponentSnackPlayer path=composites,Badge,usage.tsx
+```ComponentSnackPlayer path=components,composites,Badge,usage.tsx
 
 ```
 
 ### Color Scheme
 
-```ComponentSnackPlayer path=composites,Badge,color.tsx
+```ComponentSnackPlayer path=components,composites,Badge,color.tsx
 
 ```
 
 ### Variants
 
-```ComponentSnackPlayer path=composites,Badge,variants.tsx
+```ComponentSnackPlayer path=components,composites,Badge,variants.tsx
 
 ```
 
 ### Composition
 
-```ComponentSnackPlayer path=composites,Badge,composition.tsx
+```ComponentSnackPlayer path=components,composites,Badge,composition.tsx
 
 ```
 

docs/box.md

@@ -9,15 +9,15 @@ This is a generic component for low level layout needs. It is similar to a [`div
 
 ### Basic
 
-```ComponentSnackPlayer path=primitives,Box,basic.tsx
+```ComponentSnackPlayer path=components,primitives,Box,basic.tsx
 
 ```
 
 <br/>
 
 ### Composition
 
-```ComponentSnackPlayer path=primitives,Box,composition.tsx
+```ComponentSnackPlayer path=components,primitives,Box,composition.tsx
 
 ```
 
@@ -118,7 +118,7 @@ export default () => {
 
 ### Basic (With Ref)
 
-```ComponentSnackPlayer path=primitives,Box,WithRef.tsx
+```ComponentSnackPlayer path=components,primitives,Box,WithRef.tsx
 
 ```
 

docs/breakpoints.md

@@ -19,113 +19,6 @@ breakpoints = {
 
 `useBreakpointValue` is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size.
 
-```SnackPlayer name=useBreakpointValue
-import React from 'react';
-import {
-  Factory,
-  Button,
-  Stack,
-  NativeBaseProvider,
-  Center,
-} from 'native-base';
-import { TextInput } from 'react-native';
-
-import { Icon, useBreakpointValue, Text, VStack, Heading } from 'native-base';
-import { FontAwesome, Foundation, Feather } from '@expo/vector-icons';
-import { View } from 'react-native';
-
-export const UseBreakpointValueExample = () => {
-  const flexDir = useBreakpointValue({
-    base: 'column',
-    lg: 'row',
-  });
-  return (
-    <VStack space={10} alignItems="center" justifyContent="center">
-      <Heading>Why us?</Heading>
-      <View style={{ flexDirection: flexDir }}>
-        <VStack
-          m="3"
-          w="140"
-          borderRadius="xl"
-          p="3"
-          bg="cyan.200"
-          space={2}
-          alignItems="center"
-          justifyContent="center">
-          <Icon
-            as={Foundation}
-            name="shield"
-            size="sm"
-            textAlign="center"
-            _dark={{ color: 'coolGray.800' }}
-          />
-          <Text
-            fontSize="lg"
-            textAlign="center"
-            _dark={{ color: 'coolGray.800' }}>
-            Secure Checkout
-          </Text>
-        </VStack>
-        <VStack
-          m="3"
-          w="140"
-          borderRadius="xl"
-          p="3"
-          bg="cyan.200"
-          space={2}
-          alignItems="center"
-          justifyContent="center">
-          <Icon
-            as={Foundation}
-            name="shield"
-            size="sm"
-            textAlign="center"
-            _dark={{ color: 'coolGray.800' }}
-          />
-          <Text
-            fontSize="lg"
-            textAlign="center"
-            _dark={{ color: 'coolGray.800' }}>
-            Secure Checkout
-          </Text>
-        </VStack>
-        <VStack
-          m="3"
-          w="140"
-          borderRadius="xl"
-          p="3"
-          bg="cyan.200"
-          space={2}
-          alignItems="center"
-          justifyContent="center">
-          <Icon
-            as={Feather}
-            name="clock"
-            size="sm"
-            textAlign="center"
-            _dark={{ color: 'coolGray.800' }}
-          />
-          <Text
-            fontSize="lg"
-            textAlign="center"
-            _dark={{ color: 'coolGray.800' }}>
-            Fast Turn Around
-          </Text>
-        </VStack>
-      </View>
-    </VStack>
-  );
-};
-
-// Example template which wraps component with NativeBaseProvider
-export default function () {
-  return (
-    <NativeBaseProvider>
-      <Center flex="1">
-        <UseBreakpointValueExample />
-      </Center>
-    </NativeBaseProvider>
-  );
-}
+```ComponentSnackPlayer path=hooks,useBreakpointValue,usage.tsx
 
 ```