Hot fix: resolved merge conflicts, updated UI breaking and updated props docs(rectified redundant code).

.gitignore

@@ -26,5 +26,5 @@ yarn-error.log*
 yarn.lock
 
 # Remote docs
-src/content/Props
+# src/content/Props
 react-native-elements

src/components/playground/index.jsx

@@ -24,8 +24,8 @@ export default ({ params }) => {
           placeholder={Placeholder}
         />
       </div>
-      <Error msg={params.errorProps.msg} isPopup />
       <Knobs {...params.knobProps} />
+      <Error msg={params.errorProps.msg}/>
       <Editor {...params.editorProps} />
       <Error {...params.errorProps} />
       <ActionButtons {...params.actions} />

src/content/AirbnbRating/index.jsx

@@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro";
 import PropDrawer from "../../components/PropDrawer";
 
 import Playground from "./searchbar.playground.jsx";
-const Content = lazy(() => importMDX("../Props/rating.md"));
+const Content = lazy(() => importMDX("../Props/airbnb.mdx"));
 
 export default function AirbnbPlayground() {
   return (

src/content/Avatar/index.jsx

@@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro";
 import PropDrawer from "../../components/PropDrawer";
 import Playground from "./avatar.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/avatar.md"));
+const Content = lazy(() => importMDX("../Props/avatar.mdx"));
 
 export default function Avatar() {
   return (

src/content/Badge/index.jsx

@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 
 import Playground from "./badge.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/badge.md"));
+const Content = lazy(() => importMDX("../Props/badge.mdx"));
 export default function TilePlayground() {
   return (
     <div>

src/content/BottomSheet/index.jsx

@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 
 import Playground from "./bottomsheet.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/rating.md"));
+const Content = lazy(() => importMDX("../Props/bottomsheet.mdx"));
 export default function BottomSheetPlayground() {
   return (
     <div>

src/content/Button/index.jsx

@@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro";
 import PropDrawer from "../../components/PropDrawer";
 import Playground from "./button.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/button.md"));
+const Content = lazy(() => importMDX("../Props/button.mdx"));
 class App extends Component {
   render() {
     return (

src/content/ButtonGroup/index.jsx

@@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro";
 import PropDrawer from "../../components/PropDrawer";
 
 import Playground from "./buttongroup.playground.jsx";
-const Content = lazy(() => importMDX("../Props/button_group.md"));
+const Content = lazy(() => importMDX("../Props/button_group.mdx"));
 
 export default function ButtonGroupPlayground() {
   return (

src/content/Card/index.jsx

@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 
 import Playground from "./card.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/rating.md"));
+const Content = lazy(() => importMDX("../Props/card.mdx"));
 
 export default function CardPlayground() {
   return (

src/content/CheckBox/index.jsx

@@ -3,7 +3,7 @@ import { importMDX } from "mdx.macro";
 import PropDrawer from "../../components/PropDrawer";
 
 import Playground from "./checkbox.playground.jsx";
-const Content = lazy(() => importMDX("../Props/checkbox.md"));
+const Content = lazy(() => importMDX("../Props/checkbox.mdx"));
 
 export default function CheckBoxPlayground() {
   return (

src/content/Divider/index.jsx

@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 
 import Playground from "./divider.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/divider.md"));
+const Content = lazy(() => importMDX("../Props/divider.mdx"));
 
 export default function DividerPlayground() {
   return (

src/content/Header/index.jsx

@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 
 import Playground from "./header.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/header.md"));
+const Content = lazy(() => importMDX("../Props/header.mdx"));
 
 export default function HeaderPlayground() {
   return (

src/content/Icon/index.jsx

@@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro";
 import PropDrawer from "../../components/PropDrawer";
 
 import Playground from "./icon.playground.jsx";
-const Content = lazy(() => importMDX("../Props/icon.md"));
+const Content = lazy(() => importMDX("../Props/icon.mdx"));
 
 export default function IconPlayground() {
   return (

src/content/Image/index.jsx

@@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro";
 import PropDrawer from "../../components/PropDrawer";
 import Playground from "./input.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/image.md"));
+const Content = lazy(() => importMDX("../Props/image.mdx"));
 
 export default function ImagePlayground() {
   return (

src/content/Input/index.jsx

@@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro";
 import PropDrawer from "../../components/PropDrawer";
 
 import Playground from "./input.playground.jsx";
-const Content = lazy(() => importMDX("../Props/rating.md"));
+const Content = lazy(() => importMDX("../Props/input.mdx"));
 
 export default function InputPlayground() {
   return (

src/content/ListItem/index.jsx

@@ -5,12 +5,17 @@ import PropDrawer from "../../components/PropDrawer";
 
 import Playground from "./listitem.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/listitem.md"));
+const Content = lazy(() => importMDX("../Props/listitem.mdx"));
 
 export default function ListItemPlayground() {
   return (
     <div>
       <Playground />
+      <Suspense fallback={<div>Loading...</div>}>
+        <PropDrawer>
+          <Content />
+        </PropDrawer>
+      </Suspense>
     </div>
   );
 }

src/content/Overlay/index.jsx

@@ -3,7 +3,7 @@ import Playground from "./overlay.playground.jsx";
 import { importMDX } from "mdx.macro";
 import PropDrawer from "../../components/PropDrawer";
 
-const Content = lazy(() => importMDX("../Props/overlay.md"));
+const Content = lazy(() => importMDX("../Props/overlay.mdx"));
 
 export default function OverlayPlayground() {
   return (

src/content/Pricing/index.jsx

@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 
 import Playground from "./pricing.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/pricing.md"));
+const Content = lazy(() => importMDX("../Props/pricing.mdx"));
 
 export default function PricingPlayground() {
   return (

src/content/Props/airbnb.mdx

@@ -0,0 +1,49 @@
+# Props
+
+- [`count`](#count)
+- [`defaultRating`](#defaultRating)
+- [`onFinishRating`](#onFinishRating)
+- [`reviews`](#reviews)
+- [`showRating`](#showRating)
+
+---
+
+# Reference
+
+### `count`
+
+Total number of ratings to display
+
+|  Type  | Default |
+| :----: | :-----: |
+| number |   5     |
+
+---
+
+### `defaultRating`
+
+Initial value for the rating defaultRating
+
+|      Type      | Default |
+| :------------: | :-----: |
+|     number     |  1      |
+
+---
+
+### `reviews`
+
+Labels to show when each value is tapped e.g. If the first star is tapped, then value in index 0 will be used as the label
+
+|   Type   |                  Default                     |
+| :------: | :------------------------------------------: |
+| string[] | ['Terrible', 'Bad', 'Okay', 'Good', 'Great'] |
+
+---
+
+### `onFinishRating`
+
+Callback method when the user finishes rating. Gives you the final rating value as a whole number (required)
+
+|      Type      | Default |
+| :------------: | :-----: |
+|    function    |  none   |