docs: visually hidden docs and demos (#3203)

docs/content/components/visually-hidden/visually-hidden.demo.tsx

@@ -0,0 +1,8 @@
+import { Text, VisuallyHidden } from '@marigold/components';
+
+export default () => (
+  <>
+    <Text>The Text below is visually hidden</Text>
+    <VisuallyHidden>I am invisible</VisuallyHidden>
+  </>
+);

docs/content/components/visually-hidden/visually-hidden.mdx

@@ -0,0 +1,36 @@
+---
+title: VisuallyHidden
+group: Content
+caption: Component to hide its children.
+---
+
+`<VisuallyHidden>` is a utility component that can be used to hide its children visually, while keeping them visible to screen readers and other assistive technology.
+
+This would typically be used when you want to take advantage of the behavior and semantics of a native element like a checkbox or radio button, but replace it with a custom styled element visually.
+
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx
+import { VisuallyHidden } from '@marigold/components';
+```
+
+### Props
+
+<PropsTable
+  props={[
+    {
+      property: 'isFocusable',
+      type: 'boolean',
+      description: 'Whether the element should become visible on focus.',
+      default: 'false',
+    },
+  ]}
+/>
+
+## Examples
+
+<ComponentDemo file="./visually-hidden.demo.tsx" />