docs: move Inset docs

docs/content/components/inset/inset-equal.demo.tsx

@@ -0,0 +1,9 @@
+import { Inset } from '@marigold/components';
+
+export default () => (
+  <Inset space={8}>
+    Marigold has oblong and lanceolate leaves with whole margins. Some varieties
+    of marigold have leaves with toothed edges. Leaves are spirally arranged on
+    the branches.
+  </Inset>
+);

docs/content/components/inset/inset-hv.demo.tsx

@@ -0,0 +1,10 @@
+import { Inset } from '@marigold/components';
+
+export default () => (
+  <Inset spaceY={5} spaceX={7}>
+    Marigold is usually yellow, orange, red and maroon in color. Each flower
+    consists of large number of petals that overlap. Biggest petals are located
+    on a periphery and smallest in a center of a flower. Flowers contain both
+    male (stamen) and female (pistil) reproductive organs.
+  </Inset>
+);

docs/content/components/inset/inset.mdx

@@ -0,0 +1,58 @@
+---
+title: Inset
+group: Layout
+caption: Component to add spacing to children.
+---
+
+The `<Inset>` component is a layout component that acts as a container which adds spacing around its children. It can either add equal spacing to all sides (`space`) or add horizontal (`spaceX`) and vertical (`spaceY`) spacing sepretaly.
+
+The component should be used whenever you need to add some whitespace around elements. For example, around a form or inside a [`<Card>`](/components/card/).
+
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx
+import { Inset } from '@marigold/components';
+```
+
+### Props
+
+<PropsTable
+  props={[
+    {
+      property: 'space',
+      type: 'number',
+      description: 'Space on all sides',
+      default: 'none',
+    },
+    {
+      property: 'spaceX',
+      type: 'number',
+      description: 'Horizontal space',
+      default: 'none',
+    },
+    {
+      property: 'spaceY',
+      type: 'number',
+      description: 'Vertical space',
+      default: 'none',
+    },
+  ]}
+/>
+
+## Examples
+
+### Equal Spacing
+
+In order to add equal spacing to all sides use the `space` property like shown below.
+
+<ComponentDemo file="./inset-equal.demo.tsx" />
+
+### Horzintal and vertical Spacing
+
+If you need to only set horizontal or vertical spacing, or want a different horizontal and vertical spacing, use the `spaceX` and `spaceY` respectively.
+
+<ComponentDemo file="./inset-hv.demo.tsx" />