fix merge conflicts

Author: Pawan Kumar

docs/content/blogs/using-formik-with-react-native-and-magnus/index.md

@@ -69,12 +69,7 @@ export default function Main() {
     <ThemeProvider>
       <SafeAreaView style={{ flex: 1 }}>
         <Div m="lg">
-          <Text
-            mt="2xl"
-            color="black900"
-            fontWeight="bold"
-            fontSize="bigText100"
-          >
+          <Text mt="2xl" color="gray900" fontWeight="bold" fontSize="2xl">
             Login
           </Text>
           <Text color="gray500" mt="sm">
@@ -205,7 +200,7 @@ Now let's integrate our input and submit button with Formik.
           <>
             <Text
               mt="2xl"
-              color="black900"
+              color="gray900"
               fontWeight="bold"
               fontSize="bigText100"
             >

docs/content/docs/avatar/index.md

@@ -34,6 +34,22 @@ import { Avatar, Icon } from 'react-native-magnus';
 />
 ```
 
+## Avatar Group
+
+```jsx
+<Avatar.Group>
+  <Avatar bg="red500" color="white">
+    A
+  </Avatar>
+  <Avatar bg="blue500" color="white">
+    B
+  </Avatar>
+  <Avatar bg="yellow500" color="white">
+    C
+  </Avatar>
+</Avatar.Group>
+```
+
 ## Props
 
 | Property          | Description                                                           | Type                     | Default    |

docs/content/docs/collapse/index.md

@@ -10,10 +10,10 @@ Custom component for rendering collapse panel.
 <img src="/images/docs/collapse/1.gif" class="mobile"  style="height: 600px; width: auto;" />
 
 ```jsx
-import { Collapse, CollapseBody, CollapseHeader } from "react-native-magnus";
+import { Collapse } from "react-native-magnus";
 
 <Collapse>
-  <CollapseHeader
+  <Collapse.Header
     active
     color="gray900"
     fontSize="md"
@@ -22,14 +22,14 @@ import { Collapse, CollapseBody, CollapseHeader } from "react-native-magnus";
     prefix={<Icon name="wallet" mr="md" color="gray400" />}
   >
     Header 1
-  </CollapseHeader>
-  <CollapseBody pb="xl">
+  </Collapse.Header>
+  <Collapse.Body pb="xl">
     <Text>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus nobis
       corporis ut, ex sed aperiam. Debitis, facere! Animi quis laudantium, odio
       nulla recusandae labore pariatur in, vitae corporis delectus repellendus.
     </Text>
-  </CollapseBody>
+  </Collapse.Body>
 </Collapse>;
 ```
 
@@ -45,15 +45,15 @@ Collapse is basically a `Div` component. So it accepts all props of `Div` with t
 | ------------- | ------------------------------------------------- | --------- | ------- |
 | defaultActive | shows the collapse as opened when true by default | `boolean` | `false` |
 
-### CollapseHeader
+### Collapse.Header
 
-CollapseHeader is basically a `Button` component. So it accepts all props of `Button` with the following extra props
+Collapse.Header is basically a `Button` component. So it accepts all props of `Button` with the following extra props
 
 | Property     | Description                                            | Type        | Default |
 | ------------ | ------------------------------------------------------ | ----------- | ------- |
 | activeSuffix | Renders a component on the right of button when active | `ReactNode` | `-`     |
 | activePrefix | Renders a component on the left of button when active  | `ReactNode` | `-`     |
 
-### CollapseBody
+### Collapse.Body
 
 CollapseHeader is basically a `Div` component. So it accepts all props of `Div`

docs/content/docs/div/index.md

@@ -24,7 +24,7 @@ import { Div, Text } from "react-native-magnus";
 <img src="/images/docs/div/2.png"  style="height: 60px; width: auto;" />
 
 ```jsx
-<Div h={40} w={40} bg="brand500"></Div>
+<Div h={40} w={40} bg="pink500"></Div>
 <Div h={40} w={40} bg="green500"></Div>
 <Div h={40} w={40} bg="teal500"></Div>
 <Div h={40} w={40} bg="yellow500"></Div>
@@ -107,7 +107,7 @@ You can check complete list of colors from [here](/docs/colors-system)
       }}
     >
       <Div
-        bg="brand500"
+        bg="pink500"
         rounded="md"
         row
         flexWrap="wrap"

