docs: link docs in package README

packages/components/README.md

@@ -1,32 +1,5 @@
-# mittwald Flow Components
+# @mittwald/flow-next-components
 
-> ⚠️ **EARLY DEVELOPMENT — STABILITY NOTICE**
->
-> This project is in **early development** stage, and we do not offer any
-> stability guarantees of any kind. We welcome you to give this project a try
-> and we're looking forward for any feedback on this project in this stage of
-> development. However, please do not rely on any inputs or outputs of this
-> project to remain stable.
-
-## Installing
-
-With npm:
-
-```shell
-$ npm install @mittwald/flow-next-components
-```
-
-With Yarn:
-
-```shell
-$ yarn add @mittwald/flow-next-components
-```
-
-## Import styles
-
-You have to import the bundled stylesheet in order to get the correct component
-styles. The stylesheet can be imported from:
-
-```
-@mittwald/flow-next-components/styles
-```
+This package is part of
+[Flow – mittwald design system](https://mittwald.github.io/flow/). See the
+homepage for more details.

packages/design-tokens/README.md

@@ -1,23 +1,5 @@
-# mittwald Flow Components
+# @mittwald/flow-next-design-tokens
 
-> ⚠️ **EARLY DEVELOPMENT — STABILITY NOTICE**
->
-> This project is in **early development** stage, and we do not offer any
-> stability guarantees of any kind. We welcome you to give this project a try
-> and we're looking forward for any feedback on this project in this stage of
-> development. However, please do not rely on any inputs or outputs of this
-> project to remain stable.
-
-## Installing
-
-With npm:
-
-```shell
-$ npm install @mittwald/flow-next-design-tokens
-```
-
-With Yarn:
-
-```shell
-$ yarn add @mittwald/flow-next-design-tokens
-```
+This package is part of
+[Flow – mittwald design system](https://mittwald.github.io/flow/). See the
+homepage for more details.

packages/docs/src/app/_components/layout/MainContent/MainContent.module.css

@@ -1,3 +1,7 @@
 .heading {
   margin-bottom: var(--size-rem--l);
 }
+
+.description {
+  margin-bottom: var(--size-rem--l);
+}

packages/docs/src/content/01-getting-started/installation/index.mdx

@@ -2,6 +2,14 @@
 description: Welcome to the Flow documentation!
 ---
 
+> Early development & stability notice
+>
+> This project is in **early development** stage, and we do not offer any
+> stability guarantees of any kind. We welcome you to give this project a try
+> and we're looking forward for any feedback on this project in this stage of
+> development. However, please do not rely on any inputs or outputs of this
+> project to remain stable.
+
 ## Installing the Flow React Component Library
 
 The Flow React Component Library can be installed using a package manager like

packages/docs/src/lib/liveCode/dynamicImports.ts

@@ -2,10 +2,10 @@
 /* auto-generated file */
 import { ImportMapping } from "@/lib/liveCode/types";
 import { lazy } from "react";
-import { faStar as I6 } from "@fortawesome/free-regular-svg-icons/faStar";
-import { faSnowboarding as I10 } from "@fortawesome/free-solid-svg-icons/faSnowboarding";
-import { faSnowplow as I11 } from "@fortawesome/free-solid-svg-icons/faSnowplow";
-import { faCirclePlay as I16 } from "@fortawesome/free-solid-svg-icons/faCirclePlay";
+import { faCirclePlay as I6 } from "@fortawesome/free-solid-svg-icons/faCirclePlay";
+import { faStar as I8 } from "@fortawesome/free-regular-svg-icons/faStar";
+import { faSnowboarding as I11 } from "@fortawesome/free-solid-svg-icons/faSnowboarding";
+import { faSnowplow as I12 } from "@fortawesome/free-solid-svg-icons/faSnowplow";
 
 export const liveCodeEditorGlobalImports: ImportMapping = {
   "Avatar:@mittwald/flow-next-components/Avatar": lazy(() => import("@mittwald/flow-next-components/Avatar")),
@@ -14,15 +14,15 @@ export const liveCodeEditorGlobalImports: ImportMapping = {
 "Badge:@mittwald/flow-next-components/Badge": lazy(() => import("@mittwald/flow-next-components/Badge")),
 "Text:@mittwald/flow-next-components/Text": lazy(() => import("@mittwald/flow-next-components/Text")),
 "Icon:@mittwald/flow-next-components/Icon": lazy(() => import("@mittwald/flow-next-components/Icon")),
-"faStar:@fortawesome/free-regular-svg-icons/faStar": I6,
+"faCirclePlay:@fortawesome/free-solid-svg-icons/faCirclePlay": I6,
 "Button:@mittwald/flow-next-components/Button": lazy(() => import("@mittwald/flow-next-components/Button")),
+"faStar:@fortawesome/free-regular-svg-icons/faStar": I8,
 "Checkbox:@mittwald/flow-next-components/Checkbox": lazy(() => import("@mittwald/flow-next-components/Checkbox")),
 "Heading:@mittwald/flow-next-components/Heading": lazy(() => import("@mittwald/flow-next-components/Heading")),
-"faSnowboarding:@fortawesome/free-solid-svg-icons/faSnowboarding": I10,
-"faSnowplow:@fortawesome/free-solid-svg-icons/faSnowplow": I11,
+"faSnowboarding:@fortawesome/free-solid-svg-icons/faSnowboarding": I11,
+"faSnowplow:@fortawesome/free-solid-svg-icons/faSnowplow": I12,
 "Label:@mittwald/flow-next-components/Label": lazy(() => import("@mittwald/flow-next-components/Label")),
 "Link:@mittwald/flow-next-components/Link": lazy(() => import("@mittwald/flow-next-components/Link")),
 "Note:@mittwald/flow-next-components/Note": lazy(() => import("@mittwald/flow-next-components/Note")),
-"Content:@mittwald/flow-next-components/Content": lazy(() => import("@mittwald/flow-next-components/Content")),
-"faCirclePlay:@fortawesome/free-solid-svg-icons/faCirclePlay": I16,
+"Content:@mittwald/flow-next-components/Content": lazy(() => import("@mittwald/flow-next-components/Content")),
 };

packages/docs/src/lib/mdx/components/MdxFileView/customComponents.tsx

@@ -1,6 +1,9 @@
 import styles from "./customComponents.module.css";
 import Heading from "@mittwald/flow-next-components/Heading";
 import { MDXComponents } from "mdx/types";
+import Note from "@mittwald/flow-next-components/Note";
+import Content from "@mittwald/flow-next-components/Content";
+import React, { Children, isValidElement } from "react";
 
 export const customComponents: MDXComponents = {
   pre: ({ children }) => <pre className={styles.pre}>{children}</pre>,
@@ -9,6 +12,15 @@ export const customComponents: MDXComponents = {
 
   p: ({ children }) => <p className={styles.p}>{children}</p>,
 
+  blockquote: ({ children }) => (
+    <Note>
+      <Heading>{Children.toArray(children).find(isValidElement)}</Heading>
+      <Content>
+        {Children.toArray(children).filter(isValidElement).slice(1)}
+      </Content>
+    </Note>
+  ),
+
   h2: ({ children }) => (
     <Heading level={2} className={styles.heading2}>
       {children}

packages/stylesheet/README.md

@@ -1,23 +1,5 @@
-# mittwald Flow Components
+# @mittwald/flow-next-stylesheet
 
-> ⚠️ **EARLY DEVELOPMENT — STABILITY NOTICE**
->
-> This project is in **early development** stage, and we do not offer any
-> stability guarantees of any kind. We welcome you to give this project a try
-> and we're looking forward for any feedback on this project in this stage of
-> development. However, please do not rely on any inputs or outputs of this
-> project to remain stable.
-
-## Installing
-
-With npm:
-
-```shell
-$ npm install @mittwald/flow-next-stylesheet
-```
-
-With Yarn:
-
-```shell
-$ yarn add @mittwald/flow-next-stylesheet
-```
+This package is part of
+[Flow – mittwald design system](https://mittwald.github.io/flow/). See the
+homepage for more details.