docs/content/docs/dropdown/index.md

@@ -18,15 +18,15 @@ const dropdownRef = React.createRef();
 
 <Button
   block
-  bg="brand500"
+  bg="pink500"
   mt="sm"
   p="md"
   color="white"
   onPress={() => dropdownRef.current.open()}>
   Open Dropdown
 </Button>
 
- <Dropdown.Container
+ <Dropdown
   ref={dropdownRef}
   title={
     <Text mx="xl" color="gray500" pb="md">
@@ -46,7 +46,7 @@ const dropdownRef = React.createRef();
   <Dropdown.Option py="md" px="xl" block>
     Third Option
   </Dropdown.Option>
-</Dropdown.Container>
+</Dropdown>
 ```
 
 <br />
@@ -64,7 +64,7 @@ const dropdownRef = React.createRef();
 
 <Button
   block
-  bg="brand500"
+  bg="pink500"
   mt="sm"
   p="md"
   color="white"
@@ -132,7 +132,7 @@ const dropdownRef = React.createRef();
 
 <Button
   block
-  bg="brand500"
+  bg="pink500"
   mt="sm"
   p="md"
   color="white"
@@ -210,7 +210,7 @@ const dropdownRef = React.createRef();
     px="md"
     block
     prefix={
-      <Icon name="file1" mr="lg" color="brand500" fontSize="3xl" />
+      <Icon name="file1" mr="lg" color="pink500" fontSize="3xl" />
     }>
     Documents
   </Dropdown.Option>

docs/content/docs/icon/index.md

@@ -15,15 +15,15 @@ import { Icon } from 'react-native-magnus'
 <Icon
   name="star"
   color="yellow700"
-  fontSize="title"
+  fontSize="6xl"
   fontFamily="FontAwesome"
 />
-<Icon name="codesquare" color="red500" fontSize="title" />
-<Icon name="android1" color="teal500" fontSize="title" />
-<Icon name="heart" color="red500" fontSize="title" />
-<Icon name="apple1" color="blue700" fontSize="title" />
-<Icon name="appstore1" color="teal500" fontSize="title" />
-<Icon name="slack" color="yellow700" fontSize="title" />
+<Icon name="codesquare" color="red500" fontSize="6xl" />
+<Icon name="android1" color="teal500" fontSize="6xl" />
+<Icon name="heart" color="red500" fontSize="6xl" />
+<Icon name="apple1" color="blue700" fontSize="6xl" />
+<Icon name="appstore1" color="teal500" fontSize="6xl" />
+<Icon name="slack" color="yellow700" fontSize="6xl" />
 ```
 
 We are using `react-native-vector-icons` behinds the scene.

docs/content/docs/image/index.md

@@ -17,7 +17,8 @@ import { Image } from "react-native-magnus";
   m={10}
   rounded="circle"
   source={{
-    uri: "https://timedotcom.files.wordpress.com/2014/07/301386_full1.jpg",
+    uri:
+      "https://images.unsplash.com/photo-1593642532400-2682810df593?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60",
   }}
 />;
 ```

docs/content/docs/modal/index.md

@@ -42,7 +42,7 @@ const modalRef = React.createRef();
       }
     }}
   >
-    <Icon color="black900" name="close" />
+    <Icon color="gray900" name="close" />
   </Button>
 </Modal>
 ```

docs/content/docs/tag/index.md

@@ -15,15 +15,15 @@ import { Tag, Icon } from 'react-native-magnus'
 <Tag
   ml="sm"
   suffix={
-    <Icon name="close" color="black700" fontSize="md" />
+    <Icon name="close" color="gray700" fontSize="caption" />
   }
 >
   Close
 </Tag>
 <Tag
   ml="sm"
   suffix={
-    <Icon name="edit" color="black700" fontSize="md" />
+    <Icon name="edit" color="gray700" fontSize="caption" />
   }
 >
   Edit

docs/src/components/layout/Header.js

@@ -24,7 +24,7 @@ export default function Header({
         <div className="flex items-center relative">
           <Logo hasText />
           <div className="text-gray-700 text-xs bg-gray-200 px-1 ml-3 md:ml-3 rounded-sm">
-            v 1.0.53
+            v 1.0.54
           </div>
         </div>
         <Search